[V0_FILE]json:file=".claude/launch.json" { "version": "0.0.1", "configurations": [ { "name": "Next.js Dev Server", "runtimeExecutable": "npm", "runtimeArgs": ["run", "dev"], "port": 3000, "autoPort": true } ] } [V0_FILE]markdown:file=".claude/plan.md" # Plan: Polish Core Flows — Real-time Messaging, Notifications, Submissions, Scouting ## Problem Summary The app has broken flows because: 1. **Applied/Shortlisted/Booked tabs are empty** — CastingsHub reads applications from the store, but the store never loads them from the DB 2. **Agency "Models" tab shows wrong content** — Should be "Scout" (browse all platform models), not "My Models" 3. **No way for agencies to invite models from Scout** — Missing "Invite to Roster" button 4. **Models can't see/accept agency invitations or casting offers** — Missing UI in inbox 5. **Messages aren't real-time** — No polling, messages only appear on page reload 6. **Seeded data creates confusion** — User wants a completely fresh start ## Complete Flow Maps ### Flow 1: Casting Application (Model → Creator) \`\`\` Model browses Active castings → Clicks casting → Sees detail + "Apply Now" → 4-step application → Submit → DB: Submission(status=APPLIED) created → DB: Notification sent to casting creator → Model sees casting in Castings/Applied tab Creator opens dashboard → Submissions tab → Sees model's application → Action: Shortlist → DB: Submission.status → SHORTLISTED → DB: Notification to model "You've been shortlisted" → Model: casting moves from Applied → Shortlisted tab → Action: Offer → DB: Submission.status → OFFERED → DB: Notification to model "You've received an offer!" → Model: offer appears in Inbox/Bookings with Accept/Decline → Action: Reject → DB: Submission.status → REJECTED → DB: Notification to model Model accepts offer (from Inbox/Bookings): → DB: Submission.status → ACCEPTED → DB: Notification to creator "Model accepted" → Model: Inbox/Bookings shows "Awaiting confirmation" Creator confirms booking: → DB: Submission.status → CONFIRMED → DB: Notification to model "Booking confirmed!" → Model: casting appears in Castings/Booked tab \`\`\` ### Flow 2: Agency Scouting (Agency → Model) \`\`\` Agency goes to "Scout" tab → Sees ALL models on platform (not just roster) → Clicks model profile → Sees "Invite to Roster" button → Clicks invite → DB: AgencyApplication(status=INVITED) created → DB: Notification to model "Agency wants you!" Model sees invitation in Inbox/Notifications → Accept: model joins agency roster, notification to agency → Decline: notification to agency \`\`\` ### Flow 3: Model Applies to Agency \`\`\` Model visits agency profile → "Apply to [Agency]" → DB: AgencyApplication(status=APPLIED) → DB: Notification to agency Agency sees in dashboard/notifications → Accept: model joins roster → Decline: notification to model \`\`\` ### Flow 4: Messaging (Any → Any) \`\`\` User A visits User B's profile → "Message" → Conversation created (or existing one opened) → Redirected to Inbox/Messages with that conversation open → User types message → POST to API → stored in DB → Recipient sees it (via 3-second polling interval) → Unread badge updates on Inbox tab \`\`\` ## Implementation Steps ### Step 1: Clean seed — remove all pre-made data except accounts - Modify seed.ts: keep account creation, remove all castings, submissions, posts, follows - User starts fresh — all content is user-generated ### Step 2: Load applications from DB in store-context - Add `loadApplications(userId)` that fetches from `/api/submissions/history` - CastingsHub Applied/Shortlisted/Booked tabs will then work ### Step 3: Rename agency "Models" tab → "Scout" - In app/page.tsx: change tab label and icon - Scout tab renders ModelsBrowse (all platform models) - Agency roster moves to brand-dashboard's "My Models" tab ### Step 4: Add "Invite to Roster" on model profiles (agency view) - In profile-view (model/profile-view.tsx): when viewer is agency, show invite button - Calls POST /api/agency/invite with modelId - Sends notification to model ### Step 5: Add offer/invitation handling in Inbox - Inbox/Bookings: fetch active offers from `/api/submissions/history?status=OFFERED` - Show Accept/Decline buttons on each offer - Inbox/Notifications: fetch agency invitations, show Accept/Decline ### Step 6: Real-time messaging with polling - In ChatView: add `setInterval` polling every 3 seconds for new messages - In conversation list: poll every 5 seconds for new conversations + unread counts - Update unread badge on Inbox nav tab ### Step 7: Notification polling + unread badge - In app shell: poll `/api/notifications?unread=true` every 10 seconds - Update bell icon badge count - Notifications list shows real DB notifications with timestamps ### Step 8: Wire all status change notifications - Verify POST /api/submissions/[id]/status creates notifications for: SHORTLISTED, OFFERED, CONFIRMED, REJECTED - Verify agency invite/accept creates notifications - Verify casting application creates notification to creator [V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts # uploaded files (MVP local storage) public/uploads/ [V0_FILE]markdown:file="README.md" # Luxlane MVP build *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/momoexpress-projects/v0-luxlane-mvp-build) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/o6EZfZtXkCh) ## Quick start (every time) From anywhere, run: \`\`\`bash cd /Users/j.pebalemaurice/Desktop/LuxLaneRE-vu && docker compose up -d \`\`\` Then start the app (from the same directory): \`\`\`bash npm run dev \`\`\` Or use the helper script from the project root: `./start.sh` (starts Docker Postgres, then you can run `npm run dev`). --- ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deploy on Vercel (fix signup / DB) Signup on Vercel fails if the app has no database. Vercel **cannot** use your local Docker Postgres. 1. **Add a hosted Postgres** (pick one): - [Vercel Postgres](https://vercel.com/docs/storage/vercel-postgres) (one-click in Vercel dashboard) - [Neon](https://neon.tech) → create project → copy connection string - [Supabase](https://supabase.com) → Project Settings → Database → connection string 2. **In Vercel → your project → Settings → Environment Variables**, add: - `DATABASE_URL` = your **hosted** Postgres URL (e.g. `postgresql://user:pass@host/db?sslmode=require`) - `JWT_SECRET` = a long random string (e.g. `openssl rand -base64 32`) 3. **Run migrations** on that DB once: - Either in Vercel Build: add build command `prisma generate && prisma migrate deploy && next build` (and keep `next build` in there), or - Locally: set `DATABASE_URL` to the **production** URL temporarily and run `npx prisma migrate deploy`, then switch back to local. 4. **Redeploy** (new deployment or “Redeploy” on the latest). After that, signup and login use the hosted DB. Local Docker is only for your machine. --- ## Deployment Your project is live at: **[https://vercel.com/momoexpress-projects/v0-luxlane-mvp-build](https://vercel.com/momoexpress-projects/v0-luxlane-mvp-build)** ## Build your app Continue building your app on: **[https://v0.app/chat/o6EZfZtXkCh](https://v0.app/chat/o6EZfZtXkCh)** ## Local Setup 1. **Start Postgres** (Docker): \`\`\`bash docker compose up -d \`\`\` 2. **Environment**: Copy env example and set secrets: \`\`\`bash cp .env.example .env.local \`\`\` Edit `.env.local`: set `DATABASE_URL` (default works with Docker above) and `JWT_SECRET`. 3. **Run the app** (from project root): \`\`\`bash npm run dev \`\`\` **First run:** If the DB has no users, the app will auto-apply migrations and run the seed on startup. Then log in with **sofia@luxlane.demo** / **password123**. 4. **Manual DB reset/seed** (optional): - Full reset: `npm run db:reset` (drops DB, reapplies migrations, runs seed). - Seed only: `npm run db:seed` (applies pending migrations, then seed). Ensure **Docker (Postgres)** is running. Commands summary: `docker compose up -d` → create `.env` with `DATABASE_URL` → `npm run dev` (from project root). Login: **sofia@luxlane.demo** / **password123**. **Tips:** - Run all commands from the **project root** (`LuxLaneRE-vu`). Use **`npm run dev`** (not `nmp run dev`) to start the app. **Login troubleshooting (Invalid email or password):** 1. **Check the response header** (DevTools → Network → click the `login` request → Headers → Response Headers). In development you’ll see **`X-Login-Fail-Reason`**: - **`no-user`** → No account with that email in the DB. The app is likely using a different DB than the one you seeded. Ensure `.env` or `.env.local` has `DATABASE_URL` (e.g. `postgresql://luxlane:luxlane@localhost:5433/luxlane`), run `npm run db:seed` from project root, then try again with **sofia@luxlane.demo**. - **`password-mismatch`** → User exists but password is wrong. Use exactly **password123** (no spaces, lowercase). See `lib/test-credentials.ts` for all test accounts. 2. If the **error message** says "DATABASE_URL not set", add `DATABASE_URL` to `.env` or `.env.local` in the project root and restart `npm run dev`. 3. Ensure **Docker (Postgres)** is running and you’ve run the seed from the **project root** so the app and seed use the same DB. ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/api/agency/applications/[id]/respond/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: applicationId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { action } = await request.json() if (!["accept", "reject"].includes(action)) { return NextResponse.json({ error: "action must be 'accept' or 'reject'" }, { status: 400 }) } const application = await prisma.agencyApplication.findUnique({ where: { id: applicationId }, }) if (!application) { return NextResponse.json({ error: "Application not found" }, { status: 404 }) } // Agency accepts/rejects a model's application // OR model accepts/rejects an agency's invitation const isAgency = user.id === application.agencyId && user.role === "agency" const isModel = user.id === application.modelId && user.role === "model" if (!isAgency && !isModel) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } // Agency responding to a PENDING application from model // Model responding to an INVITED request from agency if (isAgency && application.status !== "PENDING") { if (application.status !== "PENDING") { return NextResponse.json({ error: "Application is not pending" }, { status: 400 }) } } if (isModel && application.status !== "INVITED") { return NextResponse.json({ error: "No pending invitation" }, { status: 400 }) } if (action === "accept") { // Add model to roster await prisma.modelProfile.update({ where: { userId: application.modelId }, data: { agencyId: application.agencyId }, }) await prisma.agencyApplication.update({ where: { id: applicationId }, data: { status: "ACCEPTED" }, }) // Notify the other party const notifyUserId = isAgency ? application.modelId : application.agencyId await prisma.notification.create({ data: { userId: notifyUserId, type: "SYSTEM", payload: { title: isAgency ? "Application Accepted" : "Invitation Accepted", body: isAgency ? "Your application to join the agency has been accepted!" : "A model has accepted your invitation", relatedId: applicationId, relatedType: "agency_application", }, }, }) } else { await prisma.agencyApplication.update({ where: { id: applicationId }, data: { status: "REJECTED" }, }) const notifyUserId = isAgency ? application.modelId : application.agencyId await prisma.notification.create({ data: { userId: notifyUserId, type: "SYSTEM", payload: { title: isAgency ? "Application Declined" : "Invitation Declined", body: isAgency ? "Your application to join the agency was declined" : "A model has declined your invitation", relatedId: applicationId, relatedType: "agency_application", }, }, }) } return NextResponse.json({ success: true }) } catch (error) { console.error("Agency application respond error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/agency/applications/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — list applications for this agency (both received and sent invites) export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "agency") { return NextResponse.json({ error: "Only agencies can view applications" }, { status: 403 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") || "PENDING" const applications = await prisma.agencyApplication.findMany({ where: { agencyId: user.id, ...(status !== "all" ? { status: status.toUpperCase() } : {}), }, include: { model: { include: { profile: true, modelProfile: true, }, }, }, orderBy: { createdAt: "desc" }, }) const result = applications.map((a) => ({ id: a.id, modelId: a.modelId, status: a.status, note: a.note, createdAt: a.createdAt, modelName: a.model.profile?.displayName ?? a.model.username, modelAvatar: a.model.profile?.avatarUrl ?? null, modelUsername: a.model.username, modelLocation: a.model.profile?.location ?? null, modelHeightCm: a.model.modelProfile?.heightCm ?? null, })) return NextResponse.json({ applications: result }) } catch (error) { console.error("Agency applications error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — model applies to join an agency export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "model") { return NextResponse.json({ error: "Only models can apply to agencies" }, { status: 403 }) } const { agencyId, note } = await request.json() if (!agencyId) { return NextResponse.json({ error: "agencyId is required" }, { status: 400 }) } // Check agency exists const agency = await prisma.user.findUnique({ where: { id: agencyId }, select: { role: true }, }) if (!agency || agency.role !== "AGENCY") { return NextResponse.json({ error: "Agency not found" }, { status: 404 }) } // Check if already in an agency const modelProfile = await prisma.modelProfile.findUnique({ where: { userId: user.id }, }) if (modelProfile?.agencyId) { return NextResponse.json({ error: "You are already in an agency" }, { status: 409 }) } const application = await prisma.agencyApplication.upsert({ where: { modelId_agencyId: { modelId: user.id, agencyId } }, create: { modelId: user.id, agencyId, status: "PENDING", note: note || null, }, update: { status: "PENDING", note: note || null, }, }) // Notify agency await prisma.notification.create({ data: { userId: agencyId, type: "SYSTEM", payload: { title: "New Roster Application", message: `${user.displayName || user.username} has applied to join your roster`, relatedId: application.id, relatedType: "agency_application", }, }, }) return NextResponse.json({ success: true, application: { id: application.id } }) } catch (error) { console.error("Agency application error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/agency/invite/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "agency") { return NextResponse.json({ error: "Only agencies can invite models" }, { status: 403 }) } const { modelId, note } = await request.json() if (!modelId) { return NextResponse.json({ error: "modelId is required" }, { status: 400 }) } // Verify model exists and is a model const model = await prisma.user.findUnique({ where: { id: modelId }, select: { id: true, role: true, modelProfile: { select: { agencyId: true } } }, }) if (!model || model.role !== "MODEL") { return NextResponse.json({ error: "Model not found" }, { status: 404 }) } if (model.modelProfile?.agencyId === user.id) { return NextResponse.json({ error: "Model is already in your roster" }, { status: 409 }) } // Create or update application const application = await prisma.agencyApplication.upsert({ where: { modelId_agencyId: { modelId, agencyId: user.id } }, create: { modelId, agencyId: user.id, status: "INVITED", note: note || null, }, update: { status: "INVITED", note: note || null, }, }) // Send notification to model await prisma.notification.create({ data: { userId: modelId, type: "INVITE", payload: { title: "Agency Invitation", body: `An agency has invited you to join their roster`, relatedId: application.id, relatedType: "agency_application", }, }, }) return NextResponse.json({ success: true, application: { id: application.id } }) } catch (error) { console.error("Agency invite error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/agency/models/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" /** * GET /api/agency/models * Returns the agency's roster: models with profile, availability, and casting history (submissions with casting event, when, status). */ export async function GET() { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "agency") { return NextResponse.json({ error: "Only agencies can access roster" }, { status: 403 }) } const modelProfiles = await prisma.modelProfile.findMany({ where: { agencyId: user.id }, include: { user: { include: { profile: true, }, }, }, orderBy: { userId: "asc" }, }) const modelIds = modelProfiles.map((mp) => mp.userId) const submissions = await prisma.submission.findMany({ where: { modelId: { in: modelIds } }, include: { casting: { select: { id: true, title: true, type: true, status: true, location: true, startDate: true, endDate: true, deadline: true, }, }, }, orderBy: { createdAt: "desc" }, }) const submissionsByModel = submissions.reduce>((acc, s) => { if (!acc[s.modelId]) acc[s.modelId] = [] acc[s.modelId].push(s) return acc }, {}) const roster = modelProfiles.map((mp) => { const profile = mp.user.profile const modelSubmissions = (submissionsByModel[mp.userId] ?? []).map((s) => ({ id: s.id, status: s.status, submittedAt: s.createdAt, casting: s.casting ? { id: s.casting.id, title: s.casting.title, type: s.casting.type, status: s.casting.status, location: s.casting.location, startDate: s.casting.startDate, endDate: s.casting.endDate, deadline: s.casting.deadline, } : null, })) return { id: mp.userId, username: mp.user.username, email: mp.user.email, displayName: profile?.displayName ?? mp.user.username, avatarUrl: profile?.avatarUrl ?? null, location: profile?.location ?? null, bio: profile?.bio ?? null, verificationStatus: profile?.verificationStatus ?? "UNVERIFIED", availability: mp.availability, luxlaneScore: mp.luxlaneScore, submissions: modelSubmissions, } }) return NextResponse.json({ roster }) } catch (error) { console.error("Agency models error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/agency/remove/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "agency") { return NextResponse.json({ error: "Only agencies can remove models" }, { status: 403 }) } const { modelId } = await request.json() if (!modelId) { return NextResponse.json({ error: "modelId is required" }, { status: 400 }) } // Verify model is in this agency's roster const modelProfile = await prisma.modelProfile.findUnique({ where: { userId: modelId }, }) if (!modelProfile || modelProfile.agencyId !== user.id) { return NextResponse.json({ error: "Model is not in your roster" }, { status: 404 }) } // Remove from roster await prisma.modelProfile.update({ where: { userId: modelId }, data: { agencyId: null }, }) // Clean up any application record await prisma.agencyApplication.deleteMany({ where: { modelId, agencyId: user.id }, }) // Notify model await prisma.notification.create({ data: { userId: modelId, type: "SYSTEM", payload: { title: "Roster Update", body: "You have been removed from an agency roster", relatedType: "agency_roster", }, }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Agency remove error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analytics/casting/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — casting analytics for a specific casting export async function GET(request: Request) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { searchParams } = new URL(request.url) const castingId = searchParams.get("castingId") if (!castingId) { return NextResponse.json({ error: "castingId required" }, { status: 400 }) } // Verify user owns this casting const casting = await prisma.casting.findUnique({ where: { id: castingId } }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.createdBy !== user.id) { return NextResponse.json({ error: "Only casting creator can view analytics" }, { status: 403 }) } const now = new Date() const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000) // Total views const totalViews = await prisma.castingView.count({ where: { castingId } }) // Views last 30 days const views30d = await prisma.castingView.count({ where: { castingId, createdAt: { gte: thirtyDaysAgo } }, }) // Unique viewers const uniqueViewers = await prisma.castingView.groupBy({ by: ["viewerId"], where: { castingId, viewerId: { not: null } }, }) // Daily views for chart const dailyViews = await prisma.$queryRaw<{ date: string; count: bigint }[]>` SELECT DATE("createdAt") as date, COUNT(*)::bigint as count FROM "casting_views" WHERE "castingId" = ${castingId} AND "createdAt" >= ${thirtyDaysAgo} GROUP BY DATE("createdAt") ORDER BY date ASC ` // Submission funnel const totalSubmissions = await prisma.submission.count({ where: { castingId } }) const shortlisted = await prisma.submission.count({ where: { castingId, status: "SHORTLISTED" } }) const offered = await prisma.submission.count({ where: { castingId, status: "OFFERED" } }) const accepted = await prisma.submission.count({ where: { castingId, status: "ACCEPTED" } }) const confirmed = await prisma.submission.count({ where: { castingId, status: "CONFIRMED" } }) const rejected = await prisma.submission.count({ where: { castingId, status: "REJECTED" } }) const declined = await prisma.submission.count({ where: { castingId, status: "DECLINED" } }) // Saved count const savedCount = await prisma.savedCasting.count({ where: { castingId } }) return NextResponse.json({ totalViews, views30d, uniqueViewers: uniqueViewers.length, dailyViews: dailyViews.map((d: typeof dailyViews[number]) => ({ date: d.date, count: Number(d.count), })), funnel: { views: totalViews, applications: totalSubmissions, shortlisted, offered, accepted, confirmed, rejected, declined, }, conversionRate: totalViews > 0 ? Math.round((totalSubmissions / totalViews) * 1000) / 10 : 0, savedCount, }) } catch (error) { console.error("Casting analytics error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analytics/casting/track/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // POST — track a casting view export async function POST(request: Request) { try { const user = await getCurrentUser() const body = await request.json() const { castingId } = body as { castingId: string } if (!castingId) { return NextResponse.json({ error: "castingId required" }, { status: 400 }) } // Verify casting exists const casting = await prisma.casting.findUnique({ where: { id: castingId } }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } // Don't track creator's own views if (user?.id === casting.createdBy) { return NextResponse.json({ tracked: false }) } await prisma.castingView.create({ data: { castingId, viewerId: user?.id || null, }, }) return NextResponse.json({ tracked: true }) } catch (error) { console.error("Track casting view error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analytics/profile/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — profile analytics for the current user (or a specific profile) export async function GET(request: Request) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { searchParams } = new URL(request.url) const profileId = searchParams.get("profileId") || user.id // Only allow viewing own analytics unless admin if (profileId !== user.id && user.role !== "ADMIN") { return NextResponse.json({ error: "Can only view own analytics" }, { status: 403 }) } const now = new Date() const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000) const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000) // Total views const totalViews = await prisma.profileView.count({ where: { profileId }, }) // Views last 30 days const views30d = await prisma.profileView.count({ where: { profileId, createdAt: { gte: thirtyDaysAgo } }, }) // Views last 7 days const views7d = await prisma.profileView.count({ where: { profileId, createdAt: { gte: sevenDaysAgo } }, }) // Unique viewers last 30 days const uniqueViewers30d = await prisma.profileView.groupBy({ by: ["viewerId"], where: { profileId, createdAt: { gte: thirtyDaysAgo }, viewerId: { not: null } }, }) // Views by source const viewsBySource = await prisma.profileView.groupBy({ by: ["source"], where: { profileId, createdAt: { gte: thirtyDaysAgo } }, _count: true, }) // Daily views for chart (last 30 days) const dailyViews = await prisma.$queryRaw<{ date: string; count: bigint }[]>` SELECT DATE("createdAt") as date, COUNT(*)::bigint as count FROM "profile_views" WHERE "profileId" = ${profileId} AND "createdAt" >= ${thirtyDaysAgo} GROUP BY DATE("createdAt") ORDER BY date ASC ` // Follower count const followers = await prisma.follow.count({ where: { followingId: profileId } }) const following = await prisma.follow.count({ where: { followerId: profileId } }) // Post engagement const posts = await prisma.post.count({ where: { userId: profileId } }) const totalLikes = await prisma.postLike.count({ where: { post: { userId: profileId } }, }) const totalComments = await prisma.comment.count({ where: { post: { userId: profileId } }, }) return NextResponse.json({ totalViews, views30d, views7d, uniqueViewers30d: uniqueViewers30d.length, viewsBySource: viewsBySource.map((v: typeof viewsBySource[number]) => ({ source: v.source || "direct", count: v._count, })), dailyViews: dailyViews.map((d: typeof dailyViews[number]) => ({ date: d.date, count: Number(d.count), })), followers, following, posts, totalLikes, totalComments, engagementRate: posts > 0 ? Math.round(((totalLikes + totalComments) / posts) * 10) / 10 : 0, }) } catch (error) { console.error("Profile analytics error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/analytics/profile/track/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // POST — track a profile view export async function POST(request: Request) { try { const user = await getCurrentUser() const body = await request.json() const { profileId, source } = body as { profileId: string; source?: string } if (!profileId) { return NextResponse.json({ error: "profileId required" }, { status: 400 }) } // Don't track self-views if (user?.id === profileId) { return NextResponse.json({ tracked: false }) } await prisma.profileView.create({ data: { profileId, viewerId: user?.id || null, source: source || "direct", }, }) return NextResponse.json({ tracked: true }) } catch (error) { console.error("Track profile view error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/login/route.ts" import { type NextRequest, NextResponse } from "next/server" import { verifyPassword, generateAccessToken, setAuthCookies } from "@/lib/auth" import { findMockUserByEmail, mockUserToAuthUser, TEST_PASSWORD } from "@/lib/mock-users" import { v4 as uuidv4 } from "uuid" export async function POST(request: NextRequest) { try { const body = await request.json().catch(() => ({})) const email = typeof body.email === "string" ? body.email.trim().toLowerCase() : "" const password = typeof body.password === "string" ? body.password.trim() : "" if (!email || !password) { return NextResponse.json({ error: "Email and password are required" }, { status: 400 }) } // Try DB-backed login first try { const { prisma } = await import("@/lib/prisma") const user = await prisma.user.findUnique({ where: { email }, include: { profile: true }, }) if (!user) { return NextResponse.json({ error: "Invalid email or password" }, { status: 401 }) } if (!user.passwordHash || typeof user.passwordHash !== "string") { return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } const isValidPassword = await verifyPassword(password, user.passwordHash) if (!isValidPassword) { return NextResponse.json({ error: "Invalid email or password" }, { status: 401 }) } const role = user.role.toLowerCase() as "model" | "agency" | "brand" | "client" const profile = user.profile const accessToken = await generateAccessToken({ userId: user.id, email: user.email, role, username: user.username, displayName: profile?.displayName ?? user.username, }) // Store refresh token in DB const refreshToken = uuidv4() const { createHash } = await import("crypto") const tokenHash = createHash("sha256").update(refreshToken).digest("hex") const expiresAt = new Date() expiresAt.setDate(expiresAt.getDate() + 7) try { await prisma.refreshToken.create({ data: { userId: user.id, tokenHash, expiresAt }, }) } catch { // Refresh token storage failed — continue without it } await setAuthCookies(accessToken, refreshToken) return NextResponse.json({ success: true, user: { id: user.id, email: user.email, role, username: user.username, displayName: profile?.displayName ?? user.username, avatarUrl: profile?.avatarUrl ?? null, isVerified: profile ? profile.verificationStatus !== "UNVERIFIED" : false, onboardingComplete: !!profile, }, }) } catch { // DB unavailable or schema mismatch — fall through to mock login } // Mock login (no database needed) const mockUser = findMockUserByEmail(email) if (!mockUser || password !== TEST_PASSWORD) { return NextResponse.json({ error: "Invalid email or password" }, { status: 401 }) } const accessToken = await generateAccessToken({ userId: mockUser.id, email: mockUser.email, role: mockUser.role, username: mockUser.username, displayName: mockUser.displayName, }) // No DB for refresh token — just use a dummy value for the cookie const refreshToken = uuidv4() await setAuthCookies(accessToken, refreshToken) const authUser = mockUserToAuthUser(mockUser) return NextResponse.json({ success: true, user: authUser }) } catch (error) { console.error("Login error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/logout/route.ts" import { type NextRequest, NextResponse } from "next/server" import { clearAuthCookies } from "@/lib/auth" export async function POST(request: NextRequest) { try { // Clear cookies (works with or without DB) await clearAuthCookies() return NextResponse.json({ success: true }) } catch (error) { console.error("Logout error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/me/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } return NextResponse.json({ user }) } catch (error) { console.error("Get current user error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/refresh/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getCurrentUser, generateAccessToken, generateRefreshToken, setAuthCookies } from "@/lib/auth" export async function POST(request: NextRequest) { try { // getCurrentUser already handles both DB and JWT-only modes const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const accessToken = await generateAccessToken({ userId: user.id, email: user.email, role: user.role, username: user.username, displayName: user.displayName, }) const refreshToken = await generateRefreshToken(user.id) await setAuthCookies(accessToken, refreshToken) return NextResponse.json({ success: true, user }) } catch (error) { console.error("Refresh error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/reset-password/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { hashPassword } from "@/lib/auth" // POST — request password reset (in production, sends email; here, resets directly) export async function POST(request: NextRequest) { try { const body = await request.json() const { email, newPassword } = body as { email?: string; newPassword?: string } if (!email) { return NextResponse.json({ error: "Email is required" }, { status: 400 }) } const user = await prisma.user.findUnique({ where: { email: email.toLowerCase() } }) if (!user) { // Don't reveal if email exists — always return success return NextResponse.json({ success: true, message: "If an account exists, a reset link has been sent." }) } if (newPassword) { // Direct reset (dev/demo mode — in production this would use a token) if (newPassword.length < 8) { return NextResponse.json({ error: "Password must be at least 8 characters" }, { status: 400 }) } const passwordHash = await hashPassword(newPassword) await prisma.user.update({ where: { id: user.id }, data: { passwordHash }, }) return NextResponse.json({ success: true, message: "Password has been reset." }) } // In production: generate token, send email return NextResponse.json({ success: true, message: "If an account exists, a reset link has been sent." }) } catch (error) { console.error("Password reset error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/signup/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { hashPassword, generateAccessToken, generateRefreshToken, setAuthCookies, generateUniqueUsername, } from "@/lib/auth" const VALID_ROLES = ["MODEL", "AGENCY", "BRAND", "CLIENT"] as const export async function POST(request: NextRequest) { try { const body = await request.json() console.log("[v0] Signup request body:", { ...body, password: "***" }) const { email, password, displayName, role: roleInput, username: usernameInput } = body if (!email || !password || !displayName || !roleInput) { console.log("[v0] Missing required fields:", { email: !!email, password: !!password, displayName: !!displayName, roleInput: !!roleInput }) return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } const roleUpper = String(roleInput).toUpperCase() if (!VALID_ROLES.includes(roleUpper as any)) { return NextResponse.json({ error: "Invalid role" }, { status: 400 }) } const role = roleUpper as string const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { return NextResponse.json({ error: "Invalid email format" }, { status: 400 }) } if (password.length < 8) { return NextResponse.json({ error: "Password must be at least 8 characters" }, { status: 400 }) } const existingUser = await prisma.user.findUnique({ where: { email: email.toLowerCase() }, }) if (existingUser) { return NextResponse.json({ error: "Email already registered" }, { status: 409 }) } const username = usernameInput ? await ensureUniqueUsername(String(usernameInput).toLowerCase().replace(/[^a-z0-9_]/g, "").slice(0, 30) || "user") : await generateUniqueUsername(displayName) const passwordHash = await hashPassword(password) const normalizedEmail = email.toLowerCase() const user = await prisma.user.create({ data: { email: normalizedEmail, username, passwordHash, displayName, role, }, }) // Create profile record await prisma.profile.create({ data: { userId: user.id, displayName, }, }) if (role === "MODEL") { await prisma.modelProfile.create({ data: { userId: user.id }, }) } else if (role === "AGENCY") { await prisma.agencyProfile.create({ data: { userId: user.id, agencyName: displayName }, }) } else if (role === "BRAND") { await prisma.brandProfile.create({ data: { userId: user.id, brandName: displayName }, }) } else if (role === "CLIENT") { await prisma.clientProfile.create({ data: { userId: user.id, clientName: displayName }, }) } const accessToken = await generateAccessToken({ userId: user.id, email: user.email, role: user.role.toLowerCase() as "model" | "agency" | "brand" | "client", username: user.username, displayName, }) const refreshToken = await generateRefreshToken(user.id) await setAuthCookies(accessToken, refreshToken) return NextResponse.json({ success: true, user: { id: user.id, email: user.email, role: user.role.toLowerCase(), username: user.username, displayName, avatarUrl: null, isVerified: false, onboardingComplete: false, }, }) } catch (error) { console.error("Signup error:", error) const message = error instanceof Error ? error.message : "Internal server error" const isDbError = message.includes("connect") || message.includes("Can't reach") || message.includes("P1001") return NextResponse.json( { error: isDbError ? "Database unavailable. On Vercel: add a hosted Postgres (Neon/Vercel Postgres), set DATABASE_URL, and run migrations." : "Internal server error", }, { status: 500 } ) } } async function ensureUniqueUsername(base: string): Promise { let username = base let counter = 1 while (true) { const existing = await prisma.user.findUnique({ where: { username } }) if (!existing) return username username = `${base}${counter}` counter++ } } [V0_FILE]typescript:file="app/api/availability/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — fetch availability dates for a user (current user by default, or ?userId=xxx) export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { searchParams } = new URL(request.url) const targetUserId = searchParams.get("userId") || user.id const monthStr = searchParams.get("month") // "2026-03" format const where: Record = { userId: targetUserId } if (monthStr) { const [year, month] = monthStr.split("-").map(Number) const start = new Date(year, month - 1, 1) const end = new Date(year, month, 0, 23, 59, 59) // Last day of month where.date = { gte: start, lte: end } } const dates = await prisma.availabilityDate.findMany({ where, orderBy: { date: "asc" }, }) return NextResponse.json({ dates: dates.map((d) => ({ id: d.id, date: d.date.toISOString().split("T")[0], // "2026-03-20" status: d.status, })), }) } catch (error) { console.error("Get availability error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — set availability for specific dates export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "model") { return NextResponse.json({ error: "Only models can set availability" }, { status: 403 }) } const body = await request.json() const { dates } = body as { dates: Array<{ date: string; status: string }> } if (!dates || !Array.isArray(dates)) { return NextResponse.json({ error: "dates array is required" }, { status: 400 }) } const validStatuses = ["AVAILABLE", "HOLD", "BOOKED"] // Upsert each date const operations = dates.map((d) => { const dateObj = new Date(d.date + "T00:00:00.000Z") const status = validStatuses.includes(d.status.toUpperCase()) ? d.status.toUpperCase() : "AVAILABLE" return prisma.availabilityDate.upsert({ where: { userId_date: { userId: user.id, date: dateObj } }, create: { userId: user.id, date: dateObj, status }, update: { status }, }) }) await Promise.all(operations) return NextResponse.json({ success: true }) } catch (error) { console.error("Set availability error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE — remove availability entries (marks them as not set / free) export async function DELETE(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { dates } = body as { dates: string[] } if (!dates || !Array.isArray(dates)) { return NextResponse.json({ error: "dates array is required" }, { status: 400 }) } await prisma.availabilityDate.deleteMany({ where: { userId: user.id, date: { in: dates.map((d) => new Date(d + "T00:00:00.000Z")) }, }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Delete availability error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/bookings/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function PATCH( request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { id } = await params const booking = await prisma.directBooking.findUnique({ where: { id } }) if (!booking) { return NextResponse.json({ error: "Booking not found" }, { status: 404 }) } // Only the brand or the model involved can update if (booking.brandId !== user.id && booking.modelId !== user.id) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } const body = await request.json() const { status } = body if (!status) { return NextResponse.json({ error: "status is required" }, { status: 400 }) } const validStatuses = ["PENDING", "ACCEPTED", "DECLINED", "CONFIRMED", "COMPLETED", "CANCELLED"] if (!validStatuses.includes(status)) { return NextResponse.json({ error: "Invalid status" }, { status: 400 }) } // Model can accept/decline; brand can confirm/cancel/complete if (booking.modelId === user.id && !["ACCEPTED", "DECLINED"].includes(status)) { return NextResponse.json({ error: "Models can only accept or decline" }, { status: 403 }) } if (booking.brandId === user.id && !["CONFIRMED", "CANCELLED", "COMPLETED"].includes(status)) { return NextResponse.json({ error: "Brands can only confirm, cancel, or complete" }, { status: 403 }) } const updated = await prisma.directBooking.update({ where: { id }, data: { status }, }) // Notify the other party const notifyUserId = booking.brandId === user.id ? booking.modelId : booking.brandId await prisma.notification.create({ data: { userId: notifyUserId, type: "OFFER", payload: { title: "Booking updated", message: `Booking "${booking.title}" has been ${status.toLowerCase()}`, bookingId: booking.id, }, }, }) return NextResponse.json({ success: true, booking: updated }) } catch (error) { console.error("Update booking error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/bookings/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET() { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const bookings = await prisma.directBooking.findMany({ where: { OR: [{ brandId: user.id }, { modelId: user.id }], }, include: { brand: { include: { profile: true } }, model: { include: { profile: true } }, }, orderBy: { createdAt: "desc" }, }) return NextResponse.json({ bookings }) } catch (error) { console.error("Get bookings error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "brand" && user.role !== "client") { return NextResponse.json( { error: "Only brands and clients can create direct bookings" }, { status: 403 } ) } const body = await request.json() const { modelId, title, description, location, startDate, endDate, payAmount } = body if (!modelId || !title) { return NextResponse.json({ error: "modelId and title are required" }, { status: 400 }) } // Verify the model exists const model = await prisma.user.findUnique({ where: { id: modelId } }) if (!model) { return NextResponse.json({ error: "Model not found" }, { status: 404 }) } const booking = await prisma.directBooking.create({ data: { brandId: user.id, modelId, title, description: description || null, location: location || null, startDate: startDate ? new Date(startDate) : null, endDate: endDate ? new Date(endDate) : null, payAmount: payAmount || null, }, }) // Create notification for model await prisma.notification.create({ data: { userId: modelId, type: "OFFER", payload: { title: "New booking request", message: `${user.username} wants to book you for "${title}"`, bookingId: booking.id, }, }, }) return NextResponse.json({ success: true, booking }) } catch (error) { console.error("Create booking error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/casting-rooms/[roomId]/events/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — list events for a casting room export async function GET( request: NextRequest, { params }: { params: Promise<{ roomId: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { roomId } = await params // Verify user is a member const membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId: roomId, userId: user.id } }, }) if (!membership) { return NextResponse.json({ error: "Not a member of this room" }, { status: 403 }) } const events = await prisma.roomEvent.findMany({ where: { roomId }, orderBy: { createdAt: "asc" }, }) // Fetch user details for events const allUserIds: string[] = [] for (const e of events) { allUserIds.push(e.userId) if (e.targetUserId) allUserIds.push(e.targetUserId) } const uniqueUserIds = [...new Set(allUserIds)] const users = await prisma.user.findMany({ where: { id: { in: uniqueUserIds } }, include: { profile: true }, }) // eslint-disable-next-line @typescript-eslint/no-explicit-any const userMap = new Map() for (const u of users) userMap.set(u.id, u) const formatUser = (u: typeof users[number]) => ({ id: u.id, username: u.username, name: u.profile?.displayName || u.username, avatar: u.profile?.avatarUrl, role: u.role.toLowerCase(), }) return NextResponse.json({ events: events.map((e: typeof events[number]) => { const eventUser = userMap.get(e.userId) const targetUser = e.targetUserId ? userMap.get(e.targetUserId) : null return { id: e.id, roomId: e.roomId, type: e.type, userId: e.userId, user: eventUser ? formatUser(eventUser) : null, targetUserId: e.targetUserId, targetUser: targetUser ? formatUser(targetUser) : null, message: e.message, createdAt: e.createdAt, } }), }) } catch (error) { console.error("Get room events error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — create event in a casting room export async function POST( request: NextRequest, { params }: { params: Promise<{ roomId: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { roomId } = await params // Verify user is a member const membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId: roomId, userId: user.id } }, }) if (!membership) { return NextResponse.json({ error: "Not a member of this room" }, { status: 403 }) } const body = await request.json() const { type, targetUserId, message } = body as { type: string targetUserId?: string message?: string } const event = await prisma.roomEvent.create({ data: { roomId, type, userId: user.id, targetUserId, message, }, }) return NextResponse.json({ event }) } catch (error) { console.error("Create room event error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/casting-rooms/[roomId]/files/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — list files for a casting room export async function GET( request: NextRequest, { params }: { params: Promise<{ roomId: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { roomId } = await params const membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId: roomId, userId: user.id } }, }) if (!membership) { return NextResponse.json({ error: "Not a member of this room" }, { status: 403 }) } const files = await prisma.roomFile.findMany({ where: { roomId }, orderBy: { createdAt: "desc" }, }) // Fetch uploader details const uploaderIds = [...new Set(files.map((f: typeof files[number]) => f.uploadedBy))] const uploaders = await prisma.user.findMany({ where: { id: { in: uploaderIds } }, include: { profile: true }, }) // eslint-disable-next-line @typescript-eslint/no-explicit-any const uploaderMap = new Map() for (const u of uploaders) uploaderMap.set(u.id, u) return NextResponse.json({ files: files.map((f: typeof files[number]) => { const uploader = uploaderMap.get(f.uploadedBy) return { id: f.id, roomId: f.roomId, name: f.name, type: f.type, url: f.url, uploadedBy: uploader ? { id: uploader.id, username: uploader.username, name: uploader.profile?.displayName || uploader.username, avatar: uploader.profile?.avatarUrl, } : null, createdAt: f.createdAt, } }), }) } catch (error) { console.error("Get room files error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — upload a file to the casting room export async function POST( request: NextRequest, { params }: { params: Promise<{ roomId: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { roomId } = await params const membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId: roomId, userId: user.id } }, }) if (!membership) { return NextResponse.json({ error: "Not a member of this room" }, { status: 403 }) } const body = await request.json() const { name, type, url } = body as { name: string; type: string; url: string } if (!name || !url) { return NextResponse.json({ error: "name and url are required" }, { status: 400 }) } const file = await prisma.roomFile.create({ data: { roomId, name, type: type || "other", url, uploadedBy: user.id, }, }) return NextResponse.json({ file }) } catch (error) { console.error("Create room file error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/casting-rooms/[roomId]/messages/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — list messages in a casting room export async function GET( request: NextRequest, { params }: { params: Promise<{ roomId: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { roomId } = await params let membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId: roomId, userId: user.id } }, }) // Auto-add if user has a CONFIRMED submission for this casting if (!membership) { const room = await prisma.conversation.findUnique({ where: { id: roomId }, select: { castingId: true } }) if (room?.castingId) { const confirmed = await prisma.submission.findFirst({ where: { castingId: room.castingId, modelId: user.id, status: "CONFIRMED" }, }) if (confirmed) { membership = await prisma.conversationMember.create({ data: { conversationId: roomId, userId: user.id }, }) } } } if (!membership) { return NextResponse.json({ error: "Not a member of this room" }, { status: 403 }) } const { searchParams } = new URL(request.url) const before = searchParams.get("before") const limit = 50 const messages = await prisma.message.findMany({ where: { conversationId: roomId, ...(before ? { createdAt: { lt: new Date(before) } } : {}), }, include: { sender: { include: { profile: true } }, }, orderBy: { createdAt: "desc" }, take: limit, }) return NextResponse.json({ messages: messages.reverse().map((m: typeof messages[number]) => ({ id: m.id, userId: m.senderId, user: { id: m.sender.id, username: m.sender.username, name: m.sender.profile?.displayName || m.sender.username, avatar: m.sender.profile?.avatarUrl, role: m.sender.role.toLowerCase(), }, content: m.body, createdAt: m.createdAt, })), }) } catch (error) { console.error("Get room messages error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — send a message in the casting room export async function POST( request: NextRequest, { params }: { params: Promise<{ roomId: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { roomId } = await params let membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId: roomId, userId: user.id } }, }) // Auto-add if user has a CONFIRMED submission for this casting if (!membership) { const room = await prisma.conversation.findUnique({ where: { id: roomId }, select: { castingId: true } }) if (room?.castingId) { const confirmed = await prisma.submission.findFirst({ where: { castingId: room.castingId, modelId: user.id, status: "CONFIRMED" }, }) if (confirmed) { membership = await prisma.conversationMember.create({ data: { conversationId: roomId, userId: user.id }, }) } } } if (!membership) { return NextResponse.json({ error: "Not a member of this room" }, { status: 403 }) } const body = await request.json() const { content } = body as { content: string } if (!content?.trim()) { return NextResponse.json({ error: "content is required" }, { status: 400 }) } const message = await prisma.message.create({ data: { conversationId: roomId, senderId: user.id, body: content, }, include: { sender: { include: { profile: true } }, }, }) return NextResponse.json({ message: { id: message.id, userId: message.senderId, user: { id: message.sender.id, username: message.sender.username, name: message.sender.profile?.displayName || message.sender.username, avatar: message.sender.profile?.avatarUrl, role: message.sender.role.toLowerCase(), }, content: message.body, createdAt: message.createdAt, }, }) } catch (error) { console.error("Send room message error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/casting-rooms/[roomId]/schedule/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — list schedule items for a casting room export async function GET( request: NextRequest, { params }: { params: Promise<{ roomId: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { roomId } = await params const membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId: roomId, userId: user.id } }, }) if (!membership) { return NextResponse.json({ error: "Not a member of this room" }, { status: 403 }) } const items = await prisma.roomScheduleItem.findMany({ where: { roomId }, orderBy: { date: "asc" }, }) return NextResponse.json({ schedule: items.map((s: typeof items[number]) => ({ id: s.id, roomId: s.roomId, title: s.title, date: s.date, time: s.time, location: s.location, notes: s.notes, })), }) } catch (error) { console.error("Get room schedule error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — add a schedule item export async function POST( request: NextRequest, { params }: { params: Promise<{ roomId: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { roomId } = await params const membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId: roomId, userId: user.id } }, }) if (!membership) { return NextResponse.json({ error: "Not a member of this room" }, { status: 403 }) } const body = await request.json() const { title, date, time, location, notes } = body as { title: string date: string time: string location?: string notes?: string } if (!title || !date || !time) { return NextResponse.json({ error: "title, date, and time are required" }, { status: 400 }) } const item = await prisma.roomScheduleItem.create({ data: { roomId, title, date: new Date(date), time, location, notes, }, }) return NextResponse.json({ item }) } catch (error) { console.error("Create room schedule item error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/casting-rooms/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — get or find casting room for a casting export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { searchParams } = new URL(request.url) const castingId = searchParams.get("castingId") if (!castingId) { // List all casting rooms the user is a member of const rooms = await prisma.conversation.findMany({ where: { type: "casting_room", members: { some: { userId: user.id } }, }, include: { casting: { include: { creator: { include: { profile: true } }, }, }, members: { include: { user: { include: { profile: true, modelProfile: true } }, }, }, }, orderBy: { createdAt: "desc" }, }) return NextResponse.json({ rooms: rooms.map((r: typeof rooms[number]) => formatRoom(r)), }) } // Find room for specific casting const room = await prisma.conversation.findFirst({ where: { type: "casting_room", castingId, }, include: { casting: { include: { creator: { include: { profile: true } }, }, }, members: { include: { user: { include: { profile: true, modelProfile: true } }, }, }, }, }) if (!room) { return NextResponse.json({ room: null }) } return NextResponse.json({ room: formatRoom(room) }) } catch (error) { console.error("Get casting room error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — create a casting room for a casting export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { castingId } = body as { castingId: string } if (!castingId) { return NextResponse.json({ error: "castingId is required" }, { status: 400 }) } // Verify casting exists and user is creator const casting = await prisma.casting.findUnique({ where: { id: castingId } }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.createdBy !== user.id) { return NextResponse.json({ error: "Only the casting creator can create a room" }, { status: 403 }) } // Check if room already exists const existing = await prisma.conversation.findFirst({ where: { type: "casting_room", castingId }, }) if (existing) { return NextResponse.json({ error: "Room already exists for this casting" }, { status: 409 }) } // Create the room and add creator as member const room = await prisma.conversation.create({ data: { type: "casting_room", castingId, status: "active", members: { create: { userId: user.id }, }, roomEvents: { create: { type: "created", userId: user.id, }, }, }, include: { casting: { include: { creator: { include: { profile: true } }, }, }, members: { include: { user: { include: { profile: true, modelProfile: true } }, }, }, }, }) return NextResponse.json({ room: formatRoom(room) }) } catch (error) { console.error("Create casting room error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // eslint-disable-next-line @typescript-eslint/no-explicit-any function formatRoom(r: any) { return { id: r.id, castingId: r.castingId, status: r.status, createdAt: r.createdAt, casting: r.casting ? { id: r.casting.id, title: r.casting.title, type: r.casting.type, status: r.casting.status, location: r.casting.location, creator: { id: r.casting.creator.id, username: r.casting.creator.username, name: r.casting.creator.profile?.displayName || r.casting.creator.username, avatar: r.casting.creator.profile?.avatarUrl, role: r.casting.creator.role.toLowerCase(), }, } : null, members: r.members.map((m: any) => ({ id: m.user.id, username: m.user.username, name: m.user.profile?.displayName || m.user.username, avatar: m.user.profile?.avatarUrl, role: m.user.role.toLowerCase(), location: m.user.profile?.location, })), } } [V0_FILE]typescript:file="app/api/castings/[id]/activate/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const casting = await prisma.casting.findUnique({ where: { id }, select: { createdBy: true, status: true }, }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.createdBy !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } if (casting.status !== "DRAFT") { return NextResponse.json({ error: "Can only activate draft castings" }, { status: 400 }) } await prisma.casting.update({ where: { id }, data: { status: "ACTIVE" }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Activate casting error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/[id]/apply/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: castingId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const casting = await prisma.casting.findUnique({ where: { id: castingId }, select: { id: true, createdBy: true, title: true, status: true }, }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.status !== "ACTIVE") { return NextResponse.json({ error: "Casting is not accepting applications" }, { status: 400 }) } const existing = await prisma.submission.findUnique({ where: { castingId_modelId: { castingId, modelId: user.id } }, }) if (existing) { return NextResponse.json({ error: "Already applied to this casting" }, { status: 409 }) } const body = await request.json().catch(() => ({})) const note = (body?.note as string) || null const submission = await prisma.submission.create({ data: { castingId, modelId: user.id, submittedBy: user.id, status: "APPLIED", note, }, }) await prisma.notification.create({ data: { userId: casting.createdBy, type: "SYSTEM", payload: { title: "New application received", message: `${user.displayName || user.username} applied to "${casting.title}"`, castingId, submissionId: submission.id, }, }, }) return NextResponse.json({ success: true, submission: { id: submission.id, status: submission.status.toLowerCase(), }, }) } catch (error) { console.error("Apply to casting error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/[id]/bulk-action/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" const VALID_ACTIONS = ["shortlist", "reject", "offer", "invite"] // POST — perform bulk action on submissions or invite multiple models export async function POST( request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { id: castingId } = await params // Verify casting exists and user is creator const casting = await prisma.casting.findUnique({ where: { id: castingId } }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.createdBy !== user.id) { return NextResponse.json({ error: "Only the casting creator can perform bulk actions" }, { status: 403 }) } const body = await request.json() const { action, submissionIds, modelIds } = body as { action: string submissionIds?: string[] modelIds?: string[] } if (!action || !VALID_ACTIONS.includes(action)) { return NextResponse.json({ error: "Invalid action. Must be one of: " + VALID_ACTIONS.join(", ") }, { status: 400 }) } let affected = 0 if (action === "invite" && modelIds?.length) { // Bulk invite models to casting const existingSubmissions = await prisma.submission.findMany({ where: { castingId, modelId: { in: modelIds } }, select: { modelId: true }, }) const alreadySubmitted = new Set(existingSubmissions.map((s: typeof existingSubmissions[number]) => s.modelId)) const toCreate = modelIds.filter((id: string) => !alreadySubmitted.has(id)) if (toCreate.length > 0) { const result = await prisma.submission.createMany({ data: toCreate.map((modelId: string) => ({ castingId, modelId, submittedBy: user.id, status: "APPLIED", note: "Invited by casting creator", })), }) affected = result.count // Create notifications for each invited model await prisma.notification.createMany({ data: toCreate.map((modelId: string) => ({ userId: modelId, type: "INVITE" as const, payload: { castingId, castingTitle: casting.title, message: `You've been invited to "${casting.title}"`, }, })), }) } } else if (submissionIds?.length) { // Bulk update submissions const statusMap: Record = { shortlist: "SHORTLISTED", reject: "REJECTED", offer: "OFFERED", } const newStatus = statusMap[action] if (!newStatus) { return NextResponse.json({ error: "Invalid action for submissions" }, { status: 400 }) } const result = await prisma.submission.updateMany({ where: { id: { in: submissionIds }, castingId, }, data: { status: newStatus }, }) affected = result.count // Create notifications const submissions = await prisma.submission.findMany({ where: { id: { in: submissionIds } }, select: { modelId: true }, }) const notifType = action === "shortlist" ? "SHORTLISTED" : action === "offer" ? "OFFER" : "SYSTEM" const notifMessage = action === "shortlist" ? `You've been shortlisted for "${casting.title}"` : action === "offer" ? `You've received an offer for "${casting.title}"` : `Your application for "${casting.title}" was not selected` await prisma.notification.createMany({ data: submissions.map((s: typeof submissions[number]) => ({ userId: s.modelId, type: notifType as "SHORTLISTED" | "OFFER" | "SYSTEM", payload: { castingId, castingTitle: casting.title, message: notifMessage, }, })), }) } else { return NextResponse.json({ error: "submissionIds or modelIds required" }, { status: 400 }) } return NextResponse.json({ success: true, affected }) } catch (error) { console.error("Bulk action error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/[id]/close/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const casting = await prisma.casting.findUnique({ where: { id }, select: { createdBy: true }, }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.createdBy !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } await prisma.casting.update({ where: { id }, data: { status: "CLOSED" }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Close casting error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/[id]/invite/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" /** * POST /api/castings/[id]/invite * Brand or agency invites a model to the casting (creates a submission on behalf of the model). * Body: { modelId: string } */ export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: castingId } = await params const currentUser = await getCurrentUser() if (!currentUser) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const isBrand = currentUser.role === "brand" const isAgency = currentUser.role === "agency" const casting = await prisma.casting.findUnique({ where: { id: castingId }, select: { id: true, createdBy: true, title: true, status: true }, }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } const isCreator = casting.createdBy === currentUser.id if (!isBrand && !isAgency && !isCreator) { return NextResponse.json({ error: "Only brand, agency, or casting creator can invite models" }, { status: 403 }) } if (casting.status !== "ACTIVE") { return NextResponse.json({ error: "Casting is not accepting submissions" }, { status: 400 }) } const body = await request.json().catch(() => ({})) const modelId = body?.modelId as string if (!modelId || typeof modelId !== "string") { return NextResponse.json({ error: "modelId is required" }, { status: 400 }) } const model = await prisma.user.findUnique({ where: { id: modelId }, include: { profile: true, modelProfile: true }, }) if (!model || model.role !== "MODEL") { return NextResponse.json({ error: "Model not found" }, { status: 404 }) } // If agency: only allow inviting models from their roster (optional rule) if (isAgency && model.modelProfile?.agencyId && model.modelProfile.agencyId !== currentUser.id) { // Still allow – agency can propose any model; or restrict: return 403 // We allow so agencies can propose to brand castings. } const existing = await prisma.submission.findUnique({ where: { castingId_modelId: { castingId, modelId } }, }) if (existing) { return NextResponse.json({ error: "Model already has a submission for this casting" }, { status: 409 }) } const submission = await prisma.submission.create({ data: { castingId, modelId, submittedBy: currentUser.id, status: "SUBMITTED", note: isAgency ? "Proposed by agency" : isBrand || isCreator ? "Invited by brand" : null, }, }) await prisma.notification.create({ data: { userId: modelId, type: "INVITE", payload: { type: "casting_invite", submissionId: submission.id, castingId, castingTitle: casting.title, invitedBy: currentUser.displayName ?? currentUser.username, }, }, }) return NextResponse.json({ success: true, submission: { id: submission.id, status: submission.status.toLowerCase(), }, }) } catch (error) { console.error("Invite to casting error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id } = await params const user = await getCurrentUser() const casting = await prisma.casting.findUnique({ where: { id }, include: { creator: { include: { profile: true } }, requirements: true, _count: { select: { submissions: true } }, }, }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } let userSubmission = null if (user && user.role === "model") { userSubmission = await prisma.submission.findUnique({ where: { castingId_modelId: { castingId: id, modelId: user.id } }, select: { id: true, status: true, createdAt: true }, }) } return NextResponse.json({ casting: { id: casting.id, createdBy: casting.createdBy, title: casting.title, type: casting.type, description: casting.description, location: casting.location, startDate: casting.startDate, endDate: casting.endDate, payMin: casting.payMin, payMax: casting.payMax, deadline: casting.deadline, status: casting.status, verifiedOnly: casting.verifiedOnly, requireDigitalTwin: casting.requireDigitalTwin, createdAt: casting.createdAt, updatedAt: casting.updatedAt, creatorName: casting.creator.profile?.displayName ?? casting.creator.username, creatorAvatar: casting.creator.profile?.avatarUrl ?? null, creatorUsername: casting.creator.username, creatorRole: casting.creator.role, requirements: casting.requirements ?? null, submissionCount: casting._count.submissions, userSubmission, }, }) } catch (error) { console.error("Get casting error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const casting = await prisma.casting.findUnique({ where: { id }, select: { createdBy: true }, }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.createdBy !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } const body = await request.json() await prisma.casting.update({ where: { id }, data: { ...(body.title !== undefined && { title: body.title }), ...(body.description !== undefined && { description: body.description }), ...(body.type !== undefined && { type: body.type }), ...(body.location !== undefined && { location: body.location }), ...(body.payMin !== undefined && { payMin: body.payMin }), ...(body.payMax !== undefined && { payMax: body.payMax }), ...(body.deadline !== undefined && { deadline: body.deadline ? new Date(body.deadline) : null }), }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Update casting error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/[id]/saved/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { const user = await getCurrentUser() if (!user) return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) const { id: castingId } = await params const saved = await prisma.savedCasting.findUnique({ where: { userId_castingId: { userId: user.id, castingId } }, }) return NextResponse.json({ saved: !!saved }) } export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { const user = await getCurrentUser() if (!user) return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) const { id: castingId } = await params const casting = await prisma.casting.findUnique({ where: { id: castingId } }) if (!casting) return NextResponse.json({ error: "Casting not found" }, { status: 404 }) await prisma.savedCasting.upsert({ where: { userId_castingId: { userId: user.id, castingId } }, create: { userId: user.id, castingId }, update: {}, }) return NextResponse.json({ saved: true }) } export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { const user = await getCurrentUser() if (!user) return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) const { id: castingId } = await params await prisma.savedCasting.deleteMany({ where: { userId: user.id, castingId }, }) return NextResponse.json({ saved: false }) } [V0_FILE]typescript:file="app/api/castings/[id]/submission/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { const user = await getCurrentUser() if (!user) return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) const { id: castingId } = await params const submission = await prisma.submission.findUnique({ where: { castingId_modelId: { castingId, modelId: user.id } }, }) if (!submission) return NextResponse.json({ submission: null }) return NextResponse.json({ submission: { id: submission.id, status: submission.status.toLowerCase(), note: submission.note, createdAt: submission.createdAt.toISOString(), }, }) } [V0_FILE]typescript:file="app/api/castings/[id]/submissions/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: castingId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const casting = await prisma.casting.findUnique({ where: { id: castingId }, select: { createdBy: true }, }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.createdBy !== user.id) { return NextResponse.json({ error: "Not authorized to view submissions" }, { status: 403 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") const submissions = await prisma.submission.findMany({ where: { castingId, ...(status ? { status: status.toUpperCase() as never } : {}), }, include: { model: { include: { profile: true, modelProfile: true, }, }, }, orderBy: { createdAt: "desc" }, }) const result = submissions.map((s) => ({ id: s.id, castingId: s.castingId, modelId: s.modelId, submittedBy: s.submittedBy, status: s.status, note: s.note, createdAt: s.createdAt, updatedAt: s.updatedAt, modelName: s.model.profile?.displayName ?? s.model.username, modelAvatar: s.model.profile?.avatarUrl ?? null, modelUsername: s.model.username, modelHeightCm: s.model.modelProfile?.heightCm ?? null, modelScore: s.model.modelProfile?.luxlaneScore ?? 0, })) return NextResponse.json({ submissions: result }) } catch (error) { console.error("Get submissions error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/[id]/submit/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // Agency submits models to a casting export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: castingId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "agency") { return NextResponse.json({ error: "Only agencies can submit models" }, { status: 403 }) } const casting = await prisma.casting.findUnique({ where: { id: castingId }, select: { id: true, createdBy: true, title: true, status: true }, }) if (!casting) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } if (casting.status !== "ACTIVE") { return NextResponse.json({ error: "Casting is not accepting submissions" }, { status: 400 }) } const body = await request.json() const { modelIds, note } = body if (!modelIds || !Array.isArray(modelIds) || modelIds.length === 0) { return NextResponse.json({ error: "Model IDs are required" }, { status: 400 }) } // Verify all models belong to this agency const models = await prisma.modelProfile.findMany({ where: { userId: { in: modelIds }, agencyId: user.id }, select: { userId: true }, }) if (models.length !== modelIds.length) { return NextResponse.json({ error: "Some models do not belong to your agency" }, { status: 400 }) } // Create submissions for each model (skip already submitted) const submissions = [] for (const modelId of modelIds) { const existing = await prisma.submission.findUnique({ where: { castingId_modelId: { castingId, modelId } }, }) if (existing) continue const submission = await prisma.submission.create({ data: { castingId, modelId, submittedBy: user.id, note: note || null, status: "SUBMITTED", }, }) submissions.push({ id: submission.id, modelId }) } // Notify casting creator if (submissions.length > 0) { await prisma.notification.create({ data: { userId: casting.createdBy, type: "SYSTEM", payload: { title: "New application received", message: `${user.displayName || user.username} submitted ${submissions.length} model(s) to "${casting.title}"`, castingId, }, }, }) } return NextResponse.json({ success: true, submissionsCreated: submissions.length, }) } catch (error) { console.error("Submit models error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/[id]/top-matches/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" import { calculateFitScore } from "@/lib/ai-matching" import type { User, Casting, ModelMatch } from "@/lib/types" /** * GET /api/castings/[id]/top-matches * Returns AI top model matches for a casting. Brand/agency/creator only. */ export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: castingId } = await params const currentUser = await getCurrentUser() if (!currentUser) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const castingCheck = await prisma.casting.findUnique({ where: { id: castingId }, select: { createdBy: true }, }) const isBrandOrAgency = currentUser.role === "brand" || currentUser.role === "agency" || currentUser.role === "client" const isCreator = castingCheck?.createdBy === currentUser.id if (!isBrandOrAgency && !isCreator) { return NextResponse.json({ error: "Only casting creator or brand/agency can view top matches" }, { status: 403 }) } const castingRow = await prisma.casting.findUnique({ where: { id: castingId }, include: { creator: { include: { profile: true } }, requirements: true, }, }) if (!castingRow) { return NextResponse.json({ error: "Casting not found" }, { status: 404 }) } const req = castingRow.requirements const creatorProfile = castingRow.creator.profile const castingForScore: Casting = { id: castingRow.id, creatorId: castingRow.createdBy, creator: { id: castingRow.creator.id, email: castingRow.creator.email, name: creatorProfile?.displayName ?? castingRow.creator.username, username: castingRow.creator.username, role: castingRow.creator.role.toLowerCase() as User["role"], verified: false, verificationLevel: "unverified", avatar: creatorProfile?.avatarUrl ?? "/placeholder.svg", bio: creatorProfile?.bio ?? "", location: creatorProfile?.location ?? "", followers: 0, following: 0, createdAt: castingRow.creator.createdAt, tags: [], }, title: castingRow.title, type: castingRow.type.toLowerCase() as Casting["type"], description: castingRow.description ?? "", location: castingRow.location ?? "", dates: { start: castingRow.startDate ?? new Date(), end: castingRow.endDate ?? new Date(), }, pay: { amount: castingRow.payMax ?? castingRow.payMin ?? 0, currency: "EUR", type: "flat", }, requirements: { heightRangeCm: req && req.minHeightCm != null && req.maxHeightCm != null ? { min: req.minHeightCm, max: req.maxHeightCm } : undefined, tags: (req?.tags as string[]) ?? [], experience: (req?.tags as string[]) ?? [], }, deadline: castingRow.deadline ?? new Date(), status: castingRow.status.toLowerCase() as Casting["status"], applicationsCount: 0, shortlistedCount: 0, createdAt: castingRow.createdAt, } const modelUsers = await prisma.user.findMany({ where: { role: "MODEL" }, include: { profile: true, modelProfile: true, }, }) const detailsArr = modelUsers.map((u) => (u.modelProfile?.details as Record) ?? {}) const experienceArr = detailsArr.map((d) => (d.experience as string[]) ?? []) const usersForScore: User[] = modelUsers.map((u, i) => ({ id: u.id, email: u.email, name: u.profile?.displayName ?? u.username, username: u.username, role: "model" as const, verified: (u.profile?.verificationStatus ?? "UNVERIFIED") !== "UNVERIFIED", verificationLevel: u.profile?.verificationStatus === "LUXLANE_VERIFIED" ? "luxlane_verified" : u.profile?.verificationStatus === "AGENCY_VERIFIED" ? "agency_verified" : "unverified", avatar: u.profile?.avatarUrl ?? "/placeholder.svg", bio: u.profile?.bio ?? "", location: u.profile?.location ?? "", followers: 0, following: 0, createdAt: u.createdAt, measurements: u.modelProfile && (u.modelProfile.heightCm != null || u.modelProfile.bustCm != null || u.modelProfile.waistCm != null || u.modelProfile.hipsCm != null) ? { height: u.modelProfile.heightCm != null ? `${u.modelProfile.heightCm} cm` : "", bust: u.modelProfile.bustCm != null ? `${u.modelProfile.bustCm} cm` : "", waist: u.modelProfile.waistCm != null ? `${u.modelProfile.waistCm} cm` : "", hips: u.modelProfile.hipsCm != null ? `${u.modelProfile.hipsCm} cm` : "", shoeSize: u.modelProfile.shoeSize ?? "", hairColor: u.modelProfile.hair ?? "", eyeColor: u.modelProfile.eyes ?? "", heightCm: u.modelProfile.heightCm ?? undefined, } : undefined, tags: experienceArr[i]?.length ? experienceArr[i] : (u.profile?.experience?.split(", ") ?? []), metrics: { luxlaneScore: u.modelProfile?.luxlaneScore ?? u.profile?.score ?? 0, rank: 0, rankTier: "new" as const, trend: "stable" as const, trendChange: 0, components: { bookings: 0, shortlists: 0, profileViews: 0, responseRate: 50, reliability: 50, }, achievements: [], lastUpdated: new Date(), }, })) const matches: ModelMatch[] = usersForScore.map((model) => ({ model, fitScore: calculateFitScore(model, castingForScore), })) matches.sort((a, b) => b.fitScore.total - a.fitScore.total) const limit = Math.min(Number(new URL(request.url).searchParams.get("limit")) || 10, 20) const topMatches = matches.slice(0, limit) return NextResponse.json({ matches: topMatches.map((m) => ({ model: { id: m.model.id, name: m.model.name, username: m.model.username, avatar: m.model.avatar, location: m.model.location, verified: m.model.verified, verificationLevel: m.model.verificationLevel, digitalTwin: m.model.digitalTwin, }, fitScore: m.fitScore, })), }) } catch (error) { console.error("Top matches error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/castings/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const status = searchParams.get("status") || "ACTIVE" const query = searchParams.get("query") const creatorId = searchParams.get("creatorId") const limit = Number(searchParams.get("limit")) || 20 const offset = Number(searchParams.get("offset")) || 0 const type = searchParams.get("type") const payMin = searchParams.get("payMin") const payMax = searchParams.get("payMax") const location = searchParams.get("location") const sortBy = searchParams.get("sortBy") const where: Record = {} if (creatorId) { where.createdBy = creatorId } else { where.status = status.toUpperCase() } if (query) { where.OR = [ { title: { contains: query, mode: "insensitive" } }, { description: { contains: query, mode: "insensitive" } }, ] } // Type filter if (type) { where.type = type.toUpperCase() } // Pay range filters if (payMin) { where.payMax = { ...(where.payMax as Record || {}), gte: Number(payMin) } } if (payMax) { where.payMin = { ...(where.payMin as Record || {}), lte: Number(payMax) } } // Location filter if (location) { where.location = { contains: location, mode: "insensitive" } } // Sort order let orderBy: Record[] | Record if (sortBy === "newest") { orderBy = { createdAt: "desc" } } else if (sortBy === "deadline") { orderBy = [{ deadline: "asc" }, { createdAt: "desc" }] } else if (sortBy === "pay") { orderBy = [{ payMax: "desc" }, { createdAt: "desc" }] } else if (creatorId) { orderBy = { createdAt: "desc" } } else { orderBy = [{ deadline: "asc" }, { createdAt: "desc" }] } const castings = await prisma.casting.findMany({ where, include: { creator: { include: { profile: true }, }, requirements: true, _count: { select: { submissions: true } }, }, orderBy: orderBy as any, take: limit, skip: offset, }) // Fetch shortlisted counts in parallel const shortlistedCounts = await Promise.all( castings.map((c) => prisma.submission.count({ where: { castingId: c.id, status: { in: ["SHORTLISTED", "OFFERED", "ACCEPTED", "CONFIRMED"] } }, }) ) ) const result = castings.map((c, i) => ({ id: c.id, createdBy: c.createdBy, title: c.title, type: c.type, description: c.description, location: c.location, startDate: c.startDate, endDate: c.endDate, payMin: c.payMin, payMax: c.payMax, deadline: c.deadline, status: c.status, verifiedOnly: c.verifiedOnly, requireDigitalTwin: c.requireDigitalTwin, maxSubmissionsPerAgency: c.maxSubmissionsPerAgency, createdAt: c.createdAt, updatedAt: c.updatedAt, creatorName: c.creator.profile?.displayName ?? c.creator.username, creatorAvatar: c.creator.profile?.avatarUrl ?? null, creatorUsername: c.creator.username, creator: { id: c.creator.id, displayName: c.creator.profile?.displayName ?? c.creator.displayName ?? c.creator.username, username: c.creator.username, avatarUrl: c.creator.profile?.avatarUrl ?? c.creator.avatarUrl ?? null, role: c.creator.role, verified: c.creator.profile?.verificationStatus !== "UNVERIFIED", }, requirements: c.requirements ?? null, submissionsCount: c._count.submissions, shortlistedCount: shortlistedCounts[i], })) return NextResponse.json({ castings: result }) } catch (error) { console.error("Get castings error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const roleLower = user.role.toLowerCase() if (!["brand", "agency", "client"].includes(roleLower)) { return NextResponse.json({ error: "Only brands, agencies, and clients can create castings" }, { status: 403 }) } const body = await request.json() const { title, description, type, location, payMin, payMax, deadline, startDate, endDate, verifiedOnly, requireDigitalTwin, maxSubmissionsPerAgency, requirements, } = body if (!title || !type) { return NextResponse.json({ error: "Title and type are required" }, { status: 400 }) } const casting = await prisma.casting.create({ data: { createdBy: user.id, title, description: description || null, type: type.toUpperCase(), location: location || null, payMin: payMin || null, payMax: payMax || null, deadline: deadline ? new Date(deadline) : null, startDate: startDate ? new Date(startDate) : null, endDate: endDate ? new Date(endDate) : null, verifiedOnly: verifiedOnly || false, requireDigitalTwin: requireDigitalTwin || false, maxSubmissionsPerAgency: maxSubmissionsPerAgency || null, status: "DRAFT", ...(requirements ? { requirements: { create: { minHeightCm: requirements.minHeightCm || null, maxHeightCm: requirements.maxHeightCm || null, tags: requirements.tags || [], notes: requirements.notes || null, }, }, } : {}), }, }) return NextResponse.json({ success: true, casting: { id: casting.id }, }) } catch (error) { console.error("Create casting error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/conversations/[id]/messages/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: conversationId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId, userId: user.id }, }, }) if (!membership) { return NextResponse.json({ error: "Not a member of this conversation" }, { status: 403 }) } const { searchParams } = new URL(request.url) const limit = Math.min(Number(searchParams.get("limit")) || 50, 100) const before = searchParams.get("before") const orderBy = { createdAt: "desc" as const } const where = { conversationId } const messages = before ? await prisma.message.findMany({ where: { ...where, createdAt: { lt: new Date(before) } }, orderBy, take: limit, include: { sender: { include: { profile: true } } }, }) : await prisma.message.findMany({ where, orderBy, take: limit, include: { sender: { include: { profile: true } } }, }) const formatted = messages.reverse().map((m) => ({ id: m.id, content: m.body, senderId: m.senderId, senderName: m.sender.profile?.displayName ?? m.sender.username, senderAvatar: m.sender.profile?.avatarUrl ?? null, attachmentUrl: m.attachmentUrl, createdAt: m.createdAt.toISOString(), })) return NextResponse.json({ messages: formatted }) } catch (error) { console.error("Get messages error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: conversationId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const membership = await prisma.conversationMember.findUnique({ where: { conversationId_userId: { conversationId, userId: user.id }, }, }) if (!membership) { return NextResponse.json({ error: "Not a member of this conversation" }, { status: 403 }) } const raw = await request.json().catch(() => ({})) const content = (raw.content ?? raw.body) as string | undefined const attachmentUrl = (raw.attachmentUrl ?? raw.attachments?.[0]) as string | undefined if (!content?.trim()) { return NextResponse.json({ error: "Message content is required" }, { status: 400 }) } const body = content.trim() const message = await prisma.message.create({ data: { conversationId, senderId: user.id, body, attachmentUrl: attachmentUrl ?? null, }, include: { sender: { include: { profile: true } } }, }) return NextResponse.json({ success: true, message: { id: message.id, content: message.body, senderId: message.senderId, senderName: message.sender.profile?.displayName ?? message.sender.username, createdAt: message.createdAt.toISOString(), }, }) } catch (error) { console.error("Send message error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/conversations/direct/[userId]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ userId: string }> }) { try { const { userId: otherUserId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.id === otherUserId) { return NextResponse.json({ error: "Cannot message yourself" }, { status: 400 }) } const otherUser = await prisma.user.findUnique({ where: { id: otherUserId }, }) if (!otherUser) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } const directConvs = await prisma.conversation.findMany({ where: { type: "direct", members: { some: { userId: user.id } }, }, include: { members: { select: { userId: true } } }, }) const existing = directConvs.find( (c) => c.members.length === 2 && c.members.some((m) => m.userId === otherUserId), ) if (existing) { return NextResponse.json({ conversationId: existing.id }) } const conv = await prisma.conversation.create({ data: { type: "direct", members: { create: [ { userId: user.id }, { userId: otherUserId }, ], }, }, }) return NextResponse.json({ conversationId: conv.id }) } catch (error) { console.error("Create direct conversation error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/conversations/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } // Get blocked users to exclude from conversations const blocks = await prisma.block.findMany({ where: { OR: [{ blockerId: user.id }, { blockedId: user.id }] }, select: { blockerId: true, blockedId: true }, }) const blockedIds = new Set(blocks.map((b: { blockerId: string; blockedId: string }) => b.blockerId === user.id ? b.blockedId : b.blockerId)) const memberships = await prisma.conversationMember.findMany({ where: { userId: user.id }, include: { conversation: true }, orderBy: { joinedAt: "desc" }, }) const enrichedConversations = await Promise.all( memberships.map(async (mem) => { const conv = mem.conversation const otherMemberIds = await prisma.conversationMember.findMany({ where: { conversationId: conv.id, userId: { not: user.id } }, select: { userId: true }, }) const otherUsers = await prisma.user.findMany({ where: { id: { in: otherMemberIds.map((m) => m.userId) } }, include: { profile: true }, }) const lastMessage = await prisma.message.findFirst({ where: { conversationId: conv.id }, orderBy: { createdAt: "desc" }, include: { sender: { include: { profile: true } } }, }) const members = otherUsers.map((u) => ({ id: u.id, displayName: u.profile?.displayName ?? u.username, avatarUrl: u.profile?.avatarUrl ?? null, username: u.username, })) // For casting rooms, fetch casting title let castingTitle: string | null = null if (conv.type === "casting_room" && conv.castingId) { const casting = await prisma.casting.findUnique({ where: { id: conv.castingId }, select: { title: true }, }) castingTitle = casting?.title || null } return { id: conv.id, type: conv.type, castingId: conv.castingId, castingTitle, createdAt: conv.createdAt.toISOString(), members, lastMessage: lastMessage ? { id: lastMessage.id, content: lastMessage.body, senderId: lastMessage.senderId, senderName: lastMessage.sender.profile?.displayName ?? lastMessage.sender.username, createdAt: lastMessage.createdAt.toISOString(), } : null, unreadCount: 0, } }), ) // Filter out conversations with blocked users const filtered = enrichedConversations.filter((conv) => !conv.members.some((m: { id: string }) => blockedIds.has(m.id)) ) return NextResponse.json({ conversations: filtered }) } catch (error) { console.error("Get conversations error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/dev/check-db/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" /** * GET /api/dev/check-db * Dev only: returns user count so you can verify the app's DB has seeded users. * If userCount is 0, run `npm run db:seed` from project root (or fix DATABASE_URL). */ export async function GET() { if (process.env.NODE_ENV !== "development") { return NextResponse.json({ error: "Not available" }, { status: 404 }) } try { const userCount = await prisma.user.count() const hasSofia = await prisma.user.findUnique({ where: { email: "sofia@luxlane.demo" }, select: { id: true }, }) return NextResponse.json({ userCount, hasTestUser: !!hasSofia, message: userCount === 0 ? "No users in DB. Run: npm run db:seed (from project root)" : !hasSofia ? "DB has users but not sofia@luxlane.demo. Re-run: npm run db:seed" : "DB looks good. Use sofia@luxlane.demo / password123 to log in.", }) } catch (e) { console.error("check-db error:", e) return NextResponse.json( { error: "DB connection failed", detail: String(e) }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/digital-twin/[username]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { db } from "@/lib/db" export async function GET(request: NextRequest, { params }: { params: Promise<{ username: string }> }) { try { const { username } = await params const user = await db` SELECT id FROM users WHERE username = ${username} ` if (user.length === 0) { return NextResponse.json(null) } const twin = await db` SELECT id, user_id, status, summary, preview_url, created_at, updated_at FROM digital_twins WHERE user_id = ${user[0].id} ` if (twin.length === 0) { return NextResponse.json(null) } return NextResponse.json({ id: twin[0].id, userId: twin[0].user_id, status: twin[0].status, summary: twin[0].summary, previewUrl: twin[0].preview_url, createdAt: twin[0].created_at, updatedAt: twin[0].updated_at, }) } catch (error) { console.error("Get digital twin by username error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/digital-twin/route.ts" import { type NextRequest, NextResponse } from "next/server" import { db } from "@/lib/db" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const twin = await db` SELECT id, user_id, status, summary, preview_url, created_at, updated_at FROM digital_twins WHERE user_id = ${user.id} ` if (twin.length === 0) { return NextResponse.json(null) } return NextResponse.json({ id: twin[0].id, userId: twin[0].user_id, status: twin[0].status, summary: twin[0].summary, previewUrl: twin[0].preview_url, createdAt: twin[0].created_at, updatedAt: twin[0].updated_at, }) } catch (error) { console.error("Get digital twin error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role !== "model") { return NextResponse.json({ error: "Only models can create digital twins" }, { status: 403 }) } // Ensure model profile exists (upsert pattern from NestJS) await db` INSERT INTO model_profiles (user_id, languages) VALUES (${user.id}, '[]'::jsonb) ON CONFLICT (user_id) DO NOTHING ` // Upsert digital twin with PENDING status await db` INSERT INTO digital_twins (id, user_id, status) VALUES (gen_random_uuid(), ${user.id}, 'PENDING') ON CONFLICT (user_id) DO UPDATE SET status = 'PENDING', updated_at = NOW() ` // Return checklist for UI (from NestJS service) const checklist = [ { key: "face_front", label: "Face Front", required: true }, { key: "face_left", label: "Face Left", required: true }, { key: "face_right", label: "Face Right", required: true }, { key: "body_front", label: "Full Body Front", required: true }, { key: "body_side", label: "Full Body Side", required: true }, { key: "body_back", label: "Full Body Back", required: false }, { key: "walk_video", label: "10-20s Walk Video", required: false }, ] return NextResponse.json({ ok: true, checklist }) } catch (error) { console.error("Create digital twin error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/digital-twin/upload-complete/route.ts" import { type NextRequest, NextResponse } from "next/server" import { db } from "@/lib/db" import { getCurrentUser } from "@/lib/auth" import { addJob, DIGITAL_TWIN_QUEUE } from "@/lib/queue" export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } // Check minimum inputs (from NestJS: at least 3 TWIN_INPUT assets) const inputsCount = await db` SELECT COUNT(*) as count FROM media_assets WHERE owner_id = ${user.id} AND type = 'TWIN_INPUT' ` const count = Number.parseInt(inputsCount[0].count, 10) if (count < 3) { return NextResponse.json({ error: "Upload at least 3 twin inputs to start processing." }, { status: 400 }) } // Update status to PROCESSING await db` INSERT INTO digital_twins (id, user_id, status) VALUES (gen_random_uuid(), ${user.id}, 'PROCESSING') ON CONFLICT (user_id) DO UPDATE SET status = 'PROCESSING', updated_at = NOW() ` // Add job to queue for background processing await addJob(DIGITAL_TWIN_QUEUE, "process", { userId: user.id }) return NextResponse.json({ ok: true }) } catch (error) { console.error("Upload complete error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/earnings/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — earnings dashboard for current user export async function GET(request: Request) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") const limit = parseInt(searchParams.get("limit") || "50") const offset = parseInt(searchParams.get("offset") || "0") const where: { userId: string; status?: string } = { userId: user.id } if (status) where.status = status const [earnings, total] = await Promise.all([ prisma.earning.findMany({ where, include: { casting: { select: { id: true, title: true, type: true, creator: { select: { id: true, username: true, profile: { select: { displayName: true, avatarUrl: true } }, }, }, }, }, }, orderBy: { createdAt: "desc" }, take: limit, skip: offset, }), prisma.earning.count({ where }), ]) // Summary stats const totalEarned = await prisma.earning.aggregate({ where: { userId: user.id, status: "PAID" }, _sum: { amount: true }, }) const totalPending = await prisma.earning.aggregate({ where: { userId: user.id, status: "PENDING" }, _sum: { amount: true }, }) // Monthly earnings (last 12 months) const twelveMonthsAgo = new Date() twelveMonthsAgo.setMonth(twelveMonthsAgo.getMonth() - 12) const monthlyEarnings = await prisma.$queryRaw<{ month: string; total: bigint }[]>` SELECT TO_CHAR("createdAt", 'YYYY-MM') as month, SUM("amount")::bigint as total FROM "earnings" WHERE "userId" = ${user.id} AND "status" = 'PAID' AND "createdAt" >= ${twelveMonthsAgo} GROUP BY TO_CHAR("createdAt", 'YYYY-MM') ORDER BY month ASC ` return NextResponse.json({ earnings: earnings.map((e: typeof earnings[number]) => ({ id: e.id, amount: e.amount, currency: e.currency, description: e.description, status: e.status, paidAt: e.paidAt, createdAt: e.createdAt, casting: e.casting ? { id: e.casting.id, title: e.casting.title, type: e.casting.type, creator: { id: e.casting.creator.id, username: e.casting.creator.username, name: e.casting.creator.profile?.displayName || e.casting.creator.username, avatar: e.casting.creator.profile?.avatarUrl || null, }, } : null, })), total, summary: { totalEarned: totalEarned._sum.amount || 0, totalPending: totalPending._sum.amount || 0, currency: "EUR", }, monthlyEarnings: monthlyEarnings.map((m: typeof monthlyEarnings[number]) => ({ month: m.month, total: Number(m.total), })), }) } catch (error) { console.error("Earnings error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/endorsements/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET /api/endorsements?userId= — get endorsements for a model export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const userId = searchParams.get("userId") const user = await getCurrentUser() const targetId = userId || user?.id if (!targetId) { return NextResponse.json({ error: "userId required" }, { status: 400 }) } const endorsements = await prisma.endorsement.findMany({ where: { modelId: targetId }, include: { endorser: { include: { profile: true } } }, orderBy: { createdAt: "desc" }, }) return NextResponse.json({ endorsements: endorsements.map((e) => ({ id: e.id, text: e.text, tags: e.tags, endorser: { id: e.endorser.id, name: e.endorser.profile?.displayName ?? e.endorser.displayName, username: e.endorser.username, avatar: e.endorser.profile?.avatarUrl ?? "/placeholder.svg", role: e.endorser.role.toLowerCase(), verified: e.endorser.profile?.verificationStatus !== "UNVERIFIED", }, createdAt: e.createdAt.toISOString(), })), }) } catch (error) { console.error("Get endorsements error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/endorsements — endorse a model (brands/agencies/clients only) export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.role === "MODEL") { return NextResponse.json({ error: "Models cannot endorse other models" }, { status: 403 }) } const body = await request.json() const { modelId, text, tags } = body as { modelId: string; text: string; tags?: string[] } if (!modelId || !text?.trim()) { return NextResponse.json({ error: "modelId and text required" }, { status: 400 }) } if (modelId === user.id) { return NextResponse.json({ error: "Cannot endorse yourself" }, { status: 400 }) } const endorsement = await prisma.endorsement.upsert({ where: { modelId_endorserId: { modelId, endorserId: user.id } }, create: { modelId, endorserId: user.id, text: text.trim(), tags: tags || [], }, update: { text: text.trim(), tags: tags || [], }, }) // Notify the model await prisma.notification.create({ data: { userId: modelId, type: "SYSTEM", payload: { title: "New endorsement", message: `${user.displayName || user.username} endorsed you: "${text.trim().slice(0, 50)}${text.trim().length > 50 ? "..." : ""}"`, endorsementId: endorsement.id, }, }, }).catch(() => {}) return NextResponse.json({ endorsement }, { status: 201 }) } catch (error) { console.error("Create endorsement error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/follows/[userId]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ userId: string }> }) { try { const { userId: followingId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (user.id === followingId) { return NextResponse.json({ error: "Cannot follow yourself" }, { status: 400 }) } const target = await prisma.user.findUnique({ where: { id: followingId }, }) if (!target) { return NextResponse.json({ error: "Target user not found" }, { status: 404 }) } await prisma.follow.upsert({ where: { followerId_followingId: { followerId: user.id, followingId }, }, create: { followerId: user.id, followingId }, update: {}, }) // Notify the user being followed await prisma.notification.create({ data: { userId: followingId, type: "SYSTEM", payload: { title: "New follower", message: `${user.displayName || user.username} started following you`, followerId: user.id, }, }, }).catch(() => {}) return NextResponse.json({ ok: true }) } catch (error) { console.error("Follow error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: Promise<{ userId: string }> }) { try { const { userId: followingId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } await prisma.follow.deleteMany({ where: { followerId: user.id, followingId }, }) return NextResponse.json({ ok: true }) } catch (error) { console.error("Unfollow error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/hashtags/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" // GET /api/hashtags?q=fashion — search/trending hashtags export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const q = searchParams.get("q")?.trim() const limit = Math.min(Number(searchParams.get("limit")) || 20, 50) // Find posts containing the hashtag and count occurrences if (q) { const tag = q.startsWith("#") ? q : `#${q}` const posts = await prisma.post.findMany({ where: { caption: { contains: tag, mode: "insensitive" } }, select: { id: true, caption: true }, take: 100, }) // Extract all hashtags from matching posts const tagCounts = new Map() for (const post of posts) { const tags = (post.caption || "").match(/#[\w]+/g) || [] for (const t of tags) { const lower = t.toLowerCase() tagCounts.set(lower, (tagCounts.get(lower) || 0) + 1) } } const hashtags = [...tagCounts.entries()] .sort((a, b) => b[1] - a[1]) .slice(0, limit) .map(([tag, count]) => ({ tag, count })) return NextResponse.json({ hashtags }) } // No query — return trending (most used hashtags across all posts) const recentPosts = await prisma.post.findMany({ where: { caption: { not: null } }, select: { caption: true }, orderBy: { createdAt: "desc" }, take: 500, }) const tagCounts = new Map() for (const post of recentPosts) { const tags = (post.caption || "").match(/#[\w]+/g) || [] for (const t of tags) { const lower = t.toLowerCase() tagCounts.set(lower, (tagCounts.get(lower) || 0) + 1) } } const trending = [...tagCounts.entries()] .sort((a, b) => b[1] - a[1]) .slice(0, limit) .map(([tag, count]) => ({ tag, count })) return NextResponse.json({ hashtags: trending }) } catch (error) { console.error("Hashtags error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/highlights/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // PATCH — update a highlight (add/remove stories, rename) export async function PATCH( request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { id } = await params const highlight = await prisma.storyHighlight.findUnique({ where: { id } }) if (!highlight) { return NextResponse.json({ error: "Highlight not found" }, { status: 404 }) } if (highlight.userId !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } const body = await request.json() const { title, coverUrl, addStoryIds, removeStoryIds } = body as { title?: string coverUrl?: string addStoryIds?: string[] removeStoryIds?: string[] } // Update highlight metadata if (title || coverUrl !== undefined) { await prisma.storyHighlight.update({ where: { id }, data: { ...(title && { title }), ...(coverUrl !== undefined && { coverUrl }), }, }) } // Add stories if (addStoryIds?.length) { await prisma.story.updateMany({ where: { id: { in: addStoryIds }, userId: user.id }, data: { highlightId: id }, }) } // Remove stories if (removeStoryIds?.length) { await prisma.story.updateMany({ where: { id: { in: removeStoryIds }, highlightId: id }, data: { highlightId: null }, }) } return NextResponse.json({ success: true }) } catch (error) { console.error("Update highlight error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE — delete a highlight export async function DELETE( _request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { id } = await params const highlight = await prisma.storyHighlight.findUnique({ where: { id } }) if (!highlight) { return NextResponse.json({ error: "Highlight not found" }, { status: 404 }) } if (highlight.userId !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } // Detach stories first await prisma.story.updateMany({ where: { highlightId: id }, data: { highlightId: null }, }) await prisma.storyHighlight.delete({ where: { id } }) return NextResponse.json({ success: true }) } catch (error) { console.error("Delete highlight error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/highlights/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — get highlights for a user export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) let userId = searchParams.get("userId") if (!userId) { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } userId = user.id } const highlights = await prisma.storyHighlight.findMany({ where: { userId }, include: { stories: { select: { id: true, mediaUrl: true, mediaType: true, caption: true, viewCount: true, createdAt: true, }, orderBy: { createdAt: "asc" }, }, }, orderBy: { sortOrder: "asc" }, }) return NextResponse.json({ highlights: highlights.map((h: typeof highlights[number]) => ({ id: h.id, title: h.title, coverUrl: h.coverUrl || h.stories[0]?.mediaUrl || null, storyCount: h.stories.length, stories: h.stories, })), }) } catch (error) { console.error("Highlights error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — create a new highlight export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { title, coverUrl, storyIds } = body as { title: string coverUrl?: string storyIds?: string[] } if (!title) { return NextResponse.json({ error: "title required" }, { status: 400 }) } const highlight = await prisma.storyHighlight.create({ data: { userId: user.id, title, coverUrl: coverUrl || null, }, }) // Attach stories to highlight if provided if (storyIds?.length) { await prisma.story.updateMany({ where: { id: { in: storyIds }, userId: user.id, }, data: { highlightId: highlight.id }, }) } return NextResponse.json(highlight, { status: 201 }) } catch (error) { console.error("Create highlight error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/jobs/process-twin/route.ts" import { type NextRequest, NextResponse } from "next/server" import { db } from "@/lib/db" import { getNextJob, DIGITAL_TWIN_QUEUE } from "@/lib/queue" // Worker endpoint to process digital twin jobs // In production, this would be a cron job or separate worker service export async function POST(request: NextRequest) { try { // Verify internal request (add auth in production) const authHeader = request.headers.get("x-internal-key") if (authHeader !== process.env.INTERNAL_JOB_KEY && process.env.INTERNAL_JOB_KEY) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const job = await getNextJob(DIGITAL_TWIN_QUEUE) if (!job) { return NextResponse.json({ message: "No jobs in queue" }) } const { userId } = job.data as { userId: string } // Set to PROCESSING await db` INSERT INTO digital_twins (id, user_id, status) VALUES (gen_random_uuid(), ${userId}, 'PROCESSING') ON CONFLICT (user_id) DO UPDATE SET status = 'PROCESSING', updated_at = NOW() ` // Get input assets const inputs = await db` SELECT id, url, metadata FROM media_assets WHERE owner_id = ${userId} AND type = 'TWIN_INPUT' LIMIT 50 ` // v1 placeholder processing (matches NestJS processor) // In v2: download TWIN_INPUT, run CV pipeline, generate preview, upload output const summary = { version: "v1", inputsCount: inputs.length, generatedAt: new Date().toISOString(), notes: "Placeholder summary. Replace with CV pipeline later.", } // Update to READY with summary await db` UPDATE digital_twins SET status = 'READY', summary = ${JSON.stringify(summary)}::jsonb, preview_url = NULL, updated_at = NOW() WHERE user_id = ${userId} ` return NextResponse.json({ ok: true, processed: userId }) } catch (error) { console.error("Process twin job error:", error) // If we have job data, mark as FAILED try { const job = await getNextJob(DIGITAL_TWIN_QUEUE) if (job?.data?.userId) { await db` UPDATE digital_twins SET status = 'FAILED', updated_at = NOW() WHERE user_id = ${job.data.userId} ` } } catch {} return NextResponse.json({ error: "Processing failed" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/media/[id]/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // DELETE — delete a media asset export async function DELETE( _request: Request, { params }: { params: Promise<{ id: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { id } = await params const asset = await prisma.mediaAsset.findUnique({ where: { id } }) if (!asset) { return NextResponse.json({ error: "Media not found" }, { status: 404 }) } if (asset.ownerId !== user.id) { return NextResponse.json({ error: "Not your media" }, { status: 403 }) } await prisma.mediaAsset.delete({ where: { id } }) return NextResponse.json({ success: true }) } catch (error) { console.error("Delete media error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/media/confirm/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" import { mediaConfirmSchema } from "@/lib/validations" export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const validation = mediaConfirmSchema.safeParse(body) if (!validation.success) { return NextResponse.json({ error: validation.error.errors[0].message }, { status: 400 }) } const { type, url, meta } = validation.data const asset = await prisma.mediaAsset.create({ data: { ownerId: user.id, type, url, meta: meta ?? undefined, }, }) if (type === "AVATAR") { await prisma.profile.upsert({ where: { userId: user.id }, create: { userId: user.id, displayName: user.username, avatarUrl: url }, update: { avatarUrl: url }, }) } return NextResponse.json({ id: asset.id, ownerId: asset.ownerId, type: asset.type, url: asset.url, meta: asset.meta, createdAt: asset.createdAt.toISOString(), }) } catch (error) { console.error("Confirm media error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/media/presign/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getCurrentUser } from "@/lib/auth" import { mediaPresignSchema } from "@/lib/validations" import crypto from "crypto" export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const validation = mediaPresignSchema.safeParse(body) if (!validation.success) { return NextResponse.json({ error: validation.error.errors[0].message }, { status: 400 }) } const { type, filename, contentType } = validation.data // Generate unique key matching NestJS pattern: userId/type/timestamp-randomhex-filename const key = `${user.id}/${type}/${Date.now()}-${crypto.randomBytes(8).toString("hex")}-${filename}` // For MVP, use local file upload endpoint; in production, swap for S3 presigned URLs const uploadUrl = `/api/media/upload?key=${encodeURIComponent(key)}` const publicUrl = `/uploads/${key}` return NextResponse.json({ uploadUrl, publicUrl, key }) } catch (error) { console.error("Presign error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/media/reorder/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // POST — reorder media assets (portfolio images) export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { orderedIds } = body as { orderedIds: string[] } if (!orderedIds || !Array.isArray(orderedIds) || orderedIds.length === 0) { return NextResponse.json({ error: "orderedIds array is required" }, { status: 400 }) } // Verify all assets belong to this user const assets = await prisma.mediaAsset.findMany({ where: { id: { in: orderedIds }, ownerId: user.id }, }) if (assets.length !== orderedIds.length) { return NextResponse.json({ error: "Some media assets not found or not owned by you" }, { status: 400 }) } // Update sort order for each const updates = orderedIds.map((id: string, index: number) => prisma.mediaAsset.update({ where: { id }, data: { sortOrder: index }, }) ) await Promise.all(updates) return NextResponse.json({ success: true }) } catch (error) { console.error("Reorder media error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/media/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const user = await getCurrentUser() const { searchParams } = new URL(request.url) const ownerId = searchParams.get("ownerId") || user?.id const type = searchParams.get("type") if (!ownerId) { return NextResponse.json({ error: "Not authenticated and no ownerId provided" }, { status: 401 }) } const media = await prisma.mediaAsset.findMany({ where: { ownerId, ...(type ? { type: type.toUpperCase() as never } : {}), }, orderBy: { createdAt: "desc" }, }) return NextResponse.json({ media }) } catch (error) { console.error("Get media error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/media/upload/route.ts" import { type NextRequest, NextResponse } from "next/server" import { getCurrentUser } from "@/lib/auth" import { writeFile, mkdir } from "fs/promises" import path from "path" import crypto from "crypto" export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const formData = await request.formData() const file = formData.get("file") as File | null if (!file) { return NextResponse.json({ error: "No file provided" }, { status: 400 }) } // Use provided key or generate one from type + random id const { searchParams } = new URL(request.url) let key = searchParams.get("key") if (!key) { const mediaType = formData.get("type") as string || "general" const ext = file.name.split(".").pop() || "bin" const id = crypto.randomUUID().slice(0, 8) key = `${mediaType.toLowerCase()}/${user.id}/${id}.${ext}` } // Write to public/uploads directory const uploadDir = path.join(process.cwd(), "public", "uploads", path.dirname(key)) await mkdir(uploadDir, { recursive: true }) const filePath = path.join(process.cwd(), "public", "uploads", key) const bytes = await file.arrayBuffer() await writeFile(filePath, Buffer.from(bytes)) return NextResponse.json({ success: true, url: `/uploads/${key}`, }) } catch (error) { console.error("Upload error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/models/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — list all models (optionally filter unsigned only) export async function GET(request: NextRequest) { try { const currentUser = await getCurrentUser() const { searchParams } = new URL(request.url) const unsignedOnly = searchParams.get("unsigned") === "true" const query = searchParams.get("query") const limit = Math.min(Number(searchParams.get("limit")) || 50, 100) const where: Record = { role: "MODEL" } // Filter out blocked users if (currentUser) { const blocks = await prisma.block.findMany({ where: { OR: [{ blockerId: currentUser.id }, { blockedId: currentUser.id }] }, select: { blockerId: true, blockedId: true }, }) const blockedIds = blocks.map((b: { blockerId: string; blockedId: string }) => b.blockerId === currentUser.id ? b.blockedId : b.blockerId ) if (blockedIds.length > 0) { where.id = { notIn: blockedIds } } } // Filter out models already signed to an agency if (unsignedOnly) { where.modelProfile = { agencyId: null } } if (query) { where.OR = [ { username: { contains: query, mode: "insensitive" } }, { displayName: { contains: query, mode: "insensitive" } }, { profile: { location: { contains: query, mode: "insensitive" } } }, ] } const users = await prisma.user.findMany({ where: where as any, take: limit, include: { profile: true, modelProfile: true, }, orderBy: { createdAt: "desc" }, }) const models = users.map((u) => ({ id: u.id, username: u.username, displayName: u.displayName, role: u.role.toLowerCase(), avatarUrl: u.profile?.avatarUrl || null, bio: u.profile?.bio || null, location: u.profile?.location || null, verified: u.profile?.verificationStatus !== "UNVERIFIED", verificationStatus: u.profile?.verificationStatus || "UNVERIFIED", height: u.modelProfile?.height || null, bust: u.modelProfile?.bust || null, waist: u.modelProfile?.waist || null, hips: u.modelProfile?.hips || null, hairColor: u.modelProfile?.hairColor || null, eyeColor: u.modelProfile?.eyeColor || null, agencyId: u.modelProfile?.agencyId || null, createdAt: u.createdAt.toISOString(), })) return NextResponse.json({ models }) } catch (error) { console.error("List models error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/models/top/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const filter = searchParams.get("filter") const limit = Math.min(Number(searchParams.get("limit")) || 10, 50) const where: { role: "MODEL"; profile?: { experience?: { contains: string; mode: "insensitive" } } } = { role: "MODEL", } if (filter && filter.length > 0) { where.profile = { experience: { contains: filter, mode: "insensitive" } } } const models = await prisma.user.findMany({ where, include: { profile: true, modelProfile: true, }, take: limit * 2, }) const list = models .filter((u) => u.profile != null) .map((u) => ({ id: u.id, displayName: u.profile!.displayName, avatarUrl: u.profile!.avatarUrl, username: u.username, isVerified: u.profile!.verificationStatus !== "UNVERIFIED", score: u.profile!.score ?? u.modelProfile?.luxlaneScore ?? 0, heightCm: u.modelProfile?.heightCm, hair: u.profile!.hair ?? u.modelProfile?.hair, eyes: u.profile!.eyes ?? u.modelProfile?.eyes, experience: u.profile!.experience, location: u.profile!.location, })) .sort((a, b) => b.score - a.score) .slice(0, limit) return NextResponse.json({ models: list }) } catch (error) { console.error("Get top models error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/notifications/[id]/read/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } await prisma.notification.updateMany({ where: { id, userId: user.id }, data: { read: true }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Mark notification read error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/notifications/read-all/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } await prisma.notification.updateMany({ where: { userId: user.id, read: false }, data: { read: true }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Mark all notifications read error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/notifications/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { searchParams } = new URL(request.url) const unreadOnly = searchParams.get("unread") === "true" const limit = Number(searchParams.get("limit")) || 50 const notifications = await prisma.notification.findMany({ where: { userId: user.id, ...(unreadOnly ? { read: false } : {}), }, orderBy: { createdAt: "desc" }, take: limit, }) const unreadCount = await prisma.notification.count({ where: { userId: user.id, read: false }, }) return NextResponse.json({ notifications, unreadCount }) } catch (error) { console.error("Get notifications error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/onboarding/complete/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() // Update or create base profile if (body.displayName || body.bio || body.location) { await prisma.profile.upsert({ where: { userId: user.id }, create: { userId: user.id, displayName: body.displayName || user.username, bio: body.bio || null, location: body.location || null, }, update: { ...(body.displayName !== undefined && { displayName: body.displayName }), ...(body.bio !== undefined && { bio: body.bio }), ...(body.location !== undefined && { location: body.location }), }, }) } // Update role-specific profile if (user.role === "model" && body.modelProfile) { const mp = body.modelProfile await prisma.modelProfile.upsert({ where: { userId: user.id }, create: { userId: user.id, heightCm: mp.heightCm || null, bustCm: mp.bustCm || null, waistCm: mp.waistCm || null, hipsCm: mp.hipsCm || null, shoeSize: mp.shoeSize || null, eyes: mp.eyeColor || null, hair: mp.hairColor || null, languages: mp.languages || [], }, update: { ...(mp.heightCm !== undefined && { heightCm: mp.heightCm }), ...(mp.bustCm !== undefined && { bustCm: mp.bustCm }), ...(mp.waistCm !== undefined && { waistCm: mp.waistCm }), ...(mp.hipsCm !== undefined && { hipsCm: mp.hipsCm }), ...(mp.shoeSize !== undefined && { shoeSize: mp.shoeSize }), ...(mp.eyeColor !== undefined && { eyes: mp.eyeColor }), ...(mp.hairColor !== undefined && { hair: mp.hairColor }), ...(mp.languages !== undefined && { languages: mp.languages }), }, }) // Store experience tags and social links in the details JSON field if (mp.experienceTags || mp.socialLinks) { await prisma.modelProfile.update({ where: { userId: user.id }, data: { details: { experienceTags: mp.experienceTags || [], socialLinks: mp.socialLinks || {}, }, }, }) } } else if (user.role === "agency" && body.agencyProfile) { const ap = body.agencyProfile await prisma.agencyProfile.upsert({ where: { userId: user.id }, create: { userId: user.id, agencyName: ap.agencyName || user.username, website: ap.website || null, }, update: { ...(ap.agencyName !== undefined && { agencyName: ap.agencyName }), ...(ap.website !== undefined && { website: ap.website }), }, }) } else if (user.role === "brand" && body.brandProfile) { const bp = body.brandProfile await prisma.brandProfile.upsert({ where: { userId: user.id }, create: { userId: user.id, brandName: bp.brandName || user.username, website: bp.website || null, }, update: { ...(bp.brandName !== undefined && { brandName: bp.brandName }), ...(bp.website !== undefined && { website: bp.website }), }, }) } else if (user.role === "client" && body.clientProfile) { const cp = body.clientProfile await prisma.clientProfile.upsert({ where: { userId: user.id }, create: { userId: user.id, clientName: cp.clientName || user.username, website: cp.website || null, industry: cp.industry || null, }, update: { ...(cp.clientName !== undefined && { clientName: cp.clientName }), ...(cp.website !== undefined && { website: cp.website }), ...(cp.industry !== undefined && { industry: cp.industry }), }, }) } return NextResponse.json({ success: true }) } catch (error) { console.error("Complete onboarding error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/posts/[id]/comments/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: postId } = await params const { searchParams } = new URL(request.url) const limit = Math.min(Number(searchParams.get("limit")) || 50, 100) const comments = await prisma.comment.findMany({ where: { postId }, orderBy: { createdAt: "asc" }, take: limit, include: { user: { include: { profile: true } } }, }) const formatted = comments.map((c) => ({ id: c.id, postId: c.postId, userId: c.userId, user: { id: c.user.id, name: c.user.profile?.displayName ?? c.user.username, username: c.user.username, avatar: c.user.profile?.avatarUrl ?? "/placeholder.svg", }, body: c.body, createdAt: c.createdAt.toISOString(), })) return NextResponse.json({ comments: formatted }) } catch (error) { console.error("Get comments error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: postId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const post = await prisma.post.findUnique({ where: { id: postId } }) if (!post) { return NextResponse.json({ error: "Post not found" }, { status: 404 }) } const body = await request.json().catch(() => ({})) const commentBody = (body.body ?? body.content) as string | undefined if (!commentBody?.trim()) { return NextResponse.json({ error: "Comment body is required" }, { status: 400 }) } const comment = await prisma.comment.create({ data: { postId, userId: user.id, body: commentBody.trim(), }, include: { user: { include: { profile: true } } }, }) // Notify post owner (skip if commenting on own post) if (post.userId !== user.id) { await prisma.notification.create({ data: { userId: post.userId, type: "SYSTEM", payload: { title: "New comment", message: `${user.displayName || user.username} commented on your post`, postId, }, }, }).catch(() => {}) } return NextResponse.json({ comment: { id: comment.id, postId: comment.postId, userId: comment.userId, user: { id: comment.user.id, name: comment.user.profile?.displayName ?? comment.user.username, username: comment.user.username, avatar: comment.user.profile?.avatarUrl ?? "/placeholder.svg", }, body: comment.body, createdAt: comment.createdAt.toISOString(), }, }) } catch (error) { console.error("Create comment error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/posts/[id]/like/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: postId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const post = await prisma.post.findUnique({ where: { id: postId } }) if (!post) { return NextResponse.json({ error: "Post not found" }, { status: 404 }) } await prisma.postLike.upsert({ where: { userId_postId: { userId: user.id, postId } }, create: { userId: user.id, postId }, update: {}, }) // Send notification to post owner (skip if liking own post) if (post.userId !== user.id) { await prisma.notification.create({ data: { userId: post.userId, type: "SYSTEM", payload: { title: "New like", message: `${user.displayName || user.username} liked your post`, postId, }, }, }).catch(() => {}) // Don't fail the like if notification fails } const count = await prisma.postLike.count({ where: { postId } }) return NextResponse.json({ liked: true, likes: count }) } catch (error) { console.error("Like post error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: postId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } await prisma.postLike.deleteMany({ where: { userId: user.id, postId }, }) const count = await prisma.postLike.count({ where: { postId } }) return NextResponse.json({ liked: false, likes: count }) } catch (error) { console.error("Unlike post error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/posts/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // PATCH — edit post caption export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: postId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const post = await prisma.post.findUnique({ where: { id: postId } }) if (!post) { return NextResponse.json({ error: "Post not found" }, { status: 404 }) } if (post.userId !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } const body = await request.json().catch(() => ({})) const caption = (body.caption as string | undefined)?.trim() ?? null const updated = await prisma.post.update({ where: { id: postId }, data: { caption }, }) return NextResponse.json({ success: true, post: { id: updated.id, caption: updated.caption } }) } catch (error) { console.error("Edit post error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE — delete own post export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: postId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const post = await prisma.post.findUnique({ where: { id: postId } }) if (!post) { return NextResponse.json({ error: "Post not found" }, { status: 404 }) } if (post.userId !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } // Delete related data first await prisma.postLike.deleteMany({ where: { postId } }) await prisma.postSave.deleteMany({ where: { postId } }) await prisma.comment.deleteMany({ where: { postId } }) await prisma.post.delete({ where: { id: postId } }) return NextResponse.json({ success: true }) } catch (error) { console.error("Delete post error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/posts/[id]/save/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: postId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const post = await prisma.post.findUnique({ where: { id: postId } }) if (!post) { return NextResponse.json({ error: "Post not found" }, { status: 404 }) } await prisma.postSave.upsert({ where: { userId_postId: { userId: user.id, postId } }, create: { userId: user.id, postId }, update: {}, }) return NextResponse.json({ saved: true }) } catch (error) { console.error("Save post error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: postId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } await prisma.postSave.deleteMany({ where: { userId: user.id, postId }, }) return NextResponse.json({ saved: false }) } catch (error) { console.error("Unsave post error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/posts/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const currentUser = await getCurrentUser() const { searchParams } = new URL(request.url) const limit = Math.min(Number(searchParams.get("limit")) || 20, 50) const cursor = searchParams.get("cursor") const feed = searchParams.get("feed") // "following" or null (all) // Build where clause — filter by followed users if feed=following let where: Record = {} // Get blocked user IDs to exclude from feed let blockedIds: string[] = [] if (currentUser) { const blocks = await prisma.block.findMany({ where: { OR: [{ blockerId: currentUser.id }, { blockedId: currentUser.id }] }, select: { blockerId: true, blockedId: true }, }) blockedIds = blocks.map((b: { blockerId: string; blockedId: string }) => b.blockerId === currentUser.id ? b.blockedId : b.blockerId ) } if (feed === "following" && currentUser) { const follows = await prisma.follow.findMany({ where: { followerId: currentUser.id }, select: { followingId: true }, }) const followedIds = follows.map((f: { followingId: string }) => f.followingId) const allowedIds = [currentUser.id, ...followedIds].filter((id) => !blockedIds.includes(id)) where = { userId: { in: allowedIds } } } else if (blockedIds.length > 0) { where = { userId: { notIn: blockedIds } } } const posts = await prisma.post.findMany({ where, take: limit + 1, ...(cursor && { cursor: { id: cursor }, skip: 1 }), orderBy: { createdAt: "desc" }, include: { user: { include: { profile: true } }, _count: { select: { likes: true, comments: true } }, }, }) const hasMore = posts.length > limit const list = hasMore ? posts.slice(0, limit) : posts const nextCursor = hasMore ? list[list.length - 1].id : null const currentUserId = currentUser?.id const postIds = list.map((p) => p.id) const [likedSet, savedSet] = currentUserId && postIds.length > 0 ? await Promise.all([ prisma.postLike.findMany({ where: { postId: { in: postIds }, userId: currentUserId }, select: { postId: true }, }), prisma.postSave.findMany({ where: { postId: { in: postIds }, userId: currentUserId }, select: { postId: true }, }), ]) : [[], []] const likedIds = new Set(likedSet.map((l) => l.postId)) const savedIds = new Set(savedSet.map((s) => s.postId)) const withMeta = list.map((post) => ({ id: post.id, userId: post.userId, user: { id: post.user.id, name: post.user.profile?.displayName ?? post.user.username, username: post.user.username, avatar: post.user.profile?.avatarUrl ?? "/placeholder.svg", verified: post.user.profile?.verificationStatus !== "UNVERIFIED", }, imageUrl: post.imageUrl, caption: post.caption, likes: post._count.likes, comments: post._count.comments, likedByMe: likedIds.has(post.id), savedByMe: savedIds.has(post.id), createdAt: post.createdAt.toISOString(), })) return NextResponse.json({ posts: withMeta, nextCursor }) } catch (error) { console.error("Get posts error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json().catch(() => ({})) const imageUrl = body.imageUrl as string | undefined const caption = (body.caption as string | undefined)?.trim() ?? null if (!imageUrl?.trim()) { return NextResponse.json({ error: "imageUrl is required" }, { status: 400 }) } const post = await prisma.post.create({ data: { userId: user.id, imageUrl: imageUrl.trim(), caption, }, include: { user: { include: { profile: true } }, _count: { select: { likes: true, comments: true } }, }, }) // Extract @mentions from caption and send notifications if (caption) { const mentions = caption.match(/@([\w]+)/g)?.map((m: string) => m.slice(1)) || [] if (mentions.length > 0) { const mentionedUsers = await prisma.user.findMany({ where: { username: { in: mentions } }, select: { id: true, username: true }, }) for (const mu of mentionedUsers) { if (mu.id !== user.id) { await prisma.notification.create({ data: { userId: mu.id, type: "SYSTEM", payload: { title: "You were mentioned", message: `${user.displayName || user.username} mentioned you in a post`, postId: post.id, }, }, }).catch(() => {}) } } } } return NextResponse.json({ post: { id: post.id, userId: post.userId, user: { id: post.user.id, name: post.user.profile?.displayName ?? post.user.username, username: post.user.username, avatar: post.user.profile?.avatarUrl ?? "/placeholder.svg", verified: post.user.profile?.verificationStatus !== "UNVERIFIED", }, imageUrl: post.imageUrl, caption: post.caption, likes: post._count.likes, comments: post._count.comments, likedByMe: false, savedByMe: false, createdAt: post.createdAt.toISOString(), }, }) } catch (error) { console.error("Create post error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/posts/saved/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET() { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const saves = await prisma.postSave.findMany({ where: { userId: user.id }, orderBy: { createdAt: "desc" }, include: { post: { include: { user: { include: { profile: true } }, _count: { select: { likes: true, comments: true } }, }, }, }, }) const posts = saves.map((s) => ({ id: s.post.id, userId: s.post.userId, user: { id: s.post.user.id, name: s.post.user.profile?.displayName ?? s.post.user.username, username: s.post.user.username, avatar: s.post.user.profile?.avatarUrl ?? "/placeholder.svg", verified: s.post.user.profile?.verificationStatus !== "UNVERIFIED", }, imageUrl: s.post.imageUrl, caption: s.post.caption, likes: s.post._count.likes, comments: s.post._count.comments, likedByMe: false, savedByMe: true, createdAt: s.post.createdAt.toISOString(), })) return NextResponse.json({ posts }) } catch (error) { console.error("Get saved posts error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/profiles/[username]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest, { params }: { params: Promise<{ username: string }> }) { try { const { username } = await params const currentUser = await getCurrentUser() const user = await prisma.user.findUnique({ where: { username }, include: { profile: true, modelProfile: true, agencyProfile: true, brandProfile: true, }, }) if (!user) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } const profile = user.profile const roleProfile = user.modelProfile ?? user.agencyProfile ?? user.brandProfile ?? null let digitalTwin = null if (user.role === "MODEL" && user.modelProfile) { const twin = await prisma.digitalTwin.findUnique({ where: { userId: user.id }, }) if (twin) digitalTwin = { id: twin.userId, status: twin.status, previewUrl: twin.previewUrl, summary: twin.summary, } } const [followersCount, followingCount, isFollowingRecord] = await Promise.all([ prisma.follow.count({ where: { followingId: user.id } }), prisma.follow.count({ where: { followerId: user.id } }), currentUser && currentUser.id !== user.id ? prisma.follow.findUnique({ where: { followerId_followingId: { followerId: currentUser.id, followingId: user.id }, }, }) : Promise.resolve(null), ]) const [portfolio, posts] = await Promise.all([ prisma.mediaAsset.findMany({ where: { ownerId: user.id, type: { in: ["PORTFOLIO", "POLAROID"] } }, orderBy: { createdAt: "desc" }, take: 20, }), prisma.post.findMany({ where: { userId: user.id }, orderBy: { createdAt: "desc" }, take: 30, include: { _count: { select: { likes: true, comments: true } }, }, }), ]) const displayName = profile?.displayName ?? user.username const avatarUrl = profile?.avatarUrl ?? null const bio = profile?.bio ?? null const location = profile?.location ?? null const score = profile?.score ?? 0 const verificationStatus = profile?.verificationStatus ?? "UNVERIFIED" const mp = user.modelProfile const details = (mp?.details as Record | null) ?? {} const measurements = mp && (mp.heightCm != null || mp.bustCm != null || mp.waistCm != null || mp.hipsCm != null || mp.shoeSize || mp.hair || mp.eyes) ? { height: mp.heightCm != null ? `${mp.heightCm} cm` : "", bust: mp.bustCm != null ? `${mp.bustCm} cm` : "", waist: mp.waistCm != null ? `${mp.waistCm} cm` : "", hips: mp.hipsCm != null ? `${mp.hipsCm} cm` : "", shoeSize: mp.shoeSize ?? "", dressSize: (details.dressSize as string) ?? undefined, hairColor: mp.hair ?? "", eyeColor: mp.eyes ?? "", heightCm: mp.heightCm ?? undefined, } : undefined const experience = (details.experience as string[] | undefined) ?? ([] as string[]) const skinTone = (details.skinTone as string | undefined) ?? undefined const availabilityStatus = mp?.availability != null ? (mp.availability.toLowerCase() as "available" | "hold" | "booked") : undefined return NextResponse.json({ profile: { id: user.id, email: user.role === "MODEL" ? undefined : user.email, username: user.username, displayName, name: displayName, role: user.role.toLowerCase(), avatarUrl, avatar: avatarUrl ?? "/placeholder.svg?height=400&width=400", bio, location, score, verificationStatus, isVerified: verificationStatus !== "UNVERIFIED", roleProfile, digitalTwin, followersCount, followingCount, followers: followersCount, following: followingCount, isFollowing: !!isFollowingRecord, portfolio: portfolio.map((p) => ({ id: p.id, url: p.url, type: p.type })), posts: posts.map((p) => ({ id: p.id, imageUrl: p.imageUrl, caption: p.caption, createdAt: p.createdAt.toISOString(), likesCount: p._count.likes, commentsCount: p._count.comments, })), measurements, languages: mp?.languages ?? [], experience, skinTone, availabilityStatus, createdAt: user.createdAt.toISOString(), }, }) } catch (error) { console.error("Get profile by username error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/profiles/me/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const dbUser = await prisma.user.findUnique({ where: { id: user.id }, include: { profile: true, modelProfile: true, agencyProfile: true, brandProfile: true, }, }) if (!dbUser) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } const profile = dbUser.profile const roleProfile = dbUser.modelProfile ?? dbUser.agencyProfile ?? dbUser.brandProfile ?? null let digitalTwin = null if (dbUser.modelProfile) { const twin = await prisma.digitalTwin.findUnique({ where: { userId: dbUser.id }, }) if (twin) digitalTwin = { id: twin.userId, status: twin.status, previewUrl: twin.previewUrl, summary: twin.summary } } const [followersCount, followingCount, portfolio] = await Promise.all([ prisma.follow.count({ where: { followingId: dbUser.id } }), prisma.follow.count({ where: { followerId: dbUser.id } }), prisma.mediaAsset.findMany({ where: { ownerId: dbUser.id, type: { in: ["PORTFOLIO", "POLAROID"] } }, orderBy: { createdAt: "desc" }, take: 20, }), ]) const mp = dbUser.modelProfile const details = (mp?.details as Record | null) ?? {} const measurements = mp && (mp.heightCm != null || mp.bustCm != null || mp.waistCm != null || mp.hipsCm != null || mp.shoeSize || mp.hair || mp.eyes) ? { height: mp.heightCm != null ? `${mp.heightCm} cm` : "", bust: mp.bustCm != null ? `${mp.bustCm} cm` : "", waist: mp.waistCm != null ? `${mp.waistCm} cm` : "", hips: mp.hipsCm != null ? `${mp.hipsCm} cm` : "", shoeSize: mp.shoeSize ?? "", dressSize: (details.dressSize as string) ?? undefined, hairColor: mp.hair ?? "", eyeColor: mp.eyes ?? "", heightCm: mp.heightCm ?? undefined, } : undefined const experience = (details.experience as string[] | undefined) ?? [] const skinTone = (details.skinTone as string | undefined) ?? undefined const availabilityStatus = mp?.availability != null ? (mp.availability.toLowerCase() as "available" | "hold" | "booked") : undefined return NextResponse.json({ profile: { id: dbUser.id, email: dbUser.email, username: dbUser.username, displayName: profile?.displayName ?? dbUser.username, name: profile?.displayName ?? dbUser.username, avatarUrl: profile?.avatarUrl, avatar: profile?.avatarUrl ?? "/placeholder.svg?height=400&width=400", bio: profile?.bio, location: profile?.location, role: dbUser.role.toLowerCase(), roleProfile, digitalTwin, followersCount, followingCount, verificationStatus: profile?.verificationStatus ?? "UNVERIFIED", isVerified: profile ? profile.verificationStatus !== "UNVERIFIED" : false, score: profile?.score ?? 0, portfolio: portfolio.map((p) => ({ id: p.id, url: p.url, type: p.type })), measurements, languages: mp?.languages ?? [], experience, skinTone, availabilityStatus, createdAt: dbUser.createdAt.toISOString(), }, }) } catch (error) { console.error("Get profile error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } export async function PATCH(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { displayName, bio, location, avatarUrl } = body if (displayName != null && displayName.length > 40) { return NextResponse.json({ error: "Display name must be 40 characters or less" }, { status: 400 }) } if (bio != null && bio.length > 160) { return NextResponse.json({ error: "Bio must be 160 characters or less" }, { status: 400 }) } await prisma.profile.upsert({ where: { userId: user.id }, create: { userId: user.id, displayName: displayName ?? user.username, ...(bio != null && { bio }), ...(location != null && { location }), ...(avatarUrl != null && { avatarUrl }), }, update: { ...(displayName != null && { displayName }), ...(bio != null && { bio }), ...(location != null && { location }), ...(avatarUrl != null && { avatarUrl }), }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Update profile error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/profiles/model/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" import { validateBody, updateModelProfileSchema } from "@/lib/validations" export async function PATCH(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const dbUser = await prisma.user.findUnique({ where: { id: user.id }, select: { role: true }, }) if (!dbUser) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } if (dbUser.role !== "MODEL") { return NextResponse.json({ error: "Only models can update model profile" }, { status: 403 }) } const validation = await validateBody(request, updateModelProfileSchema) if (!validation.success) { return NextResponse.json({ error: validation.error }, { status: 400 }) } const { heightCm, bustCm, waistCm, hipsCm, shoeSize, hair, eyes, languages, availability, details, } = validation.data const existing = await prisma.modelProfile.findUnique({ where: { userId: user.id }, select: { details: true }, }) const currentDetails = (existing?.details as Record | null) ?? {} const mergedDetails = details != null ? { ...currentDetails, ...(details.dressSize !== undefined && { dressSize: details.dressSize }), ...(details.skinTone !== undefined && { skinTone: details.skinTone }), ...(details.experience !== undefined && { experience: details.experience }), } : undefined await prisma.modelProfile.upsert({ where: { userId: user.id }, create: { userId: user.id, ...(heightCm != null && { heightCm }), ...(bustCm != null && { bustCm }), ...(waistCm != null && { waistCm }), ...(hipsCm != null && { hipsCm }), ...(shoeSize != null && { shoeSize }), ...(hair != null && { hair }), ...(eyes != null && { eyes }), ...(languages != null && { languages }), ...(availability != null && { availability }), ...(mergedDetails != null && { details: mergedDetails }), }, update: { ...(heightCm != null && { heightCm }), ...(bustCm != null && { bustCm }), ...(waistCm != null && { waistCm }), ...(hipsCm != null && { hipsCm }), ...(shoeSize != null && { shoeSize }), ...(hair != null && { hair }), ...(eyes != null && { eyes }), ...(languages != null && { languages }), ...(availability != null && { availability }), ...(mergedDetails != null && { details: mergedDetails }), }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Update model profile error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/reports/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function PATCH( request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } if (!["brand", "agency"].includes(user.role)) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } const { id } = await params const body = await request.json() const { status } = body if (!status || !["REVIEWED", "RESOLVED", "DISMISSED"].includes(status)) { return NextResponse.json({ error: "Invalid status" }, { status: 400 }) } const report = await prisma.report.update({ where: { id }, data: { status }, }) return NextResponse.json({ report }) } catch (error) { console.error("PATCH /api/reports/[id] error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/reports/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } // Allow brand, agency roles (and admin if added later) if (!["brand", "agency"].includes(user.role)) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }) } const status = request.nextUrl.searchParams.get("status") || "PENDING" const reports = await prisma.report.findMany({ where: { status }, include: { reporter: { select: { username: true } }, target: { select: { username: true } }, }, orderBy: { createdAt: "desc" }, }) const mapped = reports.map((r: any) => ({ id: r.id, reason: r.reason, details: r.details, status: r.status, createdAt: r.createdAt, reporterUsername: r.reporter.username, targetUsername: r.target.username, })) return NextResponse.json({ reports: mapped }) } catch (error) { console.error("GET /api/reports error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/saved-models/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — list saved models (talent pool) export async function GET() { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const saved = await prisma.savedModel.findMany({ where: { userId: user.id }, include: { model: { include: { profile: true, modelProfile: true, }, }, }, orderBy: { createdAt: "desc" }, }) return NextResponse.json({ models: saved.map((s: typeof saved[number]) => ({ id: s.model.id, username: s.model.username, name: s.model.profile?.displayName || s.model.username, avatar: s.model.profile?.avatarUrl, location: s.model.profile?.location, role: s.model.role.toLowerCase(), luxlaneScore: s.model.modelProfile?.luxlaneScore || 0, availability: s.model.modelProfile?.availability || "AVAILABLE", note: s.note, savedAt: s.createdAt, })), }) } catch (error) { console.error("Get saved models error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — save a model export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { modelId, note } = body as { modelId: string; note?: string } if (!modelId) { return NextResponse.json({ error: "modelId is required" }, { status: 400 }) } // Verify target is a model const target = await prisma.user.findUnique({ where: { id: modelId } }) if (!target || target.role !== "MODEL") { return NextResponse.json({ error: "Model not found" }, { status: 404 }) } await prisma.savedModel.upsert({ where: { userId_modelId: { userId: user.id, modelId } }, create: { userId: user.id, modelId, note }, update: { note }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Save model error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE — unsave a model export async function DELETE(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { modelId } = body as { modelId: string } if (!modelId) { return NextResponse.json({ error: "modelId is required" }, { status: 400 }) } await prisma.savedModel.deleteMany({ where: { userId: user.id, modelId }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Unsave model error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/scoreboard/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const filter = searchParams.get("filter") || "top" const limit = Math.min(Number(searchParams.get("limit")) || 20, 50) const models = await prisma.user.findMany({ where: { role: "MODEL" }, include: { profile: true, modelProfile: true, }, take: limit * 2, }) const list = models .filter((u) => u.profile != null) .map((u) => ({ id: u.id, displayName: u.profile!.displayName, avatarUrl: u.profile!.avatarUrl, username: u.username, isVerified: u.profile!.verificationStatus !== "UNVERIFIED", score: u.profile!.score ?? u.modelProfile?.luxlaneScore ?? 0, heightCm: u.modelProfile?.heightCm, hair: u.profile!.hair ?? u.modelProfile?.hair, eyes: u.profile!.eyes ?? u.modelProfile?.eyes, experience: u.profile!.experience, })) .sort((a, b) => b.score - a.score) .slice(0, limit) return NextResponse.json({ models: list }) } catch (error) { console.error("Get scoreboard error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/search/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET /api/search?q=sofia&type=users|castings|posts export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const q = searchParams.get("q")?.trim() const type = searchParams.get("type") || "all" const limit = Math.min(Number(searchParams.get("limit")) || 20, 50) if (!q || q.length < 2) { return NextResponse.json({ error: "Query must be at least 2 characters" }, { status: 400 }) } const currentUser = await getCurrentUser() const results: Record = {} // Search users if (type === "all" || type === "users") { const users = await prisma.user.findMany({ where: { OR: [ { username: { contains: q, mode: "insensitive" } }, { displayName: { contains: q, mode: "insensitive" } }, ], }, include: { profile: true }, take: limit, }) results.users = users.map((u) => ({ id: u.id, username: u.username, name: u.profile?.displayName ?? u.displayName, avatar: u.profile?.avatarUrl ?? u.avatarUrl ?? "/placeholder.svg", role: u.role.toLowerCase(), verified: u.profile?.verificationStatus !== "UNVERIFIED", bio: u.profile?.bio ?? "", location: u.profile?.location ?? "", })) } // Search castings if (type === "all" || type === "castings") { const castings = await prisma.casting.findMany({ where: { status: "ACTIVE", OR: [ { title: { contains: q, mode: "insensitive" } }, { description: { contains: q, mode: "insensitive" } }, { location: { contains: q, mode: "insensitive" } }, ], }, include: { creator: { include: { profile: true } }, _count: { select: { submissions: true } }, }, take: limit, orderBy: { createdAt: "desc" }, }) results.castings = castings.map((c) => ({ id: c.id, title: c.title, type: c.type.toLowerCase(), location: c.location, payMin: c.payMin, payMax: c.payMax, deadline: c.deadline?.toISOString(), status: c.status.toLowerCase(), applicationsCount: c._count.submissions, creator: { id: c.creator.id, name: c.creator.profile?.displayName ?? c.creator.displayName, username: c.creator.username, avatar: c.creator.profile?.avatarUrl ?? "/placeholder.svg", }, createdAt: c.createdAt.toISOString(), })) } // Search posts if (type === "all" || type === "posts") { const posts = await prisma.post.findMany({ where: { caption: { contains: q, mode: "insensitive" }, }, include: { user: { include: { profile: true } }, _count: { select: { likes: true, comments: true } }, }, take: limit, orderBy: { createdAt: "desc" }, }) results.posts = posts.map((p) => ({ id: p.id, imageUrl: p.imageUrl, caption: p.caption, likes: p._count.likes, comments: p._count.comments, user: { id: p.user.id, name: p.user.profile?.displayName ?? p.user.displayName, username: p.user.username, avatar: p.user.profile?.avatarUrl ?? "/placeholder.svg", }, createdAt: p.createdAt.toISOString(), })) } return NextResponse.json(results) } catch (error) { console.error("Search error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/settings/route.ts" import { NextResponse } from "next/server" import { cookies } from "next/headers" import { prisma } from "@/lib/prisma" import { verifyAccessToken } from "@/lib/auth" import { validateBody, updateSettingsSchema } from "@/lib/validations" async function getUserId(): Promise { const cookieStore = await cookies() const accessToken = cookieStore.get("access_token")?.value if (!accessToken) return null const payload = await verifyAccessToken(accessToken) return payload?.userId ?? null } export async function GET() { const userId = await getUserId() if (!userId) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } try { let settings = await prisma.userSettings.findUnique({ where: { userId }, }) if (!settings) { settings = await prisma.userSettings.create({ data: { userId }, }) } const notifs = (settings.notifications as Record) ?? { push: true, email: true } const priv = (settings.privacy as Record) ?? { mode: "public" } return NextResponse.json({ userId: settings.userId, darkMode: settings.darkMode, pushNotifs: notifs.push ?? true, emailNotifs: notifs.email ?? true, privacyMode: priv.mode ?? priv.profileVisibility ?? "public", notifications: notifs, privacy: priv, createdAt: settings.createdAt.toISOString(), updatedAt: settings.updatedAt.toISOString(), }) } catch (error) { console.error("Failed to get settings:", error) return NextResponse.json({ error: "Failed to get settings" }, { status: 500 }) } } export async function PATCH(request: Request) { const userId = await getUserId() if (!userId) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const validation = await validateBody(request, updateSettingsSchema) if (!validation.success) { return NextResponse.json({ error: validation.error }, { status: 400 }) } const { darkMode, pushNotifs, emailNotifs, privacyMode, notifications, privacy } = validation.data // Build notification and privacy JSON objects const notifsUpdate: Record = {} if (pushNotifs !== undefined || notifications?.push !== undefined) notifsUpdate.push = pushNotifs ?? notifications?.push if (emailNotifs !== undefined || notifications?.email !== undefined) notifsUpdate.email = emailNotifs ?? notifications?.email if (notifications?.castingInvites !== undefined) notifsUpdate.castingInvites = notifications.castingInvites if (notifications?.messages !== undefined) notifsUpdate.messages = notifications.messages if (notifications?.offers !== undefined) notifsUpdate.offers = notifications.offers const privacyUpdate: Record = {} if (privacyMode !== undefined || privacy?.profileVisibility !== undefined) privacyUpdate.mode = privacyMode ?? privacy?.profileVisibility if (privacy?.showMeasurements !== undefined) privacyUpdate.showMeasurements = privacy.showMeasurements if (privacy?.showLocation !== undefined) privacyUpdate.showLocation = privacy.showLocation try { // Get existing settings to merge JSON fields const existing = await prisma.userSettings.findUnique({ where: { userId } }) const existingNotifs = (existing?.notifications as Record) ?? { push: true, email: true } const existingPrivacy = (existing?.privacy as Record) ?? { mode: "public" } const mergedNotifs = { ...existingNotifs, ...notifsUpdate } const mergedPrivacy = { ...existingPrivacy, ...privacyUpdate } const settings = await prisma.userSettings.upsert({ where: { userId }, create: { userId, darkMode: darkMode ?? true, notifications: Object.keys(notifsUpdate).length > 0 ? mergedNotifs : { push: true, email: true }, privacy: Object.keys(privacyUpdate).length > 0 ? mergedPrivacy : { mode: "public" }, }, update: { ...(darkMode !== undefined && { darkMode }), ...(Object.keys(notifsUpdate).length > 0 && { notifications: mergedNotifs }), ...(Object.keys(privacyUpdate).length > 0 && { privacy: mergedPrivacy }), }, }) const notifs = (settings.notifications as Record) ?? { push: true, email: true } const priv = (settings.privacy as Record) ?? { mode: "public" } return NextResponse.json({ userId: settings.userId, darkMode: settings.darkMode, pushNotifs: notifs.push ?? true, emailNotifs: notifs.email ?? true, privacyMode: priv.mode ?? "public", notifications: notifs, privacy: priv, createdAt: settings.createdAt.toISOString(), updatedAt: settings.updatedAt.toISOString(), }) } catch (error) { console.error("Failed to update settings:", error) return NextResponse.json({ error: "Failed to update settings" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/stories/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // DELETE — delete a story export async function DELETE( _request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { id } = await params const story = await prisma.story.findUnique({ where: { id } }) if (!story) { return NextResponse.json({ error: "Story not found" }, { status: 404 }) } if (story.userId !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } await prisma.story.delete({ where: { id } }) return NextResponse.json({ success: true }) } catch (error) { console.error("Delete story error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/stories/[id]/view/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // POST — mark a story as viewed export async function POST( _request: NextRequest, { params }: { params: Promise<{ id: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { id } = await params const story = await prisma.story.findUnique({ where: { id } }) if (!story) { return NextResponse.json({ error: "Story not found" }, { status: 404 }) } // Don't track self-views if (story.userId === user.id) { return NextResponse.json({ viewed: false }) } // Upsert view (idempotent) await prisma.storyView.upsert({ where: { storyId_viewerId: { storyId: id, viewerId: user.id }, }, create: { storyId: id, viewerId: user.id }, update: {}, }) // Increment view count await prisma.story.update({ where: { id }, data: { viewCount: { increment: 1 } }, }) return NextResponse.json({ viewed: true }) } catch (error) { console.error("View story error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/stories/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — get stories feed (active stories from followed users) or a specific user's stories export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { searchParams } = new URL(request.url) const userId = searchParams.get("userId") const now = new Date() if (userId) { // Get stories for a specific user const stories = await prisma.story.findMany({ where: { userId, expiresAt: { gt: now }, }, include: { views: { where: { viewerId: user.id }, select: { viewedAt: true } }, }, orderBy: { createdAt: "asc" }, }) return NextResponse.json({ stories: stories.map((s: typeof stories[number]) => ({ id: s.id, mediaUrl: s.mediaUrl, mediaType: s.mediaType, caption: s.caption, viewCount: s.viewCount, viewed: s.views.length > 0, createdAt: s.createdAt, expiresAt: s.expiresAt, })), }) } // Get story feed — users who have active stories const followedIds = await prisma.follow.findMany({ where: { followerId: user.id }, select: { followingId: true }, }) const followingIds = followedIds.map((f: typeof followedIds[number]) => f.followingId) // Include own stories const userIds = [user.id, ...followingIds] const usersWithStories = await prisma.user.findMany({ where: { id: { in: userIds }, stories: { some: { expiresAt: { gt: now } } }, }, select: { id: true, username: true, profile: { select: { displayName: true, avatarUrl: true } }, stories: { where: { expiresAt: { gt: now } }, select: { id: true, mediaUrl: true, mediaType: true, caption: true, viewCount: true, createdAt: true, expiresAt: true, views: { where: { viewerId: user.id }, select: { viewedAt: true } }, }, orderBy: { createdAt: "asc" }, }, }, }) // Sort: own stories first, then unviewed, then viewed const storyFeed = usersWithStories .map((u: typeof usersWithStories[number]) => ({ userId: u.id, username: u.username, name: u.profile?.displayName || u.username, avatar: u.profile?.avatarUrl || null, isOwn: u.id === user.id, hasUnviewed: u.stories.some((s) => s.views.length === 0), stories: u.stories.map((s) => ({ id: s.id, mediaUrl: s.mediaUrl, mediaType: s.mediaType, caption: s.caption, viewCount: s.viewCount, viewed: s.views.length > 0, createdAt: s.createdAt, expiresAt: s.expiresAt, })), })) .sort((a, b) => { if (a.isOwn) return -1 if (b.isOwn) return 1 if (a.hasUnviewed && !b.hasUnviewed) return -1 if (!a.hasUnviewed && b.hasUnviewed) return 1 return 0 }) return NextResponse.json({ feed: storyFeed }) } catch (error) { console.error("Stories feed error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST — create a new story export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { mediaUrl, mediaType, caption } = body as { mediaUrl: string mediaType?: string caption?: string } if (!mediaUrl) { return NextResponse.json({ error: "mediaUrl required" }, { status: 400 }) } // Stories expire after 24 hours const expiresAt = new Date() expiresAt.setHours(expiresAt.getHours() + 24) const story = await prisma.story.create({ data: { userId: user.id, mediaUrl, mediaType: mediaType || "image", caption: caption || null, expiresAt, }, }) return NextResponse.json(story, { status: 201 }) } catch (error) { console.error("Create story error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/submissions/[id]/accept/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: submissionId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const submission = await prisma.submission.findUnique({ where: { id: submissionId }, include: { casting: { select: { createdBy: true, title: true } }, }, }) if (!submission) { return NextResponse.json({ error: "Submission not found" }, { status: 404 }) } if (submission.modelId !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } if (submission.status !== "OFFERED") { return NextResponse.json({ error: "Can only accept offers" }, { status: 400 }) } await prisma.submission.update({ where: { id: submissionId }, data: { status: "ACCEPTED" }, }) await prisma.notification.create({ data: { userId: submission.casting.createdBy, type: "CONFIRMED", payload: { title: "Offer Accepted", body: `${user.displayName} accepted your offer for "${submission.casting.title}"`, relatedId: submissionId, relatedType: "submission", }, }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Accept offer error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/submissions/[id]/decline/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: submissionId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const submission = await prisma.submission.findUnique({ where: { id: submissionId }, include: { casting: { select: { createdBy: true, title: true } }, }, }) if (!submission) { return NextResponse.json({ error: "Submission not found" }, { status: 404 }) } if (submission.modelId !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } if (submission.status !== "OFFERED") { return NextResponse.json({ error: "Can only decline offers" }, { status: 400 }) } await prisma.submission.update({ where: { id: submissionId }, data: { status: "DECLINED" }, }) await prisma.notification.create({ data: { userId: submission.casting.createdBy, type: "SYSTEM", payload: { title: "Offer Declined", body: `${user.displayName} declined your offer for "${submission.casting.title}"`, relatedId: submissionId, relatedType: "submission", }, }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Decline offer error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/submissions/[id]/status/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // Enum values matching Prisma schema const SubmissionStatusValues = ["APPLIED", "SUBMITTED", "SHORTLISTED", "OFFERED", "ACCEPTED", "DECLINED", "CONFIRMED", "REJECTED"] as const type SubmissionStatus = (typeof SubmissionStatusValues)[number] export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id: submissionId } = await params const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const submission = await prisma.submission.findUnique({ where: { id: submissionId }, include: { casting: { select: { createdBy: true, title: true } }, }, }) if (!submission) { return NextResponse.json({ error: "Submission not found" }, { status: 404 }) } if (submission.casting.createdBy !== user.id) { return NextResponse.json({ error: "Not authorized" }, { status: 403 }) } const body = await request.json() const { status } = body if (!SubmissionStatusValues.includes(status.toUpperCase() as SubmissionStatus)) { return NextResponse.json({ error: "Invalid status" }, { status: 400 }) } const newStatus = status.toUpperCase() as SubmissionStatus await prisma.submission.update({ where: { id: submissionId }, data: { status: newStatus }, }) // Create notification for the model let notificationType: string | null = null let notificationTitle = "" let notificationBody = "" if (newStatus === "SHORTLISTED") { notificationType = "SHORTLISTED" notificationTitle = "You've been shortlisted!" notificationBody = `You've been shortlisted for "${submission.casting.title}"` } else if (newStatus === "OFFERED") { notificationType = "OFFER" notificationTitle = "You received an offer!" notificationBody = `You've been offered a spot in "${submission.casting.title}"` } else if (newStatus === "CONFIRMED") { notificationType = "CONFIRMED" notificationTitle = "You're confirmed!" notificationBody = `Your booking for "${submission.casting.title}" has been confirmed` // Auto-add model to casting room (uses Conversation model with type "casting_room") try { let room = await prisma.conversation.findFirst({ where: { type: "casting_room", castingId: submission.castingId }, }) if (!room) { room = await prisma.conversation.create({ data: { type: "casting_room", castingId: submission.castingId, status: "active", members: { create: { userId: submission.casting.createdBy } }, }, }) } // Add model as member (skip if already member) const existingMember = await prisma.conversationMember.findFirst({ where: { conversationId: room.id, userId: submission.modelId }, }) if (!existingMember) { await prisma.conversationMember.create({ data: { conversationId: room.id, userId: submission.modelId }, }) // Create timeline event await prisma.roomEvent.create({ data: { conversationId: room.id, type: "member_added", userId: user.id, targetUserId: submission.modelId, message: `Booking confirmed — added to casting room`, }, }) } } catch (roomError) { console.error("Failed to add model to casting room:", roomError) } } else if (newStatus === "REJECTED") { notificationType = "SYSTEM" notificationTitle = "Application Update" notificationBody = `Your application for "${submission.casting.title}" was not selected` } if (notificationType) { await prisma.notification.create({ data: { userId: submission.modelId, type: notificationType, payload: { title: notificationTitle, message: notificationBody, castingId: submission.castingId, relatedId: submissionId, relatedType: "submission", }, }, }) } return NextResponse.json({ success: true }) } catch (error) { console.error("Update submission status error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/submissions/history/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET — get job history (past bookings / completed castings for a model) export async function GET(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { searchParams } = new URL(request.url) const status = searchParams.get("status") // filter by status const limit = parseInt(searchParams.get("limit") || "50", 10) const offset = parseInt(searchParams.get("offset") || "0", 10) // Build filter const where: Record = { modelId: user.id } if (status) { where.status = status.toUpperCase() } // No default filter — return ALL submissions (applied, shortlisted, offered, accepted, confirmed, etc.) const [submissions, total] = await Promise.all([ prisma.submission.findMany({ where, include: { casting: { include: { creator: { include: { profile: true } }, }, }, }, orderBy: { updatedAt: "desc" }, take: limit, skip: offset, }), prisma.submission.count({ where }), ]) return NextResponse.json({ submissions: submissions.map((s: typeof submissions[number]) => ({ id: s.id, castingId: s.castingId, modelId: s.modelId, status: s.status, note: s.note, createdAt: s.createdAt, updatedAt: s.updatedAt, casting: s.casting ? { id: s.casting.id, title: s.casting.title, type: s.casting.type, status: s.casting.status, location: s.casting.location, startDate: s.casting.startDate, endDate: s.casting.endDate, payMin: s.casting.payMin, payMax: s.casting.payMax, creator: { id: s.casting.creator.id, username: s.casting.creator.username, name: s.casting.creator.profile?.displayName || s.casting.creator.username, avatar: s.casting.creator.profile?.avatarUrl, role: s.casting.creator.role.toLowerCase(), }, } : null, })), total, }) } catch (error) { console.error("Get job history error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/users/[username]/block/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // POST — block a user export async function POST( _request: Request, { params }: { params: Promise<{ username: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { username } = await params const target = await prisma.user.findUnique({ where: { username } }) if (!target) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } if (target.id === user.id) { return NextResponse.json({ error: "Cannot block yourself" }, { status: 400 }) } await prisma.block.upsert({ where: { blockerId_blockedId: { blockerId: user.id, blockedId: target.id } }, create: { blockerId: user.id, blockedId: target.id }, update: {}, }) // Also unfollow in both directions await prisma.follow.deleteMany({ where: { OR: [ { followerId: user.id, followingId: target.id }, { followerId: target.id, followingId: user.id }, ], }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Block user error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // DELETE — unblock a user export async function DELETE( _request: Request, { params }: { params: Promise<{ username: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { username } = await params const target = await prisma.user.findUnique({ where: { username } }) if (!target) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } await prisma.block.deleteMany({ where: { blockerId: user.id, blockedId: target.id }, }) return NextResponse.json({ success: true }) } catch (error) { console.error("Unblock user error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // GET — check if blocked export async function GET( _request: Request, { params }: { params: Promise<{ username: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { username } = await params const target = await prisma.user.findUnique({ where: { username } }) if (!target) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } const block = await prisma.block.findUnique({ where: { blockerId_blockedId: { blockerId: user.id, blockedId: target.id } }, }) return NextResponse.json({ blocked: !!block }) } catch (error) { console.error("Check block error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/users/[username]/followers/counts/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" // GET /api/users/:username/followers/counts export async function GET(request: NextRequest, { params }: { params: Promise<{ username: string }> }) { try { const { username } = await params const user = await prisma.user.findUnique({ where: { username }, select: { id: true }, }) if (!user) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } const [followersCount, followingCount] = await Promise.all([ prisma.follow.count({ where: { followingId: user.id } }), prisma.follow.count({ where: { followerId: user.id } }), ]) return NextResponse.json({ followersCount, followingCount }) } catch (error) { console.error("Get follow counts error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/users/[username]/followers/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" // GET /api/users/:username/followers?type=followers|following&limit=30&cursor=id export async function GET(request: NextRequest, { params }: { params: Promise<{ username: string }> }) { try { const { username } = await params const { searchParams } = new URL(request.url) const type = searchParams.get("type") || "followers" const limit = Math.min(Number(searchParams.get("limit") || 30), 100) const cursor = searchParams.get("cursor") const user = await prisma.user.findUnique({ where: { username }, select: { id: true }, }) if (!user) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } if (type === "followers") { const follows = await prisma.follow.findMany({ where: { followingId: user.id }, include: { follower: { include: { profile: true }, }, }, orderBy: { createdAt: "desc" }, take: limit, ...(cursor ? { cursor: { followerId_followingId: { followerId: cursor, followingId: user.id } }, skip: 1, } : {}), }) const results = follows.map((f) => ({ id: f.follower.id, username: f.follower.username, displayName: f.follower.profile?.displayName ?? f.follower.username, avatarUrl: f.follower.profile?.avatarUrl ?? null, role: f.follower.role, })) const nextCursor = results.length === limit ? results[results.length - 1]?.id : null return NextResponse.json({ users: results, nextCursor }) } else { const follows = await prisma.follow.findMany({ where: { followerId: user.id }, include: { following: { include: { profile: true }, }, }, orderBy: { createdAt: "desc" }, take: limit, ...(cursor ? { cursor: { followerId_followingId: { followerId: user.id, followingId: cursor } }, skip: 1, } : {}), }) const results = follows.map((f) => ({ id: f.following.id, username: f.following.username, displayName: f.following.profile?.displayName ?? f.following.username, avatarUrl: f.following.profile?.avatarUrl ?? null, role: f.following.role, })) const nextCursor = results.length === limit ? results[results.length - 1]?.id : null return NextResponse.json({ users: results, nextCursor }) } } catch (error) { console.error("Get follow list error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/users/[username]/report/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" const VALID_REASONS = ["spam", "harassment", "inappropriate", "fake", "other"] // POST — report a user export async function POST( request: NextRequest, { params }: { params: Promise<{ username: string }> } ) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const { username } = await params const target = await prisma.user.findUnique({ where: { username } }) if (!target) { return NextResponse.json({ error: "User not found" }, { status: 404 }) } if (target.id === user.id) { return NextResponse.json({ error: "Cannot report yourself" }, { status: 400 }) } const body = await request.json() const { reason, details } = body as { reason: string; details?: string } if (!reason || !VALID_REASONS.includes(reason)) { return NextResponse.json({ error: "Invalid reason. Must be one of: " + VALID_REASONS.join(", ") }, { status: 400 }) } const report = await prisma.report.create({ data: { reporterId: user.id, targetId: target.id, reason, details, }, }) return NextResponse.json({ success: true, reportId: report.id }) } catch (error) { console.error("Report user error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/users/suggestions/route.ts" import { NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET /api/users/suggestions — suggest users to follow based on mutual follows, role, activity export async function GET() { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } // Get who I already follow const myFollows = await prisma.follow.findMany({ where: { followerId: user.id }, select: { followingId: true }, }) const followedIds = new Set(myFollows.map((f: { followingId: string }) => f.followingId)) followedIds.add(user.id) // exclude self // Get blocked users const blocks = await prisma.block.findMany({ where: { OR: [{ blockerId: user.id }, { blockedId: user.id }] }, select: { blockerId: true, blockedId: true }, }) for (const b of blocks) { followedIds.add(b.blockerId === user.id ? b.blockedId : b.blockerId) } // Strategy 1: Mutual follows — people followed by people I follow const mutualCandidates = await prisma.follow.findMany({ where: { followerId: { in: [...myFollows.map((f: { followingId: string }) => f.followingId)] }, followingId: { notIn: [...followedIds] }, }, select: { followingId: true }, }) const mutualCounts = new Map() for (const m of mutualCandidates) { mutualCounts.set(m.followingId, (mutualCounts.get(m.followingId) || 0) + 1) } // Strategy 2: Same role users (models follow models, brands follow brands) const roleUpper = user.role.toUpperCase() const sameRoleUsers = await prisma.user.findMany({ where: { role: roleUpper as any, id: { notIn: [...followedIds] }, }, include: { profile: true, _count: { select: { followers: true } } }, take: 20, orderBy: { followers: { _count: "desc" } }, }) // Strategy 3: Complementary roles (models → brands/agencies, brands → models) const complementaryRoles = roleUpper === "MODEL" ? ["BRAND", "AGENCY"] : roleUpper === "BRAND" || roleUpper === "CLIENT" ? ["MODEL"] : ["MODEL", "BRAND"] const complementaryUsers = await prisma.user.findMany({ where: { role: { in: complementaryRoles as any[] }, id: { notIn: [...followedIds] }, }, include: { profile: true, _count: { select: { followers: true } } }, take: 20, orderBy: { followers: { _count: "desc" } }, }) // Merge and score const allCandidates = new Map() for (const u of [...sameRoleUsers, ...complementaryUsers]) { const mutualScore = (mutualCounts.get(u.id) || 0) * 10 const followerScore = Math.min(u._count.followers, 50) // cap at 50 const isVerified = u.profile?.verificationStatus !== "UNVERIFIED" ? 5 : 0 allCandidates.set(u.id, { user: { id: u.id, username: u.username, name: u.profile?.displayName ?? u.displayName, avatar: u.profile?.avatarUrl ?? u.avatarUrl ?? "/placeholder.svg", role: u.role.toLowerCase(), verified: u.profile?.verificationStatus !== "UNVERIFIED", bio: u.profile?.bio ?? "", location: u.profile?.location ?? "", followers: u._count.followers, mutualFollows: mutualCounts.get(u.id) || 0, }, score: mutualScore + followerScore + isVerified, }) } // Sort by score descending, return top 15 const suggestions = [...allCandidates.values()] .sort((a, b) => b.score - a.score) .slice(0, 15) .map((s) => s.user) return NextResponse.json({ suggestions }) } catch (error) { console.error("Suggestions error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/work-history/route.ts" import { type NextRequest, NextResponse } from "next/server" import { prisma } from "@/lib/prisma" import { getCurrentUser } from "@/lib/auth" // GET /api/work-history?userId= — get work credits for a model export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const userId = searchParams.get("userId") const user = await getCurrentUser() const targetId = userId || user?.id if (!targetId) { return NextResponse.json({ error: "userId required" }, { status: 400 }) } const credits = await prisma.workCredit.findMany({ where: { modelId: targetId }, include: { confirmer: { include: { profile: true } } }, orderBy: { year: "desc" }, }) return NextResponse.json({ credits: credits.map((c) => ({ id: c.id, brandName: c.brandName, projectTitle: c.projectTitle, role: c.role, photographer: c.photographer, year: c.year, type: c.type, imageUrl: c.imageUrl, confirmed: !!c.confirmedBy, confirmedBy: c.confirmer ? { id: c.confirmer.id, name: c.confirmer.profile?.displayName ?? c.confirmer.displayName } : null, createdAt: c.createdAt.toISOString(), })), }) } catch (error) { console.error("Get work history error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } // POST /api/work-history — add a work credit export async function POST(request: NextRequest) { try { const user = await getCurrentUser() if (!user) { return NextResponse.json({ error: "Not authenticated" }, { status: 401 }) } const body = await request.json() const { brandName, projectTitle, role, photographer, year, type, imageUrl } = body if (!brandName || !projectTitle) { return NextResponse.json({ error: "brandName and projectTitle required" }, { status: 400 }) } const credit = await prisma.workCredit.create({ data: { modelId: user.id, brandName, projectTitle, role: role || null, photographer: photographer || null, year: year || new Date().getFullYear(), type: type || "campaign", imageUrl: imageUrl || null, }, }) return NextResponse.json({ credit }, { status: 201 }) } catch (error) { console.error("Add work credit error:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Complete redesign - fashion-tech minimal aesthetic (Notion × Apple × Off-White) */ /* Light mode as default - professional, clean, editorial */ :root { --background: oklch(0.99 0 0); --foreground: oklch(0.1 0 0); --card: oklch(0.98 0 0); --card-foreground: oklch(0.1 0 0); --popover: oklch(0.99 0 0); --popover-foreground: oklch(0.1 0 0); --primary: oklch(0.15 0 0); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.96 0 0); --secondary-foreground: oklch(0.1 0 0); --muted: oklch(0.95 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.96 0 0); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(0.99 0 0); --border: oklch(0.9 0 0); --input: oklch(0.96 0 0); --ring: oklch(0.15 0 0); --chart-1: oklch(0.15 0 0); --chart-2: oklch(0.35 0 0); --chart-3: oklch(0.55 0 0); --chart-4: oklch(0.75 0 0); --chart-5: oklch(0.85 0 0); --radius: 0.625rem; --sidebar: oklch(0.98 0 0); --sidebar-foreground: oklch(0.1 0 0); --sidebar-primary: oklch(0.15 0 0); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.95 0 0); --sidebar-accent-foreground: oklch(0.1 0 0); --sidebar-border: oklch(0.9 0 0); --sidebar-ring: oklch(0.15 0 0); /* Custom Luxlane tokens - professional, minimal */ --success: oklch(0.65 0.15 145); --success-foreground: oklch(0.99 0 0); --warning: oklch(0.75 0.15 85); --warning-foreground: oklch(0.15 0 0); --info: oklch(0.6 0.15 250); --info-foreground: oklch(0.99 0 0); } /* Dark mode - sleek, editorial, high-contrast */ .dark { --background: oklch(0.08 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.16 0 0); --secondary-foreground: oklch(0.9 0 0); --muted: oklch(0.18 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.16 0 0); --accent-foreground: oklch(0.95 0 0); --destructive: oklch(0.55 0.2 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.22 0 0); --input: oklch(0.16 0 0); --ring: oklch(0.95 0 0); --sidebar: oklch(0.1 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.95 0 0); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.16 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.22 0 0); --sidebar-ring: oklch(0.95 0 0); --success: oklch(0.7 0.15 145); --success-foreground: oklch(0.08 0 0); --warning: oklch(0.8 0.15 85); --warning-foreground: oklch(0.08 0 0); --info: oklch(0.65 0.15 250); --info-foreground: oklch(0.08 0 0); } @theme inline { --font-sans: "Inter", "Geist", sans-serif; --font-serif: "Playfair Display", serif; --font-mono: "Geist Mono", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Luxlane professional utilities */ @layer utilities { .editorial-spacing { letter-spacing: -0.02em; } .headline { @apply text-4xl font-semibold tracking-tight leading-tight; } .subhead { @apply text-lg text-muted-foreground leading-relaxed; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata, Viewport } from "next" import { Inter, Playfair_Display } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { AuthProvider } from "@/lib/auth-context" import { ThemeProvider } from "@/lib/theme-context" import { StoreProvider } from "@/lib/store-context" import { NavigationProvider } from "@/lib/navigation-context" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair", display: "swap", }) export const metadata: Metadata = { title: "Luxlane | Fashion Casting Network", description: "The professional casting platform for models, agencies, brands, and clients.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export const viewport: Viewport = { width: "device-width", initialScale: 1, maximumScale: 1, themeColor: [ { media: "(prefers-color-scheme: light)", color: "#fafafa" }, { media: "(prefers-color-scheme: dark)", color: "#141414" }, ], } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/not-found.tsx" import Link from "next/link" export default function NotFound() { return (

404

Page not found

The page you're looking for doesn't exist or has been moved.

Go Home

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useRouter, useSearchParams } from "next/navigation" import { useEffect, useState, useCallback, Suspense } from "react" import { useAuth } from "@/lib/auth-context" import { api } from "@/lib/api-client" import { useNavigation } from "@/lib/navigation-context" import { useNotifications } from "@/lib/hooks/use-notifications" import { useStore } from "@/lib/store-context" import type { User } from "@/lib/types" import { OnboardingFlow } from "@/components/onboarding/onboarding-flow" import { BottomNav } from "@/components/layout/bottom-nav" import { Header } from "@/components/layout/header" import { HomeView } from "@/components/home/home-view" import { CastingsHub } from "@/components/castings/castings-hub" import { CastingDetail } from "@/components/castings/casting-detail" import { ModelsBrowse } from "@/components/models/models-browse" import { RosterView } from "@/components/models/roster-view" import { DiscoverView } from "@/components/model/discover-view" import { InboxView } from "@/components/model/inbox-view" import { ProfileView } from "@/components/model/profile-view" import { SettingsView } from "@/components/settings/settings-view" import { ScoreboardView } from "@/components/scoreboard/scoreboard-view" import { VerificationFlow } from "@/components/verification/verification-flow" import { CompareView } from "@/components/compare/compare-view" import { CastingRoomView } from "@/components/casting-room/casting-room" import { BrandDashboard } from "@/components/brand/brand-dashboard" import type { CastingRoom } from "@/lib/types" function useViewProfile() { const router = useRouter() return (u: User) => router.push(`/u/${u.username}`) } export default function Home() { const { isAuthenticated, user } = useAuth() const viewProfile = useViewProfile() const { currentView, activeTab, selectedCasting, selectedProfile, compareModels, selectedRoom, navigateTo, setActiveTab, goBack, } = useNavigation() const { unreadCount } = useNotifications(true) const { castings } = useStore() const [openConversationId, setOpenConversationId] = useState(null) // Read URL params for tab and conversation useEffect(() => { if (typeof window === "undefined") return const params = new URLSearchParams(window.location.search) if (params.get("tab") === "inbox") setActiveTab("inbox") if (params.get("conv")) setOpenConversationId(params.get("conv")) }, [setActiveTab]) // Reset to home tab when user changes (login/logout) useEffect(() => { if (isAuthenticated && user) { setActiveTab("home") } }, [user?.id]) const isBrandOrAgency = user?.role === "brand" || user?.role === "agency" if (!isAuthenticated) { return {}} /> } // Verification flow - full screen if (currentView === "verification") { return navigateTo("settings")} onComplete={() => navigateTo("main")} /> } // Scoreboard view - full screen with back if (currentView === "scoreboard") { return } // Compare view - full screen with back if (currentView === "compare" && compareModels) { return ( ) } // Casting Room view - full screen with back if (currentView === "casting-room" && selectedRoom) { return ( ) } // Settings view - full screen with back if (currentView === "settings") { return ( navigateTo("verification")} /> ) } // Own profile view - with persistent nav if (currentView === "own-profile") { return (

navigateTo("settings")} /> navigateTo("settings")} />

) } // Casting detail view - with persistent nav if (currentView === "casting" && selectedCasting) { const handleOpenRoom = async () => { const res = await api.getCastingRoom(selectedCasting.id) const data = res.data as { room?: { id: string; castingId: string; status: string; createdAt: string; casting: Record; members: Array> } } | undefined if (data?.room) { const room: CastingRoom = { id: data.room.id, castingId: data.room.castingId, casting: selectedCasting, status: data.room.status as CastingRoom["status"], members: data.room.members.map((m: Record) => ({ id: m.id as string, email: "", name: (m.name as string) || "", username: (m.username as string) || "", role: ((m.role as string) || "model") as User["role"], verified: false, verificationLevel: "unverified" as const, avatar: (m.avatar as string) || "", bio: "", location: (m.location as string) || "", followers: 0, following: 0, createdAt: new Date(), portfolio: [], polaroids: [], experience: [], tags: [], })), createdAt: new Date(data.room.createdAt), updatedAt: new Date(data.room.createdAt), } navigateTo("casting-room", { room, casting: selectedCasting }) } else { // Create room if it doesn't exist (for casting creator) const createRes = await api.createCastingRoom(selectedCasting.id) const createData = createRes.data as { room?: { id: string; castingId: string; status: string; createdAt: string; members: Array> } } | undefined if (createData?.room) { const room: CastingRoom = { id: createData.room.id, castingId: createData.room.castingId, casting: selectedCasting, status: createData.room.status as CastingRoom["status"], members: createData.room.members.map((m: Record) => ({ id: m.id as string, email: "", name: (m.name as string) || "", username: (m.username as string) || "", role: ((m.role as string) || "model") as User["role"], verified: false, verificationLevel: "unverified" as const, avatar: (m.avatar as string) || "", bio: "", location: (m.location as string) || "", followers: 0, following: 0, createdAt: new Date(), portfolio: [], polaroids: [], experience: [], tags: [], })), createdAt: new Date(createData.room.createdAt), updatedAt: new Date(createData.room.createdAt), } navigateTo("casting-room", { room, casting: selectedCasting }) } } } const isCreator = selectedCasting.creatorId === user?.id return (

navigateTo("own-profile")} /> navigateTo("casting", { casting: c })} onOpenRoom={handleOpenRoom} />

) } // Profile detail view (other user) - with persistent nav if (currentView === "profile" && selectedProfile) { return (

navigateTo("own-profile")} /> { const res = await api.startDirectConversation(selectedProfile.id) const convData = res.data as { conversationId?: string } | undefined if (convData?.conversationId) setOpenConversationId(convData.conversationId) navigateTo("main") setActiveTab("inbox") }} onFollowToggle={async () => { if (selectedProfile.isFollowing) { await api.unfollow(selectedProfile.id) } else { await api.follow(selectedProfile.id) } navigateTo("profile", { profile: { ...selectedProfile, isFollowing: !selectedProfile.isFollowing, followers: selectedProfile.followers + (selectedProfile.isFollowing ? -1 : 1), }, }) }} onViewCasting={(casting) => navigateTo("casting", { casting })} onViewProfile={viewProfile} />

) } // Get the title for the header based on tab const getHeaderTitle = () => { switch (activeTab) { case "castings": return isBrandOrAgency ? "Command Center" : "Castings" case "discover": return "Discover" case "models": return user?.role === "agency" ? "Scout" : "Models" case "roster": return "My Models" case "inbox": return "Inbox" default: return undefined } } // Render the active tab content const renderTabContent = () => { switch (activeTab) { case "home": return ( navigateTo("casting", { casting })} onViewProfile={viewProfile} onViewCastingsHub={() => setActiveTab("castings")} onViewScoreboard={() => navigateTo("scoreboard")} /> ) case "castings": if (isBrandOrAgency) { return ( navigateTo("casting", { casting })} onViewProfile={viewProfile} /> ) } return navigateTo("casting", { casting })} /> case "discover": return ( navigateTo("casting", { casting })} /> ) case "models": return ( navigateTo("compare", { models })} /> ) case "roster": return case "inbox": return setOpenConversationId(null)} onOpenCastingRoom={async (castingId) => { // Fetch the casting room and navigate to it const res = await api.getCastingRoom(castingId) const data = res.data as { room?: { id: string; castingId: string; status: string; createdAt: string; members: Array> } } | undefined if (data?.room) { const casting = castings.find(c => c.id === castingId) const room = { id: data.room.id, castingId: data.room.castingId, casting: casting || { id: castingId, title: "Casting", creatorId: "", creator: { id: "", name: "Brand", username: "", avatar: "", role: "brand" as const, email: "", verified: false, verificationLevel: "unverified" as const, bio: "", location: "", followers: 0, following: 0, createdAt: new Date() }, type: "campaign" as const, description: "", location: "", dates: { start: new Date(), end: new Date() }, pay: { amount: 0, currency: "EUR", type: "flat" as const }, requirements: {}, deadline: new Date(), status: "active" as const, applicationsCount: 0, shortlistedCount: 0, createdAt: new Date() }, status: data.room.status as any, members: (data.room.members || []).map((m: Record) => ({ id: m.id as string, email: "", name: (m.name as string) || "", username: (m.username as string) || "", role: "model" as const, verified: false, verificationLevel: "unverified" as const, avatar: (m.avatar as string) || "", bio: "", location: "", followers: 0, following: 0, createdAt: new Date(), portfolio: [], polaroids: [], experience: [], tags: [], })), createdAt: new Date(data.room.createdAt), updatedAt: new Date(data.room.createdAt), } navigateTo("casting-room", { room, casting: room.casting }) } }} /> default: return null } } // Brand/Agency castings tab shows BrandDashboard with its own header if (activeTab === "castings" && isBrandOrAgency) { return ( navigateTo("casting", { casting })} onViewProfile={viewProfile} onBack={goBack} bottomNav={} /> ) } // Main app shell with persistent header + bottom nav return (

navigateTo("own-profile")} notificationCount={unreadCount} /> {renderTabContent()}

) } [V0_FILE]typescriptreact:file="app/privacy/page.tsx" import Link from "next/link" export default function PrivacyPage() { return (

← Back

Privacy Policy

Last updated: March 21, 2026

1. Information We Collect

We collect information you provide directly: name, email address, profile photos, physical measurements (for models), and portfolio content. We also collect usage data such as pages visited, features used, and device information.

2. How We Use Information

We use your information to: match models with casting opportunities, provide analytics and insights, facilitate communication between users, improve the platform, and send relevant notifications.

3. Data Sharing

We do not sell your personal data. We share your profile information only with parties you interact with on the platform (e.g., brands you apply to, agencies you join). We may share anonymized, aggregated data for analytics purposes.

4. Data Retention

Your data is retained while your account is active. You may request deletion of your account and associated data at any time. Upon deletion, your data will be removed within 30 days, except where retention is required by law.

5. Your Rights

You have the right to: access your personal data, correct inaccurate information, request deletion of your data, export your data in a portable format, and withdraw consent for data processing.

6. Security

We use industry-standard encryption for data in transit and at rest. Access to personal data is restricted to authorized personnel. We conduct regular security audits to protect your information.

7. Cookies

We use session cookies for authentication and essential platform functionality. We do not use third-party tracking cookies. You can manage cookie preferences in your browser settings.

8. Contact

For privacy-related questions or data requests, contact us at privacy@luxlane.com

) } [V0_FILE]typescriptreact:file="app/terms/page.tsx" import Link from "next/link" export default function TermsPage() { return (

← Back

Terms of Service

Last updated: March 21, 2026

1. Acceptance of Terms

By accessing or using Luxlane (“the Platform”), you agree to be bound by these Terms of Service. If you do not agree, do not use the Platform.

2. Eligibility

You must be at least 16 years old to use Luxlane. Users under 18 must have parental or guardian consent. By creating an account, you represent that you meet these requirements.

3. Account Types

Luxlane offers four account types: Model, Brand, Agency, and Client. You are responsible for maintaining the confidentiality of your login credentials and all activity under your account.

4. User Conduct

You agree not to: post false or misleading information, harass other users, infringe on intellectual property rights, use the platform for illegal activities, or attempt to circumvent security measures.

5. Content Ownership

You retain ownership of content you post. By uploading content, you grant Luxlane a non-exclusive, worldwide license to display, distribute, and promote your content on the Platform.

6. Castings & Bookings

Luxlane facilitates connections between brands and models. We are not a party to any agreements between users. Payment terms, contracts, and working conditions are between the hiring party and the talent.

7. Limitation of Liability

Luxlane is provided “as is” without warranties. We are not liable for any disputes between users, lost earnings, or damages arising from platform use.

8. Contact

For questions about these terms, contact us at legal@luxlane.com

) } [V0_FILE]typescriptreact:file="app/u/[username]/page.tsx" "use client" import { useParams, useRouter } from "next/navigation" import { useCallback, useEffect, useState } from "react" import { api } from "@/lib/api-client" import { Header } from "@/components/layout/header" import { ProfileView } from "@/components/model/profile-view" import type { User } from "@/lib/types" import { useAuth } from "@/lib/auth-context" import { mockUsers } from "@/lib/mock-data" function mapVerificationLevel(status: string): "unverified" | "agency_verified" | "luxlane_verified" { const s = String(status).toUpperCase() if (s === "LUXLANE_VERIFIED") return "luxlane_verified" if (s === "AGENCY_VERIFIED") return "agency_verified" return "unverified" } function findMockUser(profile: Record) { const username = profile.username as string return mockUsers.find((u) => u.username === username || u.name === profile.name) } function enrichAvatar(profile: Record): string { const apiAvatar = (profile.avatar as string) ?? (profile.avatarUrl as string) ?? "" if (apiAvatar && !apiAvatar.includes("placeholder")) return apiAvatar const mockUser = findMockUser(profile) return mockUser?.avatar || apiAvatar || "/placeholder.svg?height=400&width=400" } function enrichPolaroids(profile: Record): string[] | undefined { const mockUser = findMockUser(profile) return mockUser?.polaroids } function enrichDigitalTwin(profile: Record): User["digitalTwin"] { const apiTwin = profile.digitalTwin as Record | null | undefined const mockUser = findMockUser(profile) // If API twin has real analysis data, use it if (apiTwin) { const summary = apiTwin.summary as Record | null | undefined const status = (apiTwin.status as string || "").toLowerCase() const mappedStatus = status === "ready" ? "ready" : status === "processing" ? "processing" : status === "pending" ? "pending" : status === "failed" ? "failed" : status === "none" ? "none" : "none" // If API twin is ready and has attributes in summary, use real data if ((mappedStatus === "ready") && summary?.attributes) { return { id: (apiTwin.userId as string) || "", modelId: (apiTwin.userId as string) || "", status: "ready", createdAt: new Date((apiTwin.updatedAt as string) || Date.now()), updatedAt: new Date((apiTwin.updatedAt as string) || Date.now()), previewUrl: (apiTwin.previewUrl as string) || undefined, inputImages: (summary.inputImages as string[]) || undefined, attributes: summary.attributes as User["digitalTwin"] extends { attributes?: infer A } ? A : never, } } // Return API twin with mapped status (even if no attributes yet) if (mappedStatus !== "none") { return { id: (apiTwin.userId as string) || "", modelId: (apiTwin.userId as string) || "", status: mappedStatus as "pending" | "processing" | "ready" | "failed", createdAt: new Date((apiTwin.updatedAt as string) || Date.now()), updatedAt: new Date((apiTwin.updatedAt as string) || Date.now()), } } } // Fall back to mock data if (mockUser?.digitalTwin?.status === "complete") { return mockUser.digitalTwin } return undefined } function extractSocialLinks(profile: Record): { instagram?: string; tiktok?: string } | undefined { // Try modelProfile details first const modelProfile = profile.modelProfile as Record | undefined if (modelProfile?.details) { const details = modelProfile.details as Record if (details.socialLinks) return details.socialLinks as { instagram?: string; tiktok?: string } } // Try top-level socialLinks if (profile.socialLinks) return profile.socialLinks as { instagram?: string; tiktok?: string } return undefined } function profileToUser(profile: Record): User { const portfolioArr = profile.portfolio as Array<{ url?: string }> | undefined const portfolioUrls = Array.isArray(portfolioArr) ? portfolioArr.map((p) => (p && typeof p === "object" && "url" in p ? p.url : "")).filter(Boolean) : undefined const socialLinks = extractSocialLinks(profile) return { id: (profile.id as string) ?? "", email: (profile.email as string) ?? "", name: (profile.name as string) ?? (profile.displayName as string) ?? "", username: (profile.username as string) ?? "", role: (profile.role as User["role"]) ?? "model", verified: (profile.isVerified as boolean) ?? false, verificationLevel: mapVerificationLevel((profile.verificationStatus as string) ?? "UNVERIFIED"), avatar: enrichAvatar(profile), bio: (profile.bio as string) ?? "", location: (profile.location as string) ?? "", followers: (profile.followers as number) ?? (profile.followersCount as number) ?? 0, following: (profile.following as number) ?? (profile.followingCount as number) ?? 0, isFollowing: profile.isFollowing as boolean | undefined, createdAt: new Date((profile.createdAt as string) ?? Date.now()), digitalTwin: enrichDigitalTwin(profile), metrics: profile.score != null ? { luxlaneScore: profile.score as number, rank: 0, rankTier: "new", trend: "stable", trendChange: 0, components: { bookings: 0, shortlists: 0, profileViews: 0, responseRate: 0, reliability: 0 }, achievements: [], lastUpdated: new Date() } : undefined, portfolio: portfolioUrls?.filter((u: string | undefined): u is string => !!u), posts: (profile.posts as User["posts"]) ?? undefined, measurements: profile.measurements as User["measurements"], languages: profile.languages as string[] | undefined, experience: profile.experience as string[] | undefined, skinTone: profile.skinTone as string | undefined, availabilityStatus: profile.availabilityStatus as User["availabilityStatus"], polaroids: enrichPolaroids(profile), roster: profile.roster as string[] | undefined, companyName: profile.companyName as string | undefined, website: profile.website as string | undefined, industry: profile.industry as string | undefined, socialLinks, } } export default function PublicProfilePage() { const params = useParams() const router = useRouter() const { user: currentUser, isAuthenticated } = useAuth() const username = typeof params?.username === "string" ? params.username : "" const [profileUser, setProfileUser] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const loadProfile = useCallback(async () => { if (!username) { setLoading(false) return } setLoading(true) setError(null) const res = await api.getProfile(username) if (res.error) { setError(res.error) setProfileUser(null) } else if (res.data && typeof res.data === "object" && "profile" in res.data) { const profile = (res.data as { profile: Record }).profile setProfileUser(profileToUser(profile)) } else { setProfileUser(null) } setLoading(false) }, [username]) useEffect(() => { loadProfile() }, [loadProfile]) const isOwn = isAuthenticated && currentUser?.username === username if (!username) { return (

Invalid profile

) } if (loading) { return (

) } if (error || !profileUser) { return (

router.back()} title="Profile" />

{error ?? "User not found"}

) } return (

router.back()} showAvatar={isAuthenticated} onAvatarClick={isAuthenticated ? () => router.push("/") : undefined} /> router.push("/")} onMessageClick={async () => { const res = await api.startDirectConversation(profileUser.id) const convData = res.data as { conversationId?: string } | undefined router.push(`/?tab=inbox${convData?.conversationId ? `&conv=${convData.conversationId}` : ""}`) }} onFollowToggle={async () => { if (profileUser.isFollowing) { await api.unfollow(profileUser.id) } else { await api.follow(profileUser.id) } loadProfile() }} onProfileUpdated={loadProfile} onViewCasting={(casting) => router.push(`/?view=casting&id=${casting.id}`)} onViewProfile={(u) => router.push(`/u/${u.username}`)} />

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/admin/moderation-dashboard.tsx" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { api } from "@/lib/api-client" import { ShieldAlert, CheckCircle, XCircle } from "lucide-react" export function ModerationDashboard() { const [reports, setReports] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { loadReports() }, []) const loadReports = async () => { const res = await api.getReports() const data = res.data as { reports?: any[] } | undefined setReports(data?.reports || []) setLoading(false) } const handleAction = async (reportId: string, action: "dismiss" | "resolve") => { await api.updateReport(reportId, action === "resolve" ? "RESOLVED" : "DISMISSED") loadReports() } if (loading) return

return (

Reports

{reports.length}

{reports.length === 0 ? (

No pending reports

) : ( reports.map(report => (

Report: {report.reason}

Reported by {report.reporterUsername} · Target: {report.targetUsername}

{report.details && (

{report.details}

)}

{new Date(report.createdAt).toLocaleDateString()}

)) )}

) } [V0_FILE]typescriptreact:file="components/ai/fit-score-panel.tsx" "use client" import { motion } from "framer-motion" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import type { ModelMatch, User } from "@/lib/types" import { BadgeCheck, Sparkles, ChevronRight, Shield, Scan } from "lucide-react" interface FitScorePanelProps { matches: ModelMatch[] onViewProfile: (user: User) => void onInvite?: (user: User) => void title?: string } export function FitScorePanel({ matches, onViewProfile, onInvite, title = "AI Top Matches" }: FitScorePanelProps) { const getScoreColor = (score: number) => { if (score >= 85) return "text-emerald-500" if (score >= 70) return "text-sky-500" if (score >= 50) return "text-amber-500" return "text-muted-foreground" } const getScoreBarColor = (score: number) => { if (score >= 85) return "bg-emerald-500" if (score >= 70) return "bg-sky-500" if (score >= 50) return "bg-amber-500" return "bg-muted-foreground" } const breakdownLabels = { physical: "Physical", experience: "Experience", reliability: "Reliability", brandAffinity: "Brand Fit", momentum: "Momentum", } const getVerificationBadge = (level: string) => { switch (level) { case "luxlane_verified": return ( Luxlane ) case "agency_verified": return ( Agency ) default: return null } } return (

{title}

Ranked by fit score

{matches.map((match, index) => (

{/* Rank */}

{index + 1}

{/* Avatar */} onViewProfile(match.model)}> {match.model.name[0]} {/* Info */}

onViewProfile(match.model)} > {match.model.name} {match.model.verified && } {getVerificationBadge(match.model.verificationLevel)} {match.model.digitalTwin?.status === "complete" && ( Twin )}

{match.model.location}

{/* Score Breakdown */}

{Object.entries(match.fitScore.breakdown).map(([key, value]) => (

{breakdownLabels[key as keyof typeof breakdownLabels]}

{value}%

))}

{/* Total Score */}

{match.fitScore.total}

Fit Score

{onInvite && ( )}

))}

{matches.length > 0 && ( )} ) } [V0_FILE]typescriptreact:file="components/ai/recommended-castings.tsx" "use client" import { motion } from "framer-motion" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import type { Casting, FitScore } from "@/lib/types" import { Sparkles, MapPin, Clock, BadgeCheck } from "lucide-react" import { formatDistanceToNow } from "date-fns" interface RecommendedCastingsProps { recommendations: Array<{ casting: Casting; fitScore: FitScore }> onViewCasting: (casting: Casting) => void title?: string description?: string } export function RecommendedCastings({ recommendations, onViewCasting, title = "Recommended for You", description = "Based on your profile and experience", }: RecommendedCastingsProps) { const typeLabels: Record = { runway: "Runway", campaign: "Campaign", editorial: "Editorial", commercial: "Commercial", event: "Event", fitting: "Fitting", } const getScoreColor = (score: number) => { if (score >= 85) return "text-emerald-500" if (score >= 70) return "text-sky-500" if (score >= 50) return "text-amber-500" return "text-muted-foreground" } return (

{title}

{description}

{recommendations.map((rec, index) => ( onViewCasting(rec.casting)} > {/* Image */} {rec.casting.images?.[0] && (

{rec.fitScore.total}% match

)}

{typeLabels[rec.casting.type]}

{rec.casting.title}

{rec.casting.creator.name[0]} {rec.casting.creator.name} {rec.casting.creator.verified && }

{rec.casting.location.split(",")[0]} {formatDistanceToNow(rec.casting.deadline, { addSuffix: false })}

))}

) } [V0_FILE]typescriptreact:file="components/analytics/casting-analytics.tsx" "use client" import { useState, useEffect, useCallback } from "react" import { Card } from "@/components/ui/card" import { api } from "@/lib/api-client" import { Eye, Users, TrendingUp, BarChart3, Bookmark, ArrowRight } from "lucide-react" interface CastingAnalyticsData { totalViews: number views30d: number uniqueViewers: number dailyViews: { date: string; count: number }[] funnel: { views: number applications: number shortlisted: number offered: number accepted: number confirmed: number rejected: number declined: number } conversionRate: number savedCount: number } interface CastingAnalyticsProps { castingId: string } const FUNNEL_STEPS = [ { key: "views", label: "Views", color: "bg-blue-500" }, { key: "applications", label: "Applied", color: "bg-indigo-500" }, { key: "shortlisted", label: "Shortlisted", color: "bg-amber-500" }, { key: "offered", label: "Offered", color: "bg-orange-500" }, { key: "accepted", label: "Accepted", color: "bg-emerald-500" }, { key: "confirmed", label: "Confirmed", color: "bg-green-600" }, ] as const export function CastingAnalytics({ castingId }: CastingAnalyticsProps) { const [data, setData] = useState(null) const [loading, setLoading] = useState(true) const fetchAnalytics = useCallback(async () => { setLoading(true) const res = await api.getCastingAnalytics(castingId) if (!res.error && res.data) { setData(res.data as CastingAnalyticsData) } setLoading(false) }, [castingId]) useEffect(() => { fetchAnalytics() }, [fetchAnalytics]) if (loading) { return (

{[1, 2].map((i) => (

))}

) } if (!data) { return (

No analytics data yet

) } const maxFunnel = Math.max(data.funnel.views, 1) return (

Casting Analytics

{/* Key metrics row */}

{data.totalViews}

Views

{data.uniqueViewers}

Unique

{data.conversionRate}%

Apply Rate

{/* Conversion funnel */}

Conversion Funnel

{FUNNEL_STEPS.map((step, i) => { const value = data.funnel[step.key as keyof typeof data.funnel] const pct = maxFunnel > 0 ? (value / maxFunnel) * 100 : 0 return (

{step.label} {value}

0 ? 3 : 0)}%` }} />

{i < FUNNEL_STEPS.length - 1 && (

)}

) })}

{(data.funnel.rejected > 0 || data.funnel.declined > 0) && (

{data.funnel.rejected > 0 && Rejected: {data.funnel.rejected}} {data.funnel.declined > 0 && Declined: {data.funnel.declined}}

)} {/* Daily views mini chart */} {data.dailyViews.length > 0 && (

Daily Views

{data.dailyViews.map((d, i) => { const maxD = Math.max(...data.dailyViews.map((v) => v.count), 1) return (

) })}

)}

Saved by {data.savedCount} users

) } [V0_FILE]typescriptreact:file="components/analytics/earnings-dashboard.tsx" "use client" import { useState, useEffect, useCallback } from "react" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { api } from "@/lib/api-client" import { DollarSign, TrendingUp, Clock, CheckCircle, Ban } from "lucide-react" import { format } from "date-fns" interface EarningItem { id: string amount: number currency: string description: string | null status: string paidAt: string | null createdAt: string casting: { id: string title: string type: string creator: { id: string; username: string; name: string; avatar: string | null } } | null } interface EarningsData { earnings: EarningItem[] total: number summary: { totalEarned: number; totalPending: number; currency: string } monthlyEarnings: { month: string; total: number }[] } const STATUS_CONFIG: Record = { PAID: { icon: CheckCircle, color: "text-emerald-500", label: "Paid" }, PENDING: { icon: Clock, color: "text-amber-500", label: "Pending" }, CANCELLED: { icon: Ban, color: "text-red-500", label: "Cancelled" }, } const FILTER_TABS = [ { value: "", label: "All" }, { value: "PAID", label: "Paid" }, { value: "PENDING", label: "Pending" }, ] export function EarningsDashboard() { const [data, setData] = useState(null) const [filter, setFilter] = useState("") const [loading, setLoading] = useState(true) const fetchEarnings = useCallback(async () => { setLoading(true) const res = await api.getEarnings({ status: filter || undefined }) if (!res.error && res.data) { setData(res.data as EarningsData) } setLoading(false) }, [filter]) useEffect(() => { fetchEarnings() }, [fetchEarnings]) const formatAmount = (cents: number, currency: string) => { return `${currency} ${(cents / 100).toLocaleString(undefined, { minimumFractionDigits: 2 })}` } if (loading && !data) { return (

{[1, 2, 3].map((i) => (

))}

) } return (

Earnings

{/* Summary cards */} {data?.summary && (

Total Earned

{formatAmount(data.summary.totalEarned, data.summary.currency)}

Pending

{formatAmount(data.summary.totalPending, data.summary.currency)}

)} {/* Monthly chart */} {data?.monthlyEarnings && data.monthlyEarnings.length > 0 && (

Monthly Earnings

{data.monthlyEarnings.map((m, i) => { const max = Math.max(...data.monthlyEarnings.map((e) => e.total), 1) return (

{m.month.slice(5)}

) })}

)} {/* Filter */}

{FILTER_TABS.map((tab) => ( ))}

{/* Earnings list */} {!data?.earnings.length ? (

No earnings yet

Your payments from completed bookings will appear here.

) : (

{data.earnings.map((earning) => { const config = STATUS_CONFIG[earning.status] || STATUS_CONFIG.PENDING const StatusIcon = config.icon return (

{earning.casting?.title || earning.description || "Payment"}

{earning.casting?.creator && (

{earning.casting.creator.name}

)}

{formatAmount(earning.amount, earning.currency)}

{config.label} {earning.paidAt ? `Paid ${format(new Date(earning.paidAt), "MMM d, yyyy")}` : format(new Date(earning.createdAt), "MMM d, yyyy")}

) })}

)}

) } [V0_FILE]typescriptreact:file="components/analytics/profile-analytics.tsx" "use client" import { useState, useEffect, useCallback } from "react" import { Card } from "@/components/ui/card" import { api } from "@/lib/api-client" import { Eye, Users, Heart, MessageCircle, TrendingUp, Search, MapPin, Briefcase, Link2 } from "lucide-react" interface ProfileAnalyticsData { totalViews: number views30d: number views7d: number uniqueViewers30d: number viewsBySource: { source: string; count: number }[] dailyViews: { date: string; count: number }[] followers: number following: number posts: number totalLikes: number totalComments: number engagementRate: number } const SOURCE_ICONS: Record = { discover: Search, casting: Briefcase, search: Search, direct: Link2, } const SOURCE_LABELS: Record = { discover: "Discover", casting: "Castings", search: "Search", direct: "Direct Link", } export function ProfileAnalytics() { const [data, setData] = useState(null) const [loading, setLoading] = useState(true) const fetchAnalytics = useCallback(async () => { setLoading(true) const res = await api.getProfileAnalytics() if (!res.error && res.data) { setData(res.data as ProfileAnalyticsData) } setLoading(false) }, []) useEffect(() => { fetchAnalytics() }, [fetchAnalytics]) if (loading) { return (

{[1, 2, 3].map((i) => (

))}

) } if (!data) { return (

No analytics data available yet

) } const maxDaily = Math.max(...data.dailyViews.map((d) => d.count), 1) return (

Profile Analytics

{/* Key metrics */}

Profile Views

{data.views30d.toLocaleString()}

Last 30 days

Unique Viewers

{data.uniqueViewers30d.toLocaleString()}

Last 30 days

Total Likes

{data.totalLikes.toLocaleString()}

Across {data.posts} posts

Engagement Rate

{data.engagementRate}

Avg per post

{/* Views chart (mini bar chart) */} {data.dailyViews.length > 0 && (

Daily Views (30 days)

{data.dailyViews.map((d, i) => (

))}

)} {/* Views by source */} {data.viewsBySource.length > 0 && (

Traffic Sources

{data.viewsBySource .sort((a, b) => b.count - a.count) .map((source) => { const Icon = SOURCE_ICONS[source.source] || MapPin const pct = data.views30d > 0 ? Math.round((source.count / data.views30d) * 100) : 0 return (

{SOURCE_LABELS[source.source] || source.source} {source.count}

{pct}%

) })}

)} {/* Summary footer */}

All time: {data.totalViews.toLocaleString()} views Last 7 days: {data.views7d} views

) } [V0_FILE]typescriptreact:file="components/bookings/direct-booking-sheet.tsx" "use client" import { useState } from "react" import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { api } from "@/lib/api-client" import { Loader2, Send } from "lucide-react" interface DirectBookingSheetProps { open: boolean onOpenChange: (open: boolean) => void modelId: string modelName: string } export function DirectBookingSheet({ open, onOpenChange, modelId, modelName, }: DirectBookingSheetProps) { const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [location, setLocation] = useState("") const [startDate, setStartDate] = useState("") const [endDate, setEndDate] = useState("") const [payAmount, setPayAmount] = useState("") const [submitting, setSubmitting] = useState(false) const [error, setError] = useState(null) const [success, setSuccess] = useState(false) const resetForm = () => { setTitle("") setDescription("") setLocation("") setStartDate("") setEndDate("") setPayAmount("") setError(null) setSuccess(false) } const handleSubmit = async () => { if (!title.trim()) { setError("Title is required") return } setSubmitting(true) setError(null) const res = await api.createBooking({ modelId, title: title.trim(), description: description.trim() || undefined, location: location.trim() || undefined, startDate: startDate || undefined, endDate: endDate || undefined, payAmount: payAmount ? Math.round(parseFloat(payAmount) * 100) : undefined, }) setSubmitting(false) if (res.error) { setError(res.error) return } setSuccess(true) setTimeout(() => { resetForm() onOpenChange(false) }, 1500) } return ( { if (!v) resetForm() onOpenChange(v) }} > Book {modelName} {success ? (

Booking request sent!

{modelName} will be notified and can accept or decline.

) : (

Title * setTitle(e.target.value)} />

Description

setDescription(e.target.value)}
                rows={3}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="booking-location">Location</Label>
              <Input
                id="booking-location"
                placeholder="e.g. Paris, Studio 5"
                value={location}
                onChange={(e) => setLocation(e.target.value)}
              />
            </div>

<div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label htmlFor="booking-start">Start Date</Label>
                <Input
                  id="booking-start"
                  type="date"
                  value={startDate}
                  onChange={(e) => setStartDate(e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="booking-end">End Date</Label>
                <Input
                  id="booking-end"
                  type="date"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="booking-pay">Pay Amount (EUR)</Label>
              <Input
                id="booking-pay"
                type="number"
                min="0"
                step="0.01"
                placeholder="0.00"
                value={payAmount}
                onChange={(e) => setPayAmount(e.target.value)}
              />
              <p className="text-xs text-muted-foreground">
                Enter the total amount in euros. Leave empty if to be discussed.
              </p>
            </div>

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

<Button
              className="w-full h-12"
              onClick={handleSubmit}
              disabled={submitting || !title.trim()}
            >
              {submitting ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Sending...
                </>
              ) : (
                <>
                  <Send className="w-4 h-4 mr-2" />
                  Send Booking Request
                </>
              )}
            </Button>
          </div>
        )}
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="components/brand/brand-dashboard.tsx"
"use client"

import type React from "react"

import { useState, useEffect, useCallback } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { useAuth } from "@/lib/auth-context"
import { api, type AgencyRosterItem } from "@/lib/api-client"
import type { Casting, CastingApplication, CastingType, User } from "@/lib/types"
import {
  Plus,
  Briefcase,
  Users,
  MessageSquare,
  Settings,
  MapPin,
  Calendar,
  BadgeCheck,
  ChevronRight,
  Check,
  X,
  Star,
  Bell,
  UserCircle,
  Send,
  Loader2,
  CheckCircle,
} from "lucide-react"
import { format, formatDistanceToNow } from "date-fns"
import { SettingsView } from "@/components/settings/settings-view"
import { InboxView } from "@/components/model/inbox-view"

type BrandTab = "castings" | "submissions" | "messages" | "my-models" | "profile"

interface BrandDashboardProps {
  onViewCasting?: (casting: Casting) => void
  onViewProfile?: (user: User) => void
  onBack?: () => void
  bottomNav?: React.ReactNode
}

// --- API response → frontend type adapters ---

interface ApiCastingRow {
  id: string
  createdBy: string
  title: string
  type: string
  description: string | null
  location: string | null
  startDate: string | null
  endDate: string | null
  payMin: number | null
  payMax: number | null
  deadline: string | null
  status: string
  verifiedOnly: boolean
  requireDigitalTwin: boolean
  maxSubmissionsPerAgency: number | null
  createdAt: string
  creatorName: string
  creatorAvatar: string | null
  creatorUsername: string
  submissionsCount?: number
  shortlistedCount?: number
}

function apiCastingToFrontend(c: ApiCastingRow): Casting {
  return {
    id: c.id,
    creatorId: c.createdBy,
    creator: {
      id: c.createdBy,
      email: "",
      name: c.creatorName,
      username: c.creatorUsername,
      role: "brand",
      verified: false,
      verificationLevel: "unverified",
      avatar: c.creatorAvatar ?? "",
      bio: "",
      location: "",
      followers: 0,
      following: 0,
      createdAt: new Date(),
      companyName: c.creatorName,
    },
    title: c.title,
    type: c.type.toLowerCase() as CastingType,
    description: c.description ?? "",
    location: c.location ?? "TBD",
    dates: {
      start: c.startDate ? new Date(c.startDate) : new Date(),
      end: c.endDate ? new Date(c.endDate) : new Date(),
    },
    pay: {
      amount: c.payMin ?? 0,
      currency: "USD",
      type: c.payMin ? "flat" : "tbd",
    },
    requirements: {},
    deadline: c.deadline ? new Date(c.deadline) : new Date(),
    status: c.status.toLowerCase() as "active" | "draft" | "closed",
    applicationsCount: c.submissionsCount ?? 0,
    shortlistedCount: c.shortlistedCount ?? 0,
    createdAt: new Date(c.createdAt),
    images: [],
    settings: {
      verifiedOnly: c.verifiedOnly,
      maxSubmissionsPerAgency: c.maxSubmissionsPerAgency ?? 10,
      requireDigitalTwin: c.requireDigitalTwin,
    },
  }
}

interface ApiSubmissionRow {
  id: string
  castingId: string
  modelId: string
  status: string
  note: string | null
  createdAt: string
  updatedAt: string
  modelName: string
  modelAvatar: string | null
  modelUsername: string
  modelHeightCm: number | null
  modelScore: number
}

function apiSubmissionToFrontend(s: ApiSubmissionRow, casting?: Casting): CastingApplication {
  return {
    id: s.id,
    castingId: s.castingId,
    casting,
    modelId: s.modelId,
    model: {
      id: s.modelId,
      email: "",
      name: s.modelName,
      username: s.modelUsername,
      role: "model",
      verified: false,
      verificationLevel: "unverified",
      avatar: s.modelAvatar ?? "",
      bio: "",
      location: "",
      followers: 0,
      following: 0,
      createdAt: new Date(),
      measurements: s.modelHeightCm ? { height: `${s.modelHeightCm} cm` } : undefined,
    },
    status: s.status.toLowerCase() as CastingApplication["status"],
    message: s.note ?? undefined,
    submittedAt: new Date(s.createdAt),
    updatedAt: new Date(s.updatedAt),
  }
}

// --- Main Component ---

export function BrandDashboard({ onViewCasting, onViewProfile, onBack, bottomNav }: BrandDashboardProps) {
  const { user } = useAuth()
  const [activeTab, setActiveTab] = useState<BrandTab>("castings")
  const [showCreateCasting, setShowCreateCasting] = useState(false)
  const [selectedCasting, setSelectedCasting] = useState<Casting | null>(null)
  const [showSettings, setShowSettings] = useState(false)

// API-driven state
  const [myCastings, setMyCastings] = useState<Casting[]>([])
  const [platformCastings, setPlatformCastings] = useState<Casting[]>([])
  const [allSubmissions, setAllSubmissions] = useState<CastingApplication[]>([])
  const [loading, setLoading] = useState(true)

const fetchMyCastings = useCallback(async () => {
    if (!user) return
    const res = await api.getCastings({ creatorId: user.id })
    const data = res.data as { castings?: ApiCastingRow[] } | undefined
    if (data?.castings) {
      setMyCastings(data.castings.map(apiCastingToFrontend))
    }
  }, [user])

const fetchPlatformCastings = useCallback(async () => {
    if (!user) return
    const res = await api.getCastings({ status: "active", limit: 5 })
    const data = res.data as { castings?: ApiCastingRow[] } | undefined
    if (data?.castings) {
      const rows = data.castings.filter((c) => c.createdBy !== user.id)
      setPlatformCastings(rows.map(apiCastingToFrontend))
    }
  }, [user])

const fetchAllSubmissions = useCallback(async () => {
    if (!user || myCastings.length === 0) {
      setAllSubmissions([])
      return
    }
    const results = await Promise.all(
      myCastings.map(async (casting) => {
        const res = await api.getSubmissions(casting.id)
        const data = res.data as { submissions?: ApiSubmissionRow[] } | undefined
        if (data?.submissions) {
          return data.submissions.map((s) => apiSubmissionToFrontend(s, casting))
        }
        return []
      })
    )
    setAllSubmissions(results.flat())
  }, [user, myCastings])

useEffect(() => {
    const init = async () => {
      setLoading(true)
      await Promise.all([fetchMyCastings(), fetchPlatformCastings()])
      setLoading(false)
    }
    init()
  }, [fetchMyCastings, fetchPlatformCastings])

// Fetch submissions when switching to submissions tab or when castings load
  useEffect(() => {
    if (activeTab === "submissions" && myCastings.length > 0) {
      fetchAllSubmissions()
    }
  }, [activeTab, myCastings, fetchAllSubmissions])

const totalSubmissions = myCastings.reduce((acc, c) => acc + c.applicationsCount, 0)
  const activeCastingsCount = myCastings.filter((c) => c.status === "active").length

const handleCastingCreated = useCallback(async () => {
    await fetchMyCastings()
    setShowCreateCasting(false)
  }, [fetchMyCastings])

const tabs: { id: BrandTab; label: string; icon: React.ReactNode }[] = [
    { id: "castings", label: "Castings", icon: <Briefcase className="w-5 h-5" /> },
    { id: "submissions", label: "Submissions", icon: <Users className="w-5 h-5" /> },
    ...(user?.role === "agency"
      ? [{ id: "my-models" as const, label: "My Models", icon: <UserCircle className="w-5 h-5" /> }]
      : []),
    { id: "messages", label: "Messages", icon: <MessageSquare className="w-5 h-5" /> },
    { id: "profile", label: "Profile", icon: <Settings className="w-5 h-5" /> },
  ]

if (showSettings) {
    return <SettingsView onBack={() => setShowSettings(false)} />
  }

if (selectedCasting) {
    return (
      <CastingSubmissions
        casting={selectedCasting}
        onBack={() => {
          setSelectedCasting(null)
          fetchMyCastings() // Refresh counts
        }}
        onViewProfile={onViewProfile}
      />
    )
  }

const handleCastingClick = (casting: Casting) => {
    if (onViewCasting) {
      onViewCasting(casting)
    } else {
      setSelectedCasting(casting)
    }
  }

return (
    <div className="min-h-screen bg-background pb-20">
      <header className="sticky top-0 z-50 flex items-center justify-between h-14 px-4 border-b border-border bg-background">
        <span className="text-lg font-semibold tracking-tight">LUXLANE</span>
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon" className="relative">
            <Bell className="w-5 h-5" />
            <span className="absolute top-1 right-1 w-2 h-2 bg-destructive rounded-full" />
          </Button>
          <Button variant="ghost" size="icon" onClick={() => setShowSettings(true)}>
            <Settings className="w-5 h-5" />
          </Button>
        </div>
      </header>

{/* Quick Stats */}
      <div className="px-4 py-4 border-b border-border">
        <div className="grid grid-cols-3 gap-3">
          <Card className="p-3 text-center">
            <div className="text-2xl font-semibold">{myCastings.length}</div>
            <div className="text-xs text-muted-foreground">Castings</div>
          </Card>
          <Card className="p-3 text-center">
            <div className="text-2xl font-semibold">{totalSubmissions}</div>
            <div className="text-xs text-muted-foreground">
              {user?.role === "agency" ? "Submissions" : "Applications"}
            </div>
          </Card>
          <Card className="p-3 text-center">
            <div className="text-2xl font-semibold">{activeCastingsCount}</div>
            <div className="text-xs text-muted-foreground">Active</div>
          </Card>
        </div>
      </div>

{/* Tab row */}
      <div className="flex border-b border-border sticky top-14 bg-background z-30">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex-1 py-3 flex flex-col items-center gap-1 border-b-2 transition-colors ${
              activeTab === tab.id ? "border-foreground text-foreground" : "border-transparent text-muted-foreground"
            }`}
          >
            {tab.icon}
            <span className="text-xs">{tab.label}</span>
          </button>
        ))}
      </div>

<AnimatePresence mode="wait">
        {activeTab === "castings" && (
          <motion.div key="castings" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
            <div className="p-4">
              <Button className="w-full h-12 mb-4" onClick={() => setShowCreateCasting(true)}>
                <Plus className="w-4 h-4 mr-2" />
                Create New Casting
              </Button>

{loading ? (
                <div className="flex items-center justify-center py-12 gap-2 text-muted-foreground">
                  <Loader2 className="w-5 h-5 animate-spin" />
                  <span>Loading castings…</span>
                </div>
              ) : (
                <>
                  <div className="mb-6">
                    <h3 className="text-sm font-medium text-muted-foreground mb-3">Your Castings</h3>
                    {myCastings.length > 0 ? (
                      <div className="space-y-3">
                        {myCastings.map((casting) => (
                          <CastingCard
                            key={casting.id}
                            casting={casting}
                            onClick={() => handleCastingClick(casting)}
                            onClose={async (c) => {
                              if (confirm(`Close "${c.title}"? It will stop accepting applications.`)) {
                                await api.closeCasting(c.id)
                                fetchMyCastings()
                              }
                            }}
                          />
                        ))}
                      </div>
                    ) : (
                      <div className="text-center py-12 text-muted-foreground border border-dashed border-border rounded-lg">
                        <Briefcase className="w-12 h-12 mx-auto mb-3 opacity-50" />
                        <p>No castings yet</p>
                        <p className="text-sm">Create your first casting to find talent</p>
                      </div>
                    )}
                  </div>

{platformCastings.length > 0 && (
                    <div>
                      <h3 className="text-sm font-medium text-muted-foreground mb-3">Active on Platform</h3>
                      <div className="space-y-3">
                        {platformCastings.map((casting) => (
                          <CastingCard
                            key={casting.id}
                            casting={casting}
                            onClick={() => handleCastingClick(casting)}
                            showCreator
                          />
                        ))}
                      </div>
                    </div>
                  )}
                </>
              )}
            </div>
          </motion.div>
        )}

{activeTab === "submissions" && (
          <motion.div
            key="submissions"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="p-4"
          >
            <AllSubmissionsView
              castings={myCastings}
              submissions={allSubmissions}
              onSelectCasting={setSelectedCasting}
              onViewProfile={onViewProfile}
            />
          </motion.div>
        )}

{activeTab === "my-models" && user?.role === "agency" && (
          <motion.div
            key="my-models"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="p-4"
          >
            <AgencyMyModelsView onViewProfile={onViewProfile} />
          </motion.div>
        )}

{activeTab === "messages" && (
          <motion.div
            key="messages"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <InboxView onViewProfile={onViewProfile} />
          </motion.div>
        )}

{activeTab === "profile" && (
          <motion.div
            key="profile"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="p-4"
          >
            <BrandProfileView />
          </motion.div>
        )}
      </AnimatePresence>

<CreateCastingSheet open={showCreateCasting} onClose={() => setShowCreateCasting(false)} onCreated={handleCastingCreated} />

{bottomNav}
    </div>
  )
}

const AVAILABILITY_LABELS: Record<string, string> = {
  AVAILABLE: "Available",
  HOLD: "On hold",
  BOOKED: "Booked",
}

const fetchRoster = useCallback(async () => {
    setLoading(true)
    setError(null)
    const res = await api.getAgencyRoster()
    setLoading(false)
    if (res.error) {
      setError(res.error)
      return
    }
    if (res.data?.roster) setRoster(res.data.roster)
  }, [])

useEffect(() => {
    fetchRoster()
  }, [fetchRoster])

const handleModelClick = useCallback(
    (model: AgencyRosterItem) => {
      if (!onViewProfile) return
      const minimalUser: User = {
        id: model.id,
        username: model.username,
        name: model.displayName,
        email: model.email,
        role: "model",
        verified: model.verificationStatus !== "UNVERIFIED",
        verificationLevel:
          model.verificationStatus === "LUXLANE_VERIFIED"
            ? "luxlane_verified"
            : model.verificationStatus === "AGENCY_VERIFIED"
              ? "agency_verified"
              : "unverified",
        avatar: model.avatarUrl ?? "",
        bio: model.bio ?? "",
        location: model.location ?? "",
        followers: 0,
        following: 0,
        createdAt: new Date(),
      }
      onViewProfile(minimalUser)
    },
    [onViewProfile],
  )

const openManageSheet = useCallback(async (model: AgencyRosterItem) => {
    setManageModel(model)
    setLoadingCastings(true)
    setProposeCastings([])
    const res = await api.getCastings({ status: "active", limit: 30 })
    setLoadingCastings(false)
    const castData = res.data as { castings?: ApiCastingRow[] } | undefined
    if (castData?.castings) {
      setProposeCastings(castData.castings)
    }
  }, [])

const handlePropose = useCallback(async (castingId: string) => {
    if (!manageModel || proposingId) return
    setProposingId(castingId)
    await api.inviteModelToCasting(castingId, manageModel.id)
    setProposingId(null)
    setProposeCastings((prev) => prev.filter((c) => c.id !== castingId))
  }, [manageModel, proposingId])

const handleRemoveModel = useCallback(async (modelId: string) => {
    setRemovingId(modelId)
    await api.removeModelFromAgency(modelId)
    setRemovingId(null)
    setManageModel(null)
    fetchRoster()
  }, [fetchRoster])

const fetchApplications = useCallback(async () => {
    const res = await api.getAgencyApplications("PENDING")
    const data = res.data as { applications?: typeof applications } | undefined
    if (data?.applications) setApplications(data.applications)
  }, [])

const handleRespondToApp = useCallback(async (appId: string, action: "accept" | "reject") => {
    await api.respondToAgencyApplication(appId, action)
    setApplications((prev) => prev.filter((a) => a.id !== appId))
    if (action === "accept") fetchRoster()
  }, [fetchRoster])

useEffect(() => {
    fetchApplications() // Always fetch on mount to show badge count
  }, [fetchApplications])

if (loading) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
        <Users className="w-10 h-10 animate-pulse mb-3" />
        <p className="text-sm">Loading roster…</p>
      </div>
    )
  }

if (error) {
    return (
      <div className="text-center py-12 text-destructive">
        <p className="text-sm">{error}</p>
        <Button variant="outline" size="sm" className="mt-3" onClick={fetchRoster}>
          Retry
        </Button>
      </div>
    )
  }

if (roster.length === 0) {
    return (
      <div className="text-center py-12 text-muted-foreground border border-dashed border-border rounded-lg">
        <UserCircle className="w-12 h-12 mx-auto mb-3 opacity-50" />
        <p>No models in your roster yet</p>
        <p className="text-sm mt-1">Models linked to your agency will appear here with their castings and availability.</p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {/* Applications toggle */}
      <div className="flex items-center gap-2 px-4">
        <p className="text-sm text-muted-foreground flex-1">{roster.length} model{roster.length !== 1 ? "s" : ""} in your roster</p>
        <Button
          variant={showApplications ? "default" : "outline"}
          size="sm"
          onClick={() => setShowApplications(!showApplications)}
        >
          <Bell className="w-3.5 h-3.5 mr-1" />
          Applications
          {applications.length > 0 && (
            <span className="ml-1 bg-destructive text-destructive-foreground rounded-full text-[10px] w-4 h-4 flex items-center justify-center">
              {applications.length}
            </span>
          )}
        </Button>
      </div>

{/* Pending applications */}
      <AnimatePresence>
        {showApplications && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden px-4"
          >
            {applications.length === 0 ? (
              <p className="text-sm text-muted-foreground py-4 text-center">No pending applications</p>
            ) : (
              <div className="space-y-2 py-2">
                {applications.map((app) => (
                  <Card key={app.id} className="p-3 flex items-center gap-3">
                    <Avatar className="w-10 h-10">
                      <AvatarImage src={app.modelAvatar ?? "/placeholder.svg"} />
                      <AvatarFallback>{app.modelName?.[0] || "?"}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-sm truncate">{app.modelName}</p>
                      <p className="text-xs text-muted-foreground">@{app.modelUsername}</p>
                    </div>
                    <div className="flex gap-1.5">
                      <Button size="sm" className="h-7 text-xs" onClick={() => handleRespondToApp(app.id, "accept")}>
                        <Check className="w-3 h-3 mr-1" />
                        Accept
                      </Button>
                      <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => handleRespondToApp(app.id, "reject")}>
                        <X className="w-3 h-3" />
                      </Button>
                    </div>
                  </Card>
                ))}
              </div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
      <div className="px-4 pb-4 pinterest-masonry">
        {roster.map((model) => (
          <Card
            key={model.id}
            className="overflow-hidden rounded-2xl border-0 bg-card shadow-sm hover:shadow-md transition-all duration-200 hover:-translate-y-0.5"
          >
            <div
              className="cursor-pointer"
              onClick={() => handleModelClick(model)}
            >
            <div className="aspect-[3/4] bg-muted relative flex items-center justify-center">
              <img
                src={model.avatarUrl ?? "/placeholder-user.jpg"}
                alt={model.displayName}
                className="w-full h-full object-cover"
              />
              <div className="absolute top-2 left-2 right-2 flex items-center gap-1.5 flex-wrap">
                <Badge variant="secondary" className="text-[10px] h-5 shadow-sm">
                  {AVAILABILITY_LABELS[model.availability] ?? model.availability}
                </Badge>
                {model.luxlaneScore > 0 && (
                  <Badge variant="outline" className="text-[10px] h-5 shadow-sm bg-background/90 backdrop-blur">
                    <Star className="w-3 h-3 mr-0.5" />
                    {model.luxlaneScore}
                  </Badge>
                )}
              </div>
            </div>
            <div className="p-3">
              <div className="flex items-center gap-1.5">
                <span className="font-semibold text-sm truncate flex-1">{model.displayName}</span>
                {model.verificationStatus !== "UNVERIFIED" && (
                  <BadgeCheck className="w-4 h-4 text-foreground shrink-0" />
                )}
                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
              </div>
              {model.location && (
                <div className="flex items-center gap-1 mt-1 text-xs text-muted-foreground">
                  <MapPin className="w-3 h-3 shrink-0" />
                  <span className="truncate">{model.location}</span>
                </div>
              )}
              {model.submissions.length > 0 && (
                <div className="mt-2 pt-2 border-t border-border">
                  <p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide mb-1">Castings</p>
                  <ul className="space-y-1">
                    {model.submissions.slice(0, 3).map((s) => (
                      <li key={s.id} className="text-xs flex flex-wrap items-center gap-x-1.5 gap-y-0.5">
                        {s.casting && (
                          <>
                            <span className="font-medium truncate max-w-[120px]">{s.casting.title}</span>
                            <Badge variant="outline" className="text-[10px] h-4 px-1">
                              {s.status}
                            </Badge>
                          </>
                        )}
                      </li>
                    ))}
                    {model.submissions.length > 3 && (
                      <p className="text-[10px] text-muted-foreground">+{model.submissions.length - 3} more</p>
                    )}
                  </ul>
                </div>
              )}
              <Button
                variant="outline"
                size="sm"
                className="w-full mt-2 h-8 text-xs"
                onClick={(e) => {
                  e.stopPropagation()
                  openManageSheet(model)
                }}
              >
                <Send className="w-3 h-3 mr-1.5" />
                Propose to event
              </Button>
            </div>
            </div>
          </Card>
        ))}
      </div>

<Sheet open={!!manageModel} onOpenChange={(open) => !open && setManageModel(null)}>
        <SheetContent side="bottom" className="rounded-t-2xl max-h-[85vh] overflow-hidden flex flex-col">
          <SheetHeader>
            <SheetTitle>
              {manageModel ? `Manage ${manageModel.displayName}` : "Manage Model"}
            </SheetTitle>
          </SheetHeader>
          <div className="flex-1 overflow-y-auto py-4">
            {/* Remove from roster */}
            {manageModel && (
              <div className="px-2 mb-4">
                <Button
                  variant="destructive"
                  size="sm"
                  className="w-full"
                  disabled={removingId === manageModel.id}
                  onClick={() => handleRemoveModel(manageModel.id)}
                >
                  {removingId === manageModel.id ? (
                    <Loader2 className="w-4 h-4 animate-spin mr-1" />
                  ) : (
                    <X className="w-4 h-4 mr-1" />
                  )}
                  Remove from Roster
                </Button>
              </div>
            )}

<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide px-2 mb-2">Propose to Event</p>
            {loadingCastings ? (
              <div className="flex items-center justify-center py-8 gap-2 text-muted-foreground">
                <Loader2 className="w-5 h-5 animate-spin" />
                <span>Loading castings…</span>
              </div>
            ) : proposeCastings.length === 0 ? (
              <p className="text-center text-muted-foreground py-8">No active castings to propose to.</p>
            ) : (
              <ul className="space-y-2 px-2">
                {proposeCastings.map((c) => (
                  <li key={c.id}>
                    <Card className="p-3 flex items-center justify-between gap-2">
                      <div className="min-w-0 flex-1">
                        <p className="font-medium text-sm truncate">{c.title}</p>
                        <p className="text-xs text-muted-foreground truncate">
                          {c.creatorName ?? "Brand"}
                        </p>
                      </div>
                      <Button
                        size="sm"
                        variant="default"
                        className="shrink-0"
                        disabled={!!proposingId}
                        onClick={() => handlePropose(c.id)}
                      >
                        {proposingId === c.id ? (
                          <Loader2 className="w-4 h-4 animate-spin" />
                        ) : (
                          <>
                            <Send className="w-3.5 h-3.5 mr-1" />
                            Propose
                          </>
                        )}
                      </Button>
                    </Card>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}

function CastingCard({
  casting,
  onClick,
  showCreator = false,
  onEdit,
  onClose,
}: {
  casting: Casting
  onClick: () => void
  showCreator?: boolean
  onEdit?: (casting: Casting) => void
  onClose?: (casting: Casting) => void
}) {
  const typeLabels: Record<CastingType, string> = {
    runway: "Runway",
    campaign: "Campaign",
    editorial: "Editorial",
    commercial: "Commercial",
    event: "Event",
    fitting: "Fitting",
  }

return (
    <Card className="p-4 cursor-pointer hover:bg-muted/50 transition-colors" onClick={onClick}>
      <div className="flex items-start justify-between mb-2">
        <div className="flex items-center gap-2">
          <Badge variant="secondary">{typeLabels[casting.type]}</Badge>
          <Badge variant={casting.status === "active" ? "default" : "outline"}>
            {casting.status === "active" ? "Active" : casting.status === "draft" ? "Draft" : "Closed"}
          </Badge>
        </div>
        <ChevronRight className="w-4 h-4 text-muted-foreground" />
      </div>
      <h3 className="font-semibold">{casting.title}</h3>
      {showCreator && casting.creator && (
        <p className="text-sm text-muted-foreground mt-1">by {casting.creator.companyName || casting.creator.name}</p>
      )}
      <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
        <span className="flex items-center gap-1">
          <MapPin className="w-3 h-3" />
          {casting.location}
        </span>
        <span className="flex items-center gap-1">
          <Calendar className="w-3 h-3" />
          {format(casting.dates.start, "MMM d")}
        </span>
      </div>
      <div className="flex items-center justify-between mt-3 pt-3 border-t border-border text-sm">
        <div className="flex items-center gap-4">
          <span className="flex items-center gap-1">
            <Users className="w-4 h-4" />
            {casting.applicationsCount} applications
          </span>
          <span>{casting.shortlistedCount} shortlisted</span>
        </div>
        {(onEdit || onClose) && casting.status === "active" && (
          <div className="flex gap-1">
            {onClose && (
              <Button
                size="sm"
                variant="ghost"
                className="h-7 text-xs text-muted-foreground"
                onClick={(e) => { e.stopPropagation(); onClose(casting) }}
              >
                Close
              </Button>
            )}
          </div>
        )}
      </div>
    </Card>
  )
}

function AllSubmissionsView({
  castings,
  submissions,
  onSelectCasting,
  onViewProfile,
}: {
  castings: Casting[]
  submissions: CastingApplication[]
  onSelectCasting: (casting: Casting) => void
  onViewProfile?: (user: User) => void
}) {
  if (submissions.length === 0) {
    return (
      <div className="text-center py-12 text-muted-foreground">
        <Users className="w-12 h-12 mx-auto mb-3 opacity-50" />
        <p>No submissions yet</p>
      </div>
    )
  }

return (
    <div className="space-y-3">
      {submissions.map((app) => (
        <Card
          key={app.id}
          className="p-4 cursor-pointer hover:bg-muted/50 transition-colors"
          onClick={() => {
            const casting = castings.find((c) => c.id === app.castingId)
            if (casting) onSelectCasting(casting)
          }}
        >
          <div className="flex items-center gap-3">
            <Avatar
              className="w-12 h-12 cursor-pointer"
              onClick={(e) => {
                e.stopPropagation()
                if (onViewProfile) onViewProfile(app.model)
              }}
            >
              <AvatarImage src={app.model.avatar || "/placeholder.svg"} alt={app.model.name} />
              <AvatarFallback>{app.model.name[0]}</AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <span className="font-medium truncate">{app.model.name}</span>
                {app.model.verified && <BadgeCheck className="w-4 h-4 shrink-0" />}
              </div>
              <p className="text-sm text-muted-foreground truncate">{app.casting?.title}</p>
              <p className="text-xs text-muted-foreground">
                {formatDistanceToNow(app.submittedAt, { addSuffix: true })}
              </p>
            </div>
            <Badge
              variant="outline"
              className={
                app.status === "shortlisted"
                  ? "bg-warning/10 text-warning border-warning/20"
                  : app.status === "accepted"
                    ? "bg-success/10 text-success border-success/20"
                    : ""
              }
            >
              {app.status}
            </Badge>
          </div>
        </Card>
      ))}
    </div>
  )
}

function CastingSubmissions({
  casting,
  onBack,
  onViewProfile,
}: {
  casting: Casting
  onBack: () => void
  onViewProfile?: (user: User) => void
}) {
  const [filter, setFilter] = useState<"all" | "applied" | "shortlisted" | "offered" | "accepted">("all")
  const [applications, setApplications] = useState<CastingApplication[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
  const [bulkLoading, setBulkLoading] = useState(false)

const fetchSubmissions = useCallback(async () => {
    setLoading(true)
    const res = await api.getSubmissions(casting.id)
    const subData = res.data as { submissions?: ApiSubmissionRow[] } | undefined
    if (subData?.submissions) {
      setApplications(subData.submissions.map((s) => apiSubmissionToFrontend(s, casting)))
    }
    setLoading(false)
  }, [casting])

useEffect(() => {
    fetchSubmissions()
  }, [fetchSubmissions])

const filteredApplications = applications.filter((a) => {
    if (filter === "all") return true
    return a.status === filter
  })

const handleStatusUpdate = useCallback(async (submissionId: string, newStatus: string) => {
    await api.updateSubmissionStatus(submissionId, newStatus)
    fetchSubmissions()
  }, [fetchSubmissions])

const toggleSelect = (id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

const selectAll = () => {
    if (selectedIds.size === filteredApplications.length) {
      setSelectedIds(new Set())
    } else {
      setSelectedIds(new Set(filteredApplications.map((a) => a.id)))
    }
  }

const handleBulkAction = async (action: string) => {
    if (selectedIds.size === 0) return
    setBulkLoading(true)
    await api.bulkAction(casting.id, {
      action,
      submissionIds: Array.from(selectedIds),
    })
    setSelectedIds(new Set())
    setBulkLoading(false)
    fetchSubmissions()
  }

return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 flex items-center h-14 px-4 border-b border-border bg-background z-10">
        <Button variant="ghost" size="sm" onClick={onBack}>
          Back
        </Button>
        <h1 className="ml-2 font-semibold truncate">{casting.title}</h1>
      </header>

<div className="px-4 py-3 flex gap-2 overflow-x-auto no-scrollbar border-b border-border">
        {(["all", "applied", "shortlisted", "offered", "accepted"] as const).map((f) => (
          <Button
            key={f}
            variant={filter === f ? "default" : "outline"}
            size="sm"
            onClick={() => setFilter(f)}
            className="shrink-0"
          >
            {f.charAt(0).toUpperCase() + f.slice(1)}
            {f !== "all" && (
              <span className="ml-1.5 text-xs opacity-70">{applications.filter((a) => a.status === f).length}</span>
            )}
          </Button>
        ))}
      </div>

{/* Bulk action bar */}
      {filteredApplications.length > 0 && (
        <div className="px-4 py-2 flex items-center gap-2 border-b border-border bg-muted/30">
          <Button variant="ghost" size="sm" className="text-xs" onClick={selectAll}>
            {selectedIds.size === filteredApplications.length ? "Deselect all" : "Select all"}
          </Button>
          {selectedIds.size > 0 && (
            <>
              <span className="text-xs text-muted-foreground">{selectedIds.size} selected</span>
              <div className="ml-auto flex gap-1">
                <Button
                  variant="outline"
                  size="sm"
                  className="text-xs"
                  disabled={bulkLoading}
                  onClick={() => handleBulkAction("shortlist")}
                >
                  Shortlist
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="text-xs"
                  disabled={bulkLoading}
                  onClick={() => handleBulkAction("offer")}
                >
                  Offer
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="text-xs text-red-500"
                  disabled={bulkLoading}
                  onClick={() => handleBulkAction("reject")}
                >
                  Reject
                </Button>
              </div>
            </>
          )}
        </div>
      )}

<div className="p-4 space-y-3">
        {loading ? (
          <div className="flex items-center justify-center py-12 gap-2 text-muted-foreground">
            <Loader2 className="w-5 h-5 animate-spin" />
            <span>Loading submissions…</span>
          </div>
        ) : filteredApplications.length > 0 ? (
          filteredApplications.map((app) => (
            <div key={app.id} className="flex items-start gap-2">
              <button
                className={`mt-3 w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors ${
                  selectedIds.has(app.id) ? "bg-foreground border-foreground" : "border-muted-foreground/30"
                }`}
                onClick={() => toggleSelect(app.id)}
              >
                {selectedIds.has(app.id) && (
                  <svg className="w-3 h-3 text-background" viewBox="0 0 12 12" fill="none">
                    <path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                )}
              </button>
              <div className="flex-1 min-w-0">
                <ApplicationCard application={app} onViewProfile={onViewProfile} onStatusUpdate={handleStatusUpdate} />
              </div>
            </div>
          ))
        ) : (
          <div className="text-center py-12 text-muted-foreground">
            <p>No {filter === "all" ? "" : filter} submissions</p>
          </div>
        )}
      </div>
    </div>
  )
}

function ApplicationCard({
  application,
  onViewProfile,
  onStatusUpdate,
}: {
  application: CastingApplication
  onViewProfile?: (user: User) => void
  onStatusUpdate: (submissionId: string, status: string) => void
}) {
  const [expanded, setExpanded] = useState(false)
  const [updating, setUpdating] = useState(false)

const handleAction = async (status: string) => {
    setUpdating(true)
    await onStatusUpdate(application.id, status)
    setUpdating(false)
  }

return (
    <Card className="overflow-hidden">
      <div className="p-4 cursor-pointer" onClick={() => setExpanded(!expanded)}>
        <div className="flex items-center gap-3">
          <Avatar
            className="w-14 h-14 cursor-pointer"
            onClick={(e) => {
              e.stopPropagation()
              if (onViewProfile) onViewProfile(application.model)
            }}
          >
            <AvatarImage src={application.model.avatar || "/placeholder.svg"} alt={application.model.name} />
            <AvatarFallback>{application.model.name[0]}</AvatarFallback>
          </Avatar>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2">
              <span className="font-semibold">{application.model.name}</span>
              {application.model.verified && <BadgeCheck className="w-4 h-4 shrink-0" />}
            </div>
            <p className="text-sm text-muted-foreground">
              {application.model.measurements?.height} • {application.model.location}
            </p>
            <p className="text-xs text-muted-foreground">
              Applied {formatDistanceToNow(application.submittedAt, { addSuffix: true })}
            </p>
          </div>
          <Badge
            variant="outline"
            className={
              application.status === "shortlisted"
                ? "bg-warning/10 text-warning border-warning/20"
                : application.status === "accepted"
                  ? "bg-success/10 text-success border-success/20"
                  : application.status === "rejected"
                    ? "bg-destructive/10 text-destructive border-destructive/20"
                    : ""
            }
          >
            {application.status}
          </Badge>
        </div>
      </div>

<AnimatePresence>
        {expanded && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden"
          >
            <div className="px-4 pb-4 pt-2 border-t border-border">
              {application.message && (
                <div className="mb-3">
                  <p className="text-xs text-muted-foreground mb-1">Message</p>
                  <p className="text-sm">{application.message}</p>
                </div>
              )}

{application.portfolioSelection && application.portfolioSelection.length > 0 && (
                <div className="mb-3">
                  <p className="text-xs text-muted-foreground mb-2">Portfolio</p>
                  <div className="flex gap-2 overflow-x-auto">
                    {application.portfolioSelection.map((img, i) => (
                      <img
                        key={i}
                        src={img || "/placeholder.svg"}
                        alt={`Portfolio ${i + 1}`}
                        className="w-20 h-20 object-cover rounded-lg shrink-0"
                      />
                    ))}
                  </div>
                </div>
              )}

{(application.status === "applied" || application.status === "pending") && (
                <div className="flex gap-2">
                  <Button size="sm" variant="outline" className="flex-1 bg-transparent" onClick={() => handleAction("SHORTLISTED")} disabled={updating}>
                    {updating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Star className="w-4 h-4 mr-1" />}
                    Shortlist
                  </Button>
                  <Button size="sm" variant="outline" className="flex-1 bg-transparent" onClick={() => handleAction("REJECTED")} disabled={updating}>
                    {updating ? <Loader2 className="w-4 h-4 animate-spin" /> : <X className="w-4 h-4 mr-1" />}
                    Decline
                  </Button>
                </div>
              )}

{application.status === "shortlisted" && (
                <div className="flex gap-2">
                  <Button size="sm" className="flex-1" onClick={() => handleAction("OFFERED")} disabled={updating}>
                    {updating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4 mr-1" />}
                    Send Offer
                  </Button>
                  <Button size="sm" variant="outline" className="flex-1 bg-transparent" onClick={() => handleAction("REJECTED")} disabled={updating}>
                    {updating ? <Loader2 className="w-4 h-4 animate-spin" /> : <X className="w-4 h-4 mr-1" />}
                    Decline
                  </Button>
                </div>
              )}

{application.status === "offered" && (
                <div className="p-2 rounded-lg bg-purple-500/10 text-purple-400 text-sm text-center">
                  Offer sent — waiting for model's response
                </div>
              )}

{application.status === "accepted" && (
                <div className="flex gap-2">
                  <Button size="sm" className="flex-1 bg-emerald-600 hover:bg-emerald-700" onClick={() => handleAction("CONFIRMED")} disabled={updating}>
                    {updating ? <Loader2 className="w-4 h-4 animate-spin" /> : <CheckCircle className="w-4 h-4 mr-1" />}
                    Confirm Booking
                  </Button>
                </div>
              )}

{application.status === "confirmed" && (
                <div className="p-2 rounded-lg bg-emerald-500/10 text-emerald-400 text-sm text-center font-medium">
                  ✓ Booking Confirmed
                </div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </Card>
  )
}

function BrandProfileView() {
  const { user } = useAuth()

return (
    <div className="space-y-4">
      <Card className="p-6 text-center">
        <Avatar className="w-20 h-20 mx-auto mb-4">
          <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name} />
          <AvatarFallback>{user?.name?.[0]}</AvatarFallback>
        </Avatar>
        <div className="flex items-center justify-center gap-2 mb-1">
          <h2 className="text-xl font-semibold">{user?.companyName || user?.name}</h2>
          {user?.verified && <BadgeCheck className="w-5 h-5" />}
        </div>
        <p className="text-sm text-muted-foreground capitalize">{user?.role}</p>
        <p className="text-sm text-muted-foreground mt-1">{user?.location}</p>
      </Card>

<Card className="p-4">
        <h3 className="font-semibold mb-2">About</h3>
        <p className="text-sm text-muted-foreground">{user?.bio || "No bio added yet."}</p>
      </Card>

<Card className="p-4">
        <h3 className="font-semibold mb-2">Contact</h3>
        <div className="space-y-2 text-sm">
          <p className="text-muted-foreground">{user?.email}</p>
          {user?.website && (
            <a href={user.website} className="text-foreground underline">
              {user.website}
            </a>
          )}
        </div>
      </Card>
    </div>
  )
}

function CreateCastingSheet({
  open,
  onClose,
  onCreated,
}: {
  open: boolean
  onClose: () => void
  onCreated: () => void
}) {
  const { user } = useAuth()
  const [title, setTitle] = useState("")
  const [type, setType] = useState<CastingType>("campaign")
  const [description, setDescription] = useState("")
  const [location, setLocation] = useState("")
  const [pay, setPay] = useState("")
  const [gender, setGender] = useState("any")
  const [heightMin, setHeightMin] = useState("")
  const [heightMax, setHeightMax] = useState("")
  const [startDate, setStartDate] = useState("")
  const [endDate, setEndDate] = useState("")
  const [deadline, setDeadline] = useState("")
  const [submitting, setSubmitting] = useState(false)

const handleSubmit = async () => {
    if (!title || !user || submitting) return
    setSubmitting(true)

const payAmount = Number.parseInt(pay) || 0
    const res = await api.createCasting({
      title,
      type: type.toUpperCase(),
      description: description || undefined,
      location: location || undefined,
      payMin: payAmount || undefined,
      payMax: payAmount || undefined,
      startDate: startDate ? new Date(startDate).toISOString() : new Date(Date.now() + 30 * 86400000).toISOString(),
      endDate: endDate ? new Date(endDate).toISOString() : new Date(Date.now() + 31 * 86400000).toISOString(),
      deadline: deadline ? new Date(deadline).toISOString() : new Date(Date.now() + 14 * 86400000).toISOString(),
      requirements: {
        gender: gender !== "any" ? gender : undefined,
        minHeightCm: heightMin ? parseInt(heightMin) : undefined,
        maxHeightCm: heightMax ? parseInt(heightMax) : undefined,
      },
    })

if (res.error) {
      setSubmitting(false)
      alert(`Failed to create casting: ${res.error}`)
      return
    }

const createData = res.data as { casting?: { id: string } } | undefined
    if (createData?.casting) {
      await api.activateCasting(createData.casting.id)
    }

setSubmitting(false)
    // Reset form
    setTitle("")
    setType("campaign")
    setDescription("")
    setLocation("")
    setPay("")
    onClose()
    onCreated()
  }

return (
    <Sheet open={open} onOpenChange={onClose}>
      <SheetContent side="bottom" className="h-[85vh] rounded-t-2xl">
        <SheetHeader className="mb-4">
          <SheetTitle>Create New Casting</SheetTitle>
        </SheetHeader>

<div className="space-y-4 overflow-y-auto pb-20">
          <div>
            <Label htmlFor="title">Title</Label>
            <Input
              id="title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="e.g., Spring Campaign 2025"
              className="mt-1"
            />
          </div>

<div>
            <Label htmlFor="type">Type</Label>
            <Select value={type} onValueChange={(v) => setType(v as CastingType)}>
              <SelectTrigger className="mt-1">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="campaign">Campaign</SelectItem>
                <SelectItem value="runway">Runway</SelectItem>
                <SelectItem value="editorial">Editorial</SelectItem>
                <SelectItem value="commercial">Commercial</SelectItem>
                <SelectItem value="event">Event</SelectItem>
                <SelectItem value="fitting">Fitting</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div>
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Describe what you're looking for..."
              className="mt-1"
              rows={3}
            />
          </div>

<div>
            <Label htmlFor="location">Location</Label>
            <Input
              id="location"
              value={location}
              onChange={(e) => setLocation(e.target.value)}
              placeholder="e.g., Paris, France"
              className="mt-1"
            />
          </div>

<div>
            <Label htmlFor="pay">Pay (USD)</Label>
            <Input
              id="pay"
              type="number"
              value={pay}
              onChange={(e) => setPay(e.target.value)}
              placeholder="e.g., 5000"
              className="mt-1"
            />
          </div>

{/* Dates */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <Label>Start Date</Label>
              <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="mt-1" />
            </div>
            <div>
              <Label>End Date</Label>
              <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="mt-1" />
            </div>
          </div>

<div>
            <Label>Application Deadline</Label>
            <Input type="date" value={deadline} onChange={(e) => setDeadline(e.target.value)} className="mt-1" />
          </div>

{/* Requirements */}
          <div className="pt-2 border-t border-border">
            <h4 className="font-medium text-sm mb-3">Requirements</h4>
            <div className="space-y-3">
              <div>
                <Label>Gender</Label>
                <div className="flex gap-2 mt-1">
                  {["any", "female", "male", "non-binary"].map((g) => (
                    <button
                      key={g}
                      type="button"
                      onClick={() => setGender(g)}
                      className={`px-3 py-1.5 rounded-full text-xs font-medium capitalize transition-colors ${
                        gender === g ? "bg-foreground text-background" : "bg-muted text-muted-foreground"
                      }`}
                    >
                      {g}
                    </button>
                  ))}
                </div>
              </div>

<div className="grid grid-cols-2 gap-3">
                <div>
                  <Label>Min Height (cm)</Label>
                  <Input type="number" placeholder="e.g. 170" value={heightMin} onChange={(e) => setHeightMin(e.target.value)} className="mt-1" />
                </div>
                <div>
                  <Label>Max Height (cm)</Label>
                  <Input type="number" placeholder="e.g. 185" value={heightMax} onChange={(e) => setHeightMax(e.target.value)} className="mt-1" />
                </div>
              </div>
            </div>
          </div>

<Button className="w-full h-12" onClick={handleSubmit} disabled={!title || submitting}>
            {submitting ? (
              <>
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                Creating…
              </>
            ) : (
              "Create Casting"
            )}
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="components/casting-room/casting-room.tsx"
"use client"

import { useState, useRef, useEffect, useCallback } from "react"
import { motion } from "framer-motion"
import {
  ArrowLeft,
  Users,
  MessageSquare,
  FileText,
  Calendar,
  Clock,
  Send,
  Paperclip,
  MoreVertical,
  CheckCheck,
  ImageIcon,
  ChevronLeft,
  ChevronRight,
} from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import type { CastingRoom, RoomEvent, User } from "@/lib/types"
import { api } from "@/lib/api-client"
import { useAuth } from "@/lib/auth-context"
import { format, formatDistanceToNow } from "date-fns"

interface ApiRoomEvent {
  id: string
  roomId: string
  type: string
  userId: string
  user: { id: string; username: string; name: string; avatar?: string; role: string } | null
  targetUserId?: string
  targetUser?: { id: string; username: string; name: string; avatar?: string; role: string } | null
  message?: string
  createdAt: string
}

interface ApiRoomFile {
  id: string
  roomId: string
  name: string
  type: string
  url: string
  uploadedBy: { id: string; username: string; name: string; avatar?: string } | null
  createdAt: string
}

interface ApiRoomScheduleItem {
  id: string
  roomId: string
  title: string
  date: string
  time: string
  location?: string
  notes?: string
}

interface ApiRoomMessage {
  id: string
  userId: string
  user: { id: string; username: string; name: string; avatar?: string; role: string }
  content: string
  createdAt: string
}

interface CastingRoomViewProps {
  room: CastingRoom
  onBack: () => void
  onViewProfile: (user: User) => void
}

export function CastingRoomView({ room, onBack, onViewProfile }: CastingRoomViewProps) {
  const { user } = useAuth()
  const [activeTab, setActiveTab] = useState("timeline")
  const [messageInput, setMessageInput] = useState("")
  const [events, setEvents] = useState<RoomEvent[]>([])
  const [files, setFiles] = useState<ApiRoomFile[]>([])
  const [schedule, setSchedule] = useState<ApiRoomScheduleItem[]>([])
  const [messages, setMessages] = useState<ApiRoomMessage[]>([])
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Schedule calendar state
  const [calYear, setCalYear] = useState(new Date().getFullYear())
  const [calMonth, setCalMonth] = useState(new Date().getMonth())
  const [selectedDate, setSelectedDate] = useState<string | null>(null)
  const [showScheduleForm, setShowScheduleForm] = useState(false)
  const [scheduleTitle, setScheduleTitle] = useState("")
  const [scheduleDate, setScheduleDate] = useState("")
  const [scheduleTime, setScheduleTime] = useState("")
  const [pickerHour, setPickerHour] = useState(9)
  const [pickerMinute, setPickerMinute] = useState(0)
  const [pickerPeriod, setPickerPeriod] = useState<"AM" | "PM">("AM")
  const [scheduleLocation, setScheduleLocation] = useState("")
  const [scheduleNotes, setScheduleNotes] = useState("")
  const [scheduleSaving, setScheduleSaving] = useState(false)

// File upload state
  const [fileUploading, setFileUploading] = useState(false)

const fetchEvents = useCallback(async () => {
    const res = await api.getRoomEvents(room.id)
    const data = res.data as { events?: ApiRoomEvent[] } | undefined
    if (data?.events) {
      setEvents(
        data.events.map((e) => ({
          id: e.id,
          roomId: e.roomId,
          type: e.type as RoomEvent["type"],
          userId: e.userId,
          user: e.user ? apiUserToUser(e.user) : apiUserToUser({ id: e.userId, username: "", name: "Unknown", role: "model" }),
          targetUserId: e.targetUserId,
          targetUser: e.targetUser ? apiUserToUser(e.targetUser) : undefined,
          message: e.message,
          createdAt: new Date(e.createdAt),
        }))
      )
    }
  }, [room.id])

const fetchFiles = useCallback(async () => {
    const res = await api.getRoomFiles(room.id)
    const data = res.data as { files?: ApiRoomFile[] } | undefined
    if (data?.files) {
      setFiles(data.files)
    }
  }, [room.id])

const fetchSchedule = useCallback(async () => {
    const res = await api.getRoomSchedule(room.id)
    const data = res.data as { schedule?: ApiRoomScheduleItem[] } | undefined
    if (data?.schedule) {
      setSchedule(data.schedule)
    }
  }, [room.id])

const fetchMessages = useCallback(async () => {
    const res = await api.getRoomMessages(room.id)
    const data = res.data as { messages?: ApiRoomMessage[] } | undefined
    if (data?.messages) {
      setMessages(data.messages)
    }
  }, [room.id])

useEffect(() => {
    fetchEvents()
    fetchFiles()
    fetchSchedule()
    fetchMessages()
  }, [fetchEvents, fetchFiles, fetchSchedule, fetchMessages])

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

useEffect(() => {
    if (activeTab === "chat") {
      scrollToBottom()
    }
  }, [activeTab, messages])

const handleSendMessage = async () => {
    if (!messageInput.trim() || !user) return

const content = messageInput
    setMessageInput("")

const res = await api.sendRoomMessage(room.id, content)
    const data = res.data as { message?: ApiRoomMessage } | undefined
    if (data?.message) {
      setMessages((prev) => [...prev, data.message!])
    }
  }

// Poll for new messages every 5 seconds
  useEffect(() => {
    const interval = setInterval(fetchMessages, 5000)
    return () => clearInterval(interval)
  }, [fetchMessages])

const handleAddScheduleItem = async () => {
    if (!scheduleTitle || !scheduleDate) return
    const timeStr = `${pickerHour}:${String(pickerMinute).padStart(2, "0")} ${pickerPeriod}`
    setScheduleSaving(true)
    await api.addRoomScheduleItem(room.id, {
      title: scheduleTitle,
      date: scheduleDate,
      time: timeStr,
      location: scheduleLocation || undefined,
      notes: scheduleNotes || undefined,
    })
    setScheduleSaving(false)
    setShowScheduleForm(false)
    setScheduleTitle("")
    setScheduleDate("")
    setScheduleTime("")
    setScheduleLocation("")
    setScheduleNotes("")
    fetchSchedule()
  }

const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setFileUploading(true)
    const formData = new FormData()
    formData.append("file", file)
    formData.append("type", "casting_room")
    const uploadRes = await fetch("/api/media/upload", { method: "POST", credentials: "include", body: formData })
    if (uploadRes.ok) {
      const data = await uploadRes.json()
      if (data.url) {
        const fileType = file.name.match(/\.(pdf|doc|docx)$/i) ? "contract" : file.type.startsWith("image/") ? "moodboard" : "other"
        await api.uploadRoomFile(room.id, { name: file.name, type: fileType, url: data.url })
        fetchFiles()
      }
    }
    setFileUploading(false)
  }

const getEventIcon = (type: RoomEvent["type"]) => {
    switch (type) {
      case "created":
        return "🎬"
      case "submission":
        return "📥"
      case "shortlisted":
        return "⭐"
      case "offer_sent":
        return "📨"
      case "offer_accepted":
        return "✅"
      case "member_added":
        return "👤"
      case "message":
        return "💬"
      default:
        return "📌"
    }
  }

const getEventMessage = (event: RoomEvent) => {
    switch (event.type) {
      case "created":
        return `${event.user.name} created the casting room`
      case "submission":
        return `${event.user.name} submitted an application`
      case "shortlisted":
        return `${event.user.name} shortlisted ${event.targetUser?.name || "a model"}`
      case "offer_sent":
        return `${event.user.name} sent an offer to ${event.targetUser?.name || "a model"}`
      case "offer_accepted":
        return `${event.targetUser?.name || "A model"} accepted the offer`
      case "member_added":
        return `${event.targetUser?.name || "A member"} was added to the room`
      case "message":
        return event.message || "sent a message"
      default:
        return "Event"
    }
  }

const statusColors: Record<string, string> = {
    draft: "bg-muted text-muted-foreground",
    active: "bg-amber-500/10 text-amber-600",
    live: "bg-emerald-500/10 text-emerald-600",
    completed: "bg-sky-500/10 text-sky-600",
  }

return (
    <div className="min-h-screen bg-background flex flex-col">
      {/* Header */}
      <header className="sticky top-0 border-b border-border bg-background z-10">
        <div className="flex items-center h-14 px-4">
          <Button variant="ghost" size="icon" onClick={onBack}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div className="ml-2 flex-1 min-w-0">
            <h1 className="font-semibold text-sm truncate">{room.casting.title}</h1>
            <div className="flex items-center gap-2">
              <Badge className={`text-[10px] ${statusColors[room.status]}`}>
                {room.status.charAt(0).toUpperCase() + room.status.slice(1)}
              </Badge>
              <span className="text-xs text-muted-foreground">{room.members.length} members</span>
            </div>
          </div>
          <Button variant="ghost" size="icon">
            <MoreVertical className="h-5 w-5" />
          </Button>
        </div>

{/* Members preview */}
        <div className="flex items-center gap-2 px-4 pb-3">
          <div className="flex -space-x-2">
            {room.members.slice(0, 5).map((member) => (
              <Avatar
                key={member.id}
                className="w-7 h-7 border-2 border-background cursor-pointer"
                onClick={() => onViewProfile(member)}
              >
                <AvatarImage src={member.avatar || "/placeholder.svg"} alt={member.name} />
                <AvatarFallback className="text-xs">{member.name[0]}</AvatarFallback>
              </Avatar>
            ))}
          </div>
          {room.members.length > 5 && (
            <span className="text-xs text-muted-foreground">+{room.members.length - 5} more</span>
          )}
        </div>
      </header>

{/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
        <TabsList className="w-full justify-start rounded-none border-b border-border h-10 p-0 bg-transparent shrink-0">
          <TabsTrigger
            value="timeline"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-foreground data-[state=active]:bg-transparent flex-1"
          >
            <Clock className="w-4 h-4 mr-1" />
            Timeline
          </TabsTrigger>
          <TabsTrigger
            value="shortlist"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-foreground data-[state=active]:bg-transparent flex-1"
          >
            <Users className="w-4 h-4 mr-1" />
            Members
          </TabsTrigger>
          <TabsTrigger
            value="chat"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-foreground data-[state=active]:bg-transparent flex-1"
          >
            <MessageSquare className="w-4 h-4 mr-1" />
            Chat
          </TabsTrigger>
          <TabsTrigger
            value="files"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-foreground data-[state=active]:bg-transparent flex-1"
          >
            <FileText className="w-4 h-4 mr-1" />
            Files
          </TabsTrigger>
          <TabsTrigger
            value="schedule"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-foreground data-[state=active]:bg-transparent flex-1"
          >
            <Calendar className="w-4 h-4 mr-1" />
            Schedule
          </TabsTrigger>
        </TabsList>

{/* Timeline */}
        <TabsContent value="timeline" className="flex-1 overflow-auto mt-0 p-4">
          <div className="space-y-4">
            {events.map((event, i) => (
              <motion.div
                key={event.id}
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: i * 0.05 }}
                className="flex gap-3"
              >
                <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
                  <span className="text-sm">{getEventIcon(event.type)}</span>
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm">{getEventMessage(event)}</p>
                  <p className="text-xs text-muted-foreground">
                    {formatDistanceToNow(event.createdAt, { addSuffix: true })}
                  </p>
                </div>
              </motion.div>
            ))}
            {events.length === 0 && (
              <div className="text-center py-12 text-muted-foreground">
                <Clock className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p>No events yet</p>
              </div>
            )}
          </div>
        </TabsContent>

{/* Members (confirmed models only) */}
        <TabsContent value="shortlist" className="flex-1 overflow-auto mt-0 p-4">
          <div className="space-y-2">
            {room.members
              .filter((m) => m.role === "model")
              .map((model) => (
                <Card
                  key={model.id}
                  className="p-3 flex items-center gap-3 cursor-pointer hover:bg-muted/30 transition-colors"
                  onClick={() => onViewProfile(model)}
                >
                  <Avatar className="w-10 h-10">
                    <AvatarImage src={model.avatar || "/placeholder.svg"} alt={model.name} />
                    <AvatarFallback>{model.name[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-sm truncate">{model.name}</p>
                    <p className="text-xs text-muted-foreground">{model.location}</p>
                  </div>
                  <Badge variant="secondary" className="text-[10px] bg-emerald-500/10 text-emerald-500">
                    Confirmed
                  </Badge>
                </Card>
              ))}
            {room.members.filter((m) => m.role === "model").length === 0 && (
              <div className="text-center py-12 text-muted-foreground">
                <Users className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p>No confirmed models yet</p>
              </div>
            )}
          </div>
        </TabsContent>

{/* Chat */}
        <TabsContent value="chat" className="flex-1 flex flex-col mt-0">
          <div className="flex-1 overflow-auto p-4 space-y-4">
            {messages.map((msg) => (
              <div key={msg.id} className={`flex gap-2 ${msg.userId === user?.id ? "flex-row-reverse" : ""}`}>
                <Avatar className="w-8 h-8 shrink-0">
                  <AvatarImage src={msg.user.avatar || "/placeholder.svg"} alt={msg.user.name} />
                  <AvatarFallback className="text-xs">{msg.user.name[0]}</AvatarFallback>
                </Avatar>
                <div className={`max-w-[75%] ${msg.userId === user?.id ? "items-end" : ""}`}>
                  <div
                    className={`rounded-2xl px-3 py-2 ${
                      msg.userId === user?.id ? "bg-foreground text-background rounded-tr-sm" : "bg-muted rounded-tl-sm"
                    }`}
                  >
                    <p className="text-sm">{msg.content}</p>
                  </div>
                  <div className="flex items-center gap-1 mt-1 px-1">
                    <p className="text-[10px] text-muted-foreground">{format(new Date(msg.createdAt), "h:mm a")}</p>
                    {msg.userId === user?.id && <CheckCheck className="w-3 h-3 text-muted-foreground" />}
                  </div>
                </div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>

{/* Chat Input */}
          <div className="p-4 border-t border-border bg-background">
            <div className="flex items-center gap-2">
              <Button variant="ghost" size="icon" className="shrink-0">
                <Paperclip className="w-5 h-5" />
              </Button>
              <Input
                value={messageInput}
                onChange={(e) => setMessageInput(e.target.value)}
                placeholder="Type a message..."
                className="flex-1"
                onKeyDown={(e) => e.key === "Enter" && handleSendMessage()}
              />
              <Button size="icon" onClick={handleSendMessage} disabled={!messageInput.trim()}>
                <Send className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </TabsContent>

{/* Files */}
        <TabsContent value="files" className="flex-1 overflow-auto mt-0 p-4">
          <div className="space-y-2">
            {/* Upload button */}
            <label className="block cursor-pointer">
              <Card className="p-3 flex items-center gap-3 border-dashed border-2 hover:bg-muted/30 transition-colors">
                <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
                  {fileUploading ? (
                    <div className="w-5 h-5 border-2 border-muted-foreground border-t-foreground rounded-full animate-spin" />
                  ) : (
                    <Paperclip className="w-5 h-5" />
                  )}
                </div>
                <div className="flex-1">
                  <p className="font-medium text-sm">{fileUploading ? "Uploading..." : "Upload File"}</p>
                  <p className="text-xs text-muted-foreground">Contracts, moodboards, call sheets</p>
                </div>
              </Card>
              <input type="file" className="hidden" disabled={fileUploading} onChange={handleFileUpload} />
            </label>

{files.map((file) => (
              <Card key={file.id} className="p-3 flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
                  {file.type === "moodboard" ? <ImageIcon className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-medium text-sm truncate">{file.name}</p>
                  <p className="text-xs text-muted-foreground">
                    {file.uploadedBy?.name || "Unknown"} • {format(new Date(file.createdAt), "MMM d")}
                  </p>
                </div>
                <Badge variant="secondary" className="text-[10px] capitalize">
                  {file.type}
                </Badge>
              </Card>
            ))}
            {files.length === 0 && (
              <div className="text-center py-8 text-muted-foreground text-sm">
                <p>No files uploaded yet</p>
              </div>
            )}
          </div>
        </TabsContent>

{/* Schedule — Calendar View */}
        <TabsContent value="schedule" className="flex-1 overflow-auto mt-0 p-3">
          {/* Month navigation */}
          <div className="flex items-center justify-between mb-3">
            <Button variant="ghost" size="icon" onClick={() => {
              if (calMonth === 0) { setCalMonth(11); setCalYear(calYear - 1) }
              else setCalMonth(calMonth - 1)
            }}>
              <ChevronLeft className="w-4 h-4" />
            </Button>
            <h3 className="font-semibold text-sm">
              {new Date(calYear, calMonth).toLocaleDateString("en-US", { month: "long", year: "numeric" })}
            </h3>
            <Button variant="ghost" size="icon" onClick={() => {
              if (calMonth === 11) { setCalMonth(0); setCalYear(calYear + 1) }
              else setCalMonth(calMonth + 1)
            }}>
              <ChevronRight className="w-4 h-4" />
            </Button>
          </div>

{/* Day headers */}
          <div className="grid grid-cols-7 text-center mb-1">
            {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => (
              <span key={d} className="text-[10px] text-muted-foreground font-medium py-1">{d}</span>
            ))}
          </div>

{/* Calendar grid */}
          <div className="grid grid-cols-7 gap-0.5 mb-4">
            {(() => {
              const daysInMonth = new Date(calYear, calMonth + 1, 0).getDate()
              const firstDay = new Date(calYear, calMonth, 1).getDay()
              const cells = []
              // Empty cells before first day
              for (let i = 0; i < firstDay; i++) cells.push(<div key={`e${i}`} />)
              // Day cells
              for (let day = 1; day <= daysInMonth; day++) {
                const dateStr = `${calYear}-${String(calMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`
                const dayEvents = schedule.filter((s) => s.date === dateStr)
                const isSelected = selectedDate === dateStr
                const isToday = dateStr === format(new Date(), "yyyy-MM-dd")
                cells.push(
                  <div key={day} className="relative group">
                    <button
                      onClick={() => {
                        setSelectedDate(isSelected ? null : dateStr)
                        setShowScheduleForm(false)
                      }}
                      className={`w-full aspect-square rounded-lg flex flex-col items-center justify-center text-sm relative transition-colors ${
                        isSelected ? "bg-foreground text-background" :
                        isToday ? "bg-muted ring-1 ring-foreground/30" :
                        "hover:bg-muted/50"
                      }`}
                    >
                      <span className="font-medium">{day}</span>
                      {dayEvents.length > 0 && (
                        <div className={`absolute bottom-1 w-1 h-1 rounded-full ${isSelected ? "bg-background" : "bg-violet-500"}`} />
                      )}
                    </button>
                    {/* Hover: small "+ Add" button */}
                    <button
                      onClick={(e) => {
                        e.stopPropagation()
                        setSelectedDate(dateStr)
                        setScheduleDate(dateStr)
                        setShowScheduleForm(true)
                      }}
                      className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-violet-500 text-white text-[8px] font-bold items-center justify-center hidden group-hover:flex z-10 shadow"
                    >
                      +
                    </button>
                  </div>
                )
              }
              return cells
            })()}
          </div>

{/* Existing events for selected date shown below calendar */}
          {selectedDate && schedule.filter((s) => s.date === selectedDate).length > 0 && (
            <div className="space-y-2 mt-2">
              <h4 className="font-semibold text-xs text-muted-foreground uppercase tracking-wider">
                {format(new Date(selectedDate + "T00:00:00"), "EEEE, MMMM d")}
              </h4>
              {schedule.filter((s) => s.date === selectedDate).map((item) => (
                <Card key={item.id} className="p-3">
                  <div className="flex items-start gap-3">
                    <div className="w-1 h-full min-h-[40px] rounded-full bg-violet-500 shrink-0" />
                    <div className="flex-1">
                      <p className="font-medium text-sm">{item.title}</p>
                      <p className="text-xs text-muted-foreground">{item.time}</p>
                      {item.location && <p className="text-xs text-muted-foreground mt-1">📍 {item.location}</p>}
                      {item.notes && <p className="text-xs text-muted-foreground mt-1">{item.notes}</p>}
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          )}

{!selectedDate && (
            <p className="text-center text-sm text-muted-foreground py-4">Tap a date to add an event</p>
          )}

{/* Add event — centered popup dialog */}
          {showScheduleForm && (
            <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={() => setShowScheduleForm(false)}>
              <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.9 }}
                transition={{ type: "spring", damping: 25, stiffness: 300 }}
                className="relative w-full max-w-sm bg-background rounded-2xl p-5 shadow-2xl border border-border"
                onClick={(e) => e.stopPropagation()}
              >
                <h3 className="font-semibold text-base mb-4">
                  {selectedDate ? format(new Date(selectedDate + "T00:00:00"), "EEEE, MMMM d") : "Add Event"}
                </h3>
                <div className="space-y-3">
                  <Input
                    placeholder="Title (e.g. Fitting, Shoot Day 1)"
                    value={scheduleTitle}
                    onChange={(e) => setScheduleTitle(e.target.value)}
                    autoFocus
                  />
                  {/* Scroll time picker */}
                  <div>
                    <label className="text-xs text-muted-foreground mb-2 block">Time</label>
                    <div className="flex items-center justify-center gap-1 bg-muted/50 rounded-xl p-3">
                      {/* Hour */}
                      <div className="flex flex-col items-center">
                        <button onClick={() => setPickerHour(h => h >= 12 ? 1 : h + 1)} className="p-1 text-muted-foreground hover:text-foreground">
                          <ChevronLeft className="w-4 h-4 rotate-90" />
                        </button>
                        <span className="text-2xl font-bold w-10 text-center">{pickerHour}</span>
                        <button onClick={() => setPickerHour(h => h <= 1 ? 12 : h - 1)} className="p-1 text-muted-foreground hover:text-foreground">
                          <ChevronRight className="w-4 h-4 rotate-90" />
                        </button>
                      </div>

{/* Minute */}
                      <div className="flex flex-col items-center">
                        <button onClick={() => setPickerMinute(m => m >= 55 ? 0 : m + 5)} className="p-1 text-muted-foreground hover:text-foreground">
                          <ChevronLeft className="w-4 h-4 rotate-90" />
                        </button>
                        <span className="text-2xl font-bold w-10 text-center">{String(pickerMinute).padStart(2, "0")}</span>
                        <button onClick={() => setPickerMinute(m => m <= 0 ? 55 : m - 5)} className="p-1 text-muted-foreground hover:text-foreground">
                          <ChevronRight className="w-4 h-4 rotate-90" />
                        </button>
                      </div>

{/* AM/PM */}
                      <div className="flex flex-col items-center ml-2">
                        <button
                          onClick={() => setPickerPeriod(p => p === "AM" ? "PM" : "AM")}
                          className="px-3 py-1 rounded-lg bg-foreground/10 text-sm font-semibold hover:bg-foreground/20 transition-colors"
                        >
                          {pickerPeriod}
                        </button>
                      </div>
                    </div>
                  </div>
                  <Input
                    placeholder="Location (optional)"
                    value={scheduleLocation}
                    onChange={(e) => setScheduleLocation(e.target.value)}
                  />
                  <Input
                    placeholder="Notes (optional)"
                    value={scheduleNotes}
                    onChange={(e) => setScheduleNotes(e.target.value)}
                  />
                  <div className="flex gap-2 pt-1">
                    <Button variant="outline" className="flex-1" onClick={() => setShowScheduleForm(false)}>Cancel</Button>
                    <Button className="flex-1" onClick={handleAddScheduleItem} disabled={scheduleSaving || !scheduleTitle}>
                      {scheduleSaving ? "Saving..." : "Add Event"}
                    </Button>
                  </div>
                </div>
              </motion.div>
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/casting/casting-detail.tsx"
"use client"

import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import type { Casting } from "@/lib/types"
import { useAuth } from "@/lib/auth-context"
import { ArrowLeft, MapPin, Calendar, DollarSign, Clock, BadgeCheck, Users, Check } from "lucide-react"
import { format, formatDistanceToNow } from "date-fns"

interface CastingDetailProps {
  casting: Casting
  onBack: () => void
}

export function CastingDetail({ casting, onBack }: CastingDetailProps) {
  const { user } = useAuth()
  const [showApplySheet, setShowApplySheet] = useState(false)
  const [applicationMessage, setApplicationMessage] = useState("")
  const [hasApplied, setHasApplied] = useState(false)

const typeLabels = {
    runway: "Runway",
    campaign: "Campaign",
    editorial: "Editorial",
    commercial: "Commercial",
    event: "Event",
    fitting: "Fitting",
  }

const handleApply = () => {
    setHasApplied(true)
    setShowApplySheet(false)
  }

return (
    <div className="pb-24">
      {/* Header Image */}
      {casting.images?.[0] && (
        <div className="relative h-56 bg-muted">
          <img
            src={casting.images[0] || "/placeholder.svg"}
            alt={casting.title}
            className="w-full h-full object-cover"
          />
          <Button
            variant="ghost"
            size="icon"
            className="absolute top-4 left-4 bg-background/80 backdrop-blur-sm"
            onClick={onBack}
          >
            <ArrowLeft className="w-5 h-5" />
          </Button>
        </div>
      )}

{!casting.images?.[0] && (
        <div className="p-4 border-b border-border">
          <Button variant="ghost" size="sm" onClick={onBack}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back
          </Button>
        </div>
      )}

{/* Content */}
      <div className="px-4 py-4 space-y-6">
        {/* Title & Creator */}
        <div>
          <div className="flex items-center gap-2 mb-2">
            <Badge variant="secondary">{typeLabels[casting.type]}</Badge>
            <Badge variant="outline">{casting.status === "active" ? "Active" : "Closed"}</Badge>
          </div>
          <h1 className="text-2xl font-semibold tracking-tight">{casting.title}</h1>
          <button className="flex items-center gap-2 mt-3">
            <Avatar className="w-8 h-8">
              <AvatarImage src={casting.creator.avatar || "/placeholder.svg"} alt={casting.creator.name} />
              <AvatarFallback>{casting.creator.name[0]}</AvatarFallback>
            </Avatar>
            <span className="font-medium text-sm">{casting.creator.name}</span>
            {casting.creator.verified && <BadgeCheck className="w-4 h-4" />}
          </button>
        </div>

{/* Key Details */}
        <div className="grid grid-cols-2 gap-4">
          <div className="flex items-start gap-3">
            <div className="p-2 bg-muted rounded-lg">
              <MapPin className="w-4 h-4" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Location</p>
              <p className="font-medium text-sm">{casting.location}</p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="p-2 bg-muted rounded-lg">
              <Calendar className="w-4 h-4" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Dates</p>
              <p className="font-medium text-sm">
                {format(casting.dates.start, "MMM d")} - {format(casting.dates.end, "MMM d")}
              </p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="p-2 bg-muted rounded-lg">
              <DollarSign className="w-4 h-4" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Payment</p>
              <p className="font-medium text-sm">
                {casting.pay.type === "tbd" ? "TBD" : `${casting.pay.amount.toLocaleString()} ${casting.pay.currency}`}
              </p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="p-2 bg-muted rounded-lg">
              <Clock className="w-4 h-4" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Deadline</p>
              <p className="font-medium text-sm">{formatDistanceToNow(casting.deadline, { addSuffix: true })}</p>
            </div>
          </div>
        </div>

{/* Description */}
        <div>
          <h3 className="font-semibold mb-2">About this casting</h3>
          <p className="text-sm text-muted-foreground leading-relaxed">{casting.description}</p>
        </div>

{/* Requirements */}
        <div>
          <h3 className="font-semibold mb-2">Requirements</h3>
          <div className="space-y-2 text-sm">
            {casting.requirements.gender && casting.requirements.gender !== "any" && (
              <p>
                <span className="text-muted-foreground">Gender:</span>{" "}
                <span className="capitalize">{casting.requirements.gender}</span>
              </p>
            )}
            {casting.requirements.heightRange && (
              <p>
                <span className="text-muted-foreground">Height:</span> {casting.requirements.heightRange.min} -{" "}
                {casting.requirements.heightRange.max}
              </p>
            )}
            {casting.requirements.ageRange && (
              <p>
                <span className="text-muted-foreground">Age:</span> {casting.requirements.ageRange.min} -{" "}
                {casting.requirements.ageRange.max} years
              </p>
            )}
            {casting.requirements.experience && casting.requirements.experience.length > 0 && (
              <div>
                <span className="text-muted-foreground">Experience:</span>
                <div className="flex flex-wrap gap-1 mt-1">
                  {casting.requirements.experience.map((exp) => (
                    <Badge key={exp} variant="secondary" className="capitalize">
                      {exp}
                    </Badge>
                  ))}
                </div>
              </div>
            )}
            {casting.requirements.look && casting.requirements.look.length > 0 && (
              <div>
                <span className="text-muted-foreground">Look:</span>
                <div className="flex flex-wrap gap-1 mt-1">
                  {casting.requirements.look.map((look) => (
                    <Badge key={look} variant="secondary" className="capitalize">
                      {look}
                    </Badge>
                  ))}
                </div>
              </div>
            )}
            {casting.requirements.other && <p className="text-muted-foreground">{casting.requirements.other}</p>}
          </div>
        </div>

{/* Stats */}
        <div className="flex items-center gap-4 text-sm text-muted-foreground">
          <span className="flex items-center gap-1">
            <Users className="w-4 h-4" />
            {casting.applicationsCount} applications
          </span>
          <span>{casting.shortlistedCount} shortlisted</span>
        </div>
      </div>

{/* Apply Button - Fixed */}
      {user?.role === "model" && (
        <div className="fixed bottom-16 left-0 right-0 p-4 bg-background border-t border-border safe-area-bottom">
          <Button className="w-full h-12" size="lg" onClick={() => setShowApplySheet(true)} disabled={hasApplied}>
            {hasApplied ? (
              <>
                <Check className="w-4 h-4 mr-2" />
                Applied
              </>
            ) : (
              "Apply Now"
            )}
          </Button>
        </div>
      )}

{/* Apply Sheet */}
      <Sheet open={showApplySheet} onOpenChange={setShowApplySheet}>
        <SheetContent side="bottom" className="rounded-t-xl">
          <SheetHeader className="text-left">
            <SheetTitle>Apply for {casting.title}</SheetTitle>
          </SheetHeader>
          <div className="py-4 space-y-4">
            <div>
              <label className="text-sm font-medium mb-2 block">Message (optional)</label>
              <Textarea
                value={applicationMessage}
                onChange={(e) => setApplicationMessage(e.target.value)}
                placeholder="Tell them why you're a great fit..."
                rows={4}
              />
            </div>
            <p className="text-xs text-muted-foreground">
              Your profile, portfolio, and comp card will be shared with the casting creator.
            </p>
            <Button className="w-full h-12" onClick={handleApply}>
              Submit Application
            </Button>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/castings/casting-detail.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { useRouter } from "next/navigation"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { Card } from "@/components/ui/card"
import type { Casting, User, CastingApplication, ModelMatch } from "@/lib/types"
import { useAuth } from "@/lib/auth-context"
import { useStore } from "@/lib/store-context"
import { mockUsers, getUserLimits } from "@/lib/mock-data"
import { FitScorePanel } from "@/components/ai/fit-score-panel"
import { calculateFitScore } from "@/lib/ai-matching"
import {
  ArrowLeft,
  MapPin,
  Calendar,
  DollarSign,
  Clock,
  BadgeCheck,
  Users,
  Check,
  ChevronRight,
  Shield,
  Scan,
  MessageSquare,
  AlertCircle,
  Bookmark,
  Share2,
  CheckSquare,
  Square,
  ListChecks,
} from "lucide-react"
import { api } from "@/lib/api-client"
import { CastingAnalytics } from "@/components/analytics/casting-analytics"
import { format, formatDistanceToNow } from "date-fns"

interface CastingDetailProps {
  casting: Casting
  onBack: () => void
  onApply?: () => void
  onViewProfile?: (user: User) => void
  onViewCasting?: (casting: Casting) => void
  onOpenRoom?: () => void
}

export function CastingDetail({ casting, onBack, onApply, onViewProfile, onViewCasting, onOpenRoom }: CastingDetailProps) {
  const router = useRouter()
  const { user } = useAuth()
  const { getActiveCastings, getApplicationsForModel, getApplicationsForCasting, addApplication, addNotification } =
    useStore()
  const [showApplySheet, setShowApplySheet] = useState(false)
  const [applyStep, setApplyStep] = useState(1)
  const [applicationMessage, setApplicationMessage] = useState("")
  const [selectedPortfolio, setSelectedPortfolio] = useState<string[]>([])
  const [dbPortfolioImages, setDbPortfolioImages] = useState<string[]>([])
  const [showAiMatches, setShowAiMatches] = useState(false)
  const [submissionStatus, setSubmissionStatus] = useState<string | null>(null)
  const [saved, setSaved] = useState(false)
  const [applyLoading, setApplyLoading] = useState(false)
  const [savedLoading, setSavedLoading] = useState(false)
  const [aiMatchesFromApi, setAiMatchesFromApi] = useState<ModelMatch[]>([])
  const [aiMatchesLoading, setAiMatchesLoading] = useState(false)
  const [invitingId, setInvitingId] = useState<string | null>(null)
  const [bulkSelectMode, setBulkSelectMode] = useState(false)
  const [selectedSubmissionIds, setSelectedSubmissionIds] = useState<string[]>([])
  const [bulkActionLoading, setBulkActionLoading] = useState(false)

const isModel = user?.role === "model"
  const isAgency = user?.role === "agency"
  const isBrand = user?.role === "brand"
  const isClient = user?.role === "client"
  const isCreator = casting.creatorId === user?.id

const userApplications = user ? getApplicationsForModel(user.id) : []
  const existingApplication = userApplications.find((a) => a.castingId === casting.id)
  const hasApplied = submissionStatus !== null || !!existingApplication
  const appliedStatus = submissionStatus || existingApplication?.status

const fetchSubmissionAndSaved = useCallback(async () => {
    if (!user) return
    const [subRes, savedRes] = await Promise.all([
      api.getCastingSubmission(casting.id),
      api.getCastingSaved(casting.id),
    ])
    const subData = subRes.data as { submission?: { status: string } } | undefined
    const savedData = savedRes.data as { saved?: boolean } | undefined
    if (subData?.submission) setSubmissionStatus(subData.submission.status)
    if (savedData?.saved !== undefined) setSaved(savedData.saved)
  }, [casting.id, user])

useEffect(() => {
    fetchSubmissionAndSaved()
    // Track casting view
    api.trackCastingView(casting.id)
    // Poll for status updates every 30s (so model sees brand-side changes)
    const interval = setInterval(fetchSubmissionAndSaved, 30000)
    return () => clearInterval(interval)
  }, [fetchSubmissionAndSaved, casting.id])

const handleShare = () => {
    const url = typeof window !== "undefined" ? `${window.location.origin}/castings/${casting.id}` : ""
    if (navigator.share) {
      navigator.share({ title: casting.title, url }).catch(() => {
        navigator.clipboard?.writeText(url)
      })
    } else {
      navigator.clipboard?.writeText(url)
    }
  }

const handleBookmark = async () => {
    if (savedLoading || !user) return
    setSavedLoading(true)
    if (saved) {
      await api.unsaveCasting(casting.id)
      setSaved(false)
    } else {
      await api.saveCasting(casting.id)
      setSaved(true)
    }
    setSavedLoading(false)
  }

const typeLabels: Record<string, string> = {
    runway: "Runway",
    campaign: "Campaign",
    editorial: "Editorial",
    commercial: "Commercial",
    event: "Event",
    fitting: "Fitting",
  }

const aiMatches = isBrand || isAgency || isCreator ? aiMatchesFromApi : []

const userLimits = user ? getUserLimits(user.id) : null
  const weeklyLimitReached = userLimits && userLimits.weeklyApplications >= userLimits.weeklyApplicationsMax

const similarCastings = getActiveCastings()
    .filter((c) => c.id !== casting.id && c.type === casting.type)
    .slice(0, 3)

const agencyRoster = isAgency && user?.roster ? mockUsers.filter((u) => user.roster?.includes(u.id)) : []

const isVerifiedOnlyCasting = casting.settings?.verifiedOnly
  const requiresDigitalTwin = casting.settings?.requireDigitalTwin
  const canApply =
    !isVerifiedOnlyCasting ||
    user?.verificationLevel === "luxlane_verified" ||
    user?.verificationLevel === "agency_verified"
  const hasDigitalTwin = user?.digitalTwin?.status === "complete"
  const meetsDigitalTwinReq = !requiresDigitalTwin || hasDigitalTwin

const [applyError, setApplyError] = useState<string | null>(null)

const handleApply = async () => {
    if (!user) return
    setApplyLoading(true)
    setApplyError(null)
    const res = await api.applyToCasting(casting.id, { note: applicationMessage })
    setApplyLoading(false)
    if (res.error) {
      if (res.error.includes("Already applied")) {
        setSubmissionStatus("applied")
        setShowApplySheet(false)
      } else {
        setApplyError(res.error)
      }
      return
    }
    setShowApplySheet(false)
    setSubmissionStatus("applied")
    const applyData = res.data as { submission?: { id: string } } | undefined
    addApplication({
      id: applyData?.submission?.id ?? `app-${Date.now()}`,
      castingId: casting.id,
      casting,
      modelId: user.id,
      model: user,
      status: "pending",
      message: applicationMessage,
      portfolioSelection: selectedPortfolio,
      submittedAt: new Date(),
      updatedAt: new Date(),
    })
    addNotification({
      id: `notif-${Date.now()}`,
      userId: casting.creatorId,
      type: "message",
      title: "New Application",
      message: `${user.name} has applied to ${casting.title}`,
      read: false,
      actionUrl: `/castings/${casting.id}`,
      metadata: { castingId: casting.id },
      createdAt: new Date(),
    })
    setShowApplySheet(false)
    setApplyStep(1)
    setApplicationMessage("")
    setSelectedPortfolio([])
  }

// Application status display
  const getStatusDisplay = (status: string) => {
    switch (status) {
      case "pending": return { label: "Application Sent", color: "text-blue-400", bgColor: "bg-blue-500/10 border-blue-500/20" }
      case "applied": return { label: "Application Sent", color: "text-blue-400", bgColor: "bg-blue-500/10 border-blue-500/20" }
      case "under_review": return { label: "Under Review", color: "text-amber-400", bgColor: "bg-amber-500/10 border-amber-500/20" }
      case "shortlisted": return { label: "Shortlisted", color: "text-emerald-400", bgColor: "bg-emerald-500/10 border-emerald-500/20" }
      case "offered": return { label: "Offer Received", color: "text-purple-400", bgColor: "bg-purple-500/10 border-purple-500/20" }
      case "accepted": return { label: "Accepted", color: "text-green-400", bgColor: "bg-green-500/10 border-green-500/20" }
      case "confirmed": return { label: "Booking Confirmed", color: "text-green-400", bgColor: "bg-green-500/10 border-green-500/20" }
      case "declined": return { label: "Declined", color: "text-zinc-400", bgColor: "bg-zinc-500/10 border-zinc-500/20" }
      case "rejected": return { label: "Not Selected", color: "text-red-400", bgColor: "bg-red-500/10 border-red-500/20" }
      default: return { label: status, color: "text-muted-foreground", bgColor: "bg-muted" }
    }
  }

const [selectedModels, setSelectedModels] = useState<string[]>([])

const handleAgencySubmit = () => {
    if (!user || selectedModels.length === 0) return

selectedModels.forEach((modelId) => {
      const model = mockUsers.find((u) => u.id === modelId)
      if (!model) return

const newApplication: CastingApplication = {
        id: `app-${Date.now()}-${modelId}`,
        castingId: casting.id,
        casting: casting,
        modelId: modelId,
        model: model,
        agencyId: user.id,
        status: "pending",
        message: `Submitted by ${user.companyName || user.name}`,
        submittedAt: new Date(),
        updatedAt: new Date(),
      }

addApplication(newApplication)
    })

// Notify casting creator
    addNotification({
      id: `notif-${Date.now()}`,
      userId: casting.creatorId,
      type: "message",
      title: "New Agency Submission",
      message: `${user.companyName || user.name} submitted ${selectedModels.length} models to ${casting.title}`,
      read: false,
      actionUrl: `/castings/${casting.id}`,
      metadata: { castingId: casting.id },
      createdAt: new Date(),
    })

setShowApplySheet(false)
    setSelectedModels([])
  }

const getActionButton = () => {
    if (isCreator) {
      const submissions = getApplicationsForCasting(casting.id)

if (bulkSelectMode && selectedSubmissionIds.length > 0) {
        return (
          <div className="flex items-center gap-2">
            <Badge variant="secondary" className="shrink-0">
              {selectedSubmissionIds.length} selected
            </Badge>
            <Button
              className="flex-1 h-12 bg-amber-600 hover:bg-amber-700"
              size="lg"
              disabled={bulkActionLoading}
              onClick={async () => {
                setBulkActionLoading(true)
                await api.bulkAction(casting.id, { action: "shortlist", submissionIds: selectedSubmissionIds })
                setBulkActionLoading(false)
                setSelectedSubmissionIds([])
                setBulkSelectMode(false)
              }}
            >
              Shortlist Selected
            </Button>
            <Button
              variant="outline"
              className="flex-1 h-12 bg-transparent border-red-500/50 text-red-400 hover:bg-red-500/10"
              size="lg"
              disabled={bulkActionLoading}
              onClick={async () => {
                setBulkActionLoading(true)
                await api.bulkAction(casting.id, { action: "reject", submissionIds: selectedSubmissionIds })
                setBulkActionLoading(false)
                setSelectedSubmissionIds([])
                setBulkSelectMode(false)
              }}
            >
              Reject Selected
            </Button>
          </div>
        )
      }

return (
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="lg"
            className={`h-12 ${bulkSelectMode ? "bg-white text-zinc-950" : "bg-transparent"}`}
            onClick={() => {
              setBulkSelectMode((v) => !v)
              setSelectedSubmissionIds([])
            }}
          >
            <ListChecks className="w-4 h-4 mr-1" />
            Select
          </Button>
          <Button className="flex-1 h-12" size="lg">
            Review Submissions
            <Badge variant="secondary" className="ml-2">
              {submissions.length}
            </Badge>
          </Button>
          {onOpenRoom && (
            <Button variant="outline" size="lg" className="h-12 bg-transparent" onClick={onOpenRoom}>
              <MessageSquare className="w-4 h-4" />
            </Button>
          )}
        </div>
      )
    }

if (isModel) {
      if (hasApplied) {
        const statusInfo = getStatusDisplay(appliedStatus || "applied")
        const statusMessage = (() => {
          switch (appliedStatus) {
            case "pending": case "applied": return "The casting director will review your application."
            case "shortlisted": return "You've been shortlisted! Stay tuned for next steps."
            case "offered": return "You've received an offer! Check Inbox → Bookings to respond."
            case "accepted": return "You accepted the offer. Awaiting brand confirmation."
            case "confirmed": return "Your booking is confirmed! Enter the casting room to coordinate."
            case "declined": return "You declined this offer."
            case "rejected": return "This casting wasn't a match. Keep applying!"
            default: return "Your application is being processed."
          }
        })()

return (
          <div className="space-y-2">
            <Card className={`p-4 border ${statusInfo.bgColor}`}>
              <div className="flex items-center gap-3">
                <Check className={`w-5 h-5 ${statusInfo.color}`} />
                <div className="flex-1">
                  <p className={`font-medium ${statusInfo.color}`}>{statusInfo.label}</p>
                  <p className="text-xs text-muted-foreground mt-0.5">{statusMessage}</p>
                </div>
              </div>
            </Card>
            {/* Enter Casting Room button for confirmed bookings */}
            {appliedStatus === "confirmed" && onOpenRoom && (
              <Button className="w-full h-12" size="lg" onClick={onOpenRoom}>
                <MessageSquare className="w-4 h-4 mr-2" />
                Enter Casting Room
              </Button>
            )}
          </div>
        )
      }

if (!canApply) {
        return (
          <div className="space-y-2">
            <Button className="w-full h-12" size="lg" disabled>
              <Shield className="w-4 h-4 mr-2" />
              Verified Models Only
            </Button>
            <p className="text-xs text-center text-muted-foreground">
              This casting requires verification. Get verified in Settings.
            </p>
          </div>
        )
      }

if (!meetsDigitalTwinReq) {
        return (
          <div className="space-y-2">
            <Button className="w-full h-12" size="lg" disabled>
              <Scan className="w-4 h-4 mr-2" />
              Digital Twin Required
            </Button>
            <p className="text-xs text-center text-muted-foreground">Create your Digital Twin in Settings to apply.</p>
          </div>
        )
      }

if (weeklyLimitReached) {
        return (
          <div className="space-y-2">
            <Button className="w-full h-12" size="lg" disabled>
              <AlertCircle className="w-4 h-4 mr-2" />
              Weekly Limit Reached
            </Button>
            <p className="text-xs text-center text-muted-foreground">
              You've reached your {userLimits?.weeklyApplicationsMax} applications this week.
            </p>
          </div>
        )
      }

return (
        <div className="space-y-2">
          <Button
            className="w-full h-12"
            size="lg"
            onClick={() => setShowApplySheet(true)}
            disabled={casting.status !== "active" || applyLoading}
          >
            {applyLoading ? "Applying…" : "Apply Now"}
          </Button>
          {userLimits && (
            <p className="text-xs text-center text-muted-foreground">
              {userLimits.weeklyApplicationsMax - userLimits.weeklyApplications} applications remaining this week
            </p>
          )}
        </div>
      )
    }

if (isAgency) {
      return (
        <Button className="w-full h-12" size="lg" onClick={() => setShowApplySheet(true)}>
          Submit Models
        </Button>
      )
    }

if (isBrand || isClient) {
      return (
        <Button variant="outline" className="w-full h-12 bg-transparent" size="lg">
          Request Info
        </Button>
      )
    }

return null
  }

return (
    <div className="min-h-screen bg-background pb-24">
      {/* Header Image */}
      {casting.images?.[0] && (
        <div className="relative h-56 bg-muted">
          <img
            src={casting.images[0] || "/placeholder.svg"}
            alt={casting.title}
            className="w-full h-full object-cover"
          />
          <div className="absolute top-4 left-0 right-0 flex items-center justify-between px-2">
            <Button
              variant="ghost"
              size="icon"
              className="bg-background/80 backdrop-blur-sm"
              onClick={onBack}
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
            <div className="flex gap-1">
              <Button
                variant="ghost"
                size="icon"
                className={`bg-background/80 backdrop-blur-sm ${saved ? "text-foreground" : ""}`}
                onClick={handleBookmark}
                disabled={savedLoading}
              >
                <Bookmark className={`w-5 h-5 ${saved ? "fill-current" : ""}`} />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="bg-background/80 backdrop-blur-sm"
                onClick={handleShare}
              >
                <Share2 className="w-5 h-5" />
              </Button>
            </div>
          </div>
        </div>
      )}

{!casting.images?.[0] && (
        <div className="p-4 border-b border-border flex items-center justify-between">
          <Button variant="ghost" size="sm" onClick={onBack}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back
          </Button>
          <div className="flex gap-1">
            <Button variant="ghost" size="icon" className={saved ? "text-foreground" : ""} onClick={handleBookmark} disabled={savedLoading}>
              <Bookmark className={`w-5 h-5 ${saved ? "fill-current" : ""}`} />
            </Button>
            <Button variant="ghost" size="icon" onClick={handleShare}>
              <Share2 className="w-5 h-5" />
            </Button>
          </div>
        </div>
      )}

{/* Content */}
      <div className="px-4 py-4 space-y-6">
        {/* Title & Creator */}
        <div>
          <div className="flex items-center gap-2 mb-2 flex-wrap">
            <Badge variant="secondary">{typeLabels[casting.type]}</Badge>
            <Badge variant="outline">{casting.status === "active" ? "Active" : "Closed"}</Badge>
            {isVerifiedOnlyCasting && (
              <Badge className="bg-emerald-500/10 text-emerald-600">
                <Shield className="w-3 h-3 mr-0.5" />
                Verified Only
              </Badge>
            )}
            {requiresDigitalTwin && (
              <Badge className="bg-violet-500/10 text-violet-600">
                <Scan className="w-3 h-3 mr-0.5" />
                Twin Required
              </Badge>
            )}
          </div>
          <h1 className="text-2xl font-semibold tracking-tight">{casting.title}</h1>
          <button className="flex items-center gap-2 mt-3" onClick={() => onViewProfile?.(casting.creator)}>
            <Avatar className="w-8 h-8">
              <AvatarImage src={casting.creator.avatar || "/placeholder.svg"} alt={casting.creator.name} />
              <AvatarFallback>{casting.creator.name[0]}</AvatarFallback>
            </Avatar>
            <span className="font-medium text-sm">{casting.creator.name}</span>
            {casting.creator.verified && <BadgeCheck className="w-4 h-4" />}
            <ChevronRight className="w-4 h-4 text-muted-foreground" />
          </button>

{isModel && user && (
            <div className="mt-3 p-3 rounded-lg bg-muted/50">
              <p className="text-xs text-muted-foreground mb-1">Your fit</p>
              <p className="text-2xl font-bold">
                {(() => {
                  const fit = calculateFitScore(user, casting)
                  return `${fit.total}%`
                })()}
              </p>
            </div>
          )}
        </div>

{/* Submissions list with bulk select (creator only) */}
        {isCreator && (() => {
          const submissions = getApplicationsForCasting(casting.id)
          if (submissions.length === 0) return null
          return (
            <div>
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold">Submissions</h3>
                {bulkSelectMode && submissions.length > 0 && (
                  <button
                    type="button"
                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                    onClick={() => {
                      if (selectedSubmissionIds.length === submissions.length) {
                        setSelectedSubmissionIds([])
                      } else {
                        setSelectedSubmissionIds(submissions.map((s) => s.id))
                      }
                    }}
                  >
                    {selectedSubmissionIds.length === submissions.length ? "Deselect all" : "Select all"}
                  </button>
                )}
              </div>
              <div className="space-y-2">
                {submissions.map((submission) => {
                  const isSelected = selectedSubmissionIds.includes(submission.id)
                  return (
                    <Card
                      key={submission.id}
                      className={`p-3 flex items-center gap-3 transition-colors ${
                        bulkSelectMode ? "cursor-pointer" : ""
                      } ${isSelected ? "bg-muted border-foreground" : ""}`}
                      onClick={() => {
                        if (!bulkSelectMode) return
                        if (isSelected) {
                          setSelectedSubmissionIds((prev) => prev.filter((id) => id !== submission.id))
                        } else {
                          setSelectedSubmissionIds((prev) => [...prev, submission.id])
                        }
                      }}
                    >
                      {bulkSelectMode && (
                        <div className="shrink-0">
                          {isSelected ? (
                            <CheckSquare className="w-5 h-5 text-foreground" />
                          ) : (
                            <Square className="w-5 h-5 text-muted-foreground" />
                          )}
                        </div>
                      )}
                      <Avatar className="w-10 h-10 shrink-0">
                        <AvatarImage src={submission.model?.avatar || "/placeholder.svg"} alt={submission.model?.name || "Model"} />
                        <AvatarFallback>{submission.model?.name?.[0] || "M"}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-sm truncate">{submission.model?.name || "Unknown"}</p>
                        {submission.message && (
                          <p className="text-xs text-muted-foreground truncate">{submission.message}</p>
                        )}
                      </div>
                      <Badge
                        variant="outline"
                        className={`shrink-0 capitalize text-xs ${
                          submission.status === "shortlisted"
                            ? "bg-amber-500/10 text-amber-600"
                            : submission.status === "accepted" || submission.status === "offered"
                              ? "bg-emerald-500/10 text-emerald-600"
                              : submission.status === "rejected"
                                ? "bg-red-500/10 text-red-600"
                                : ""
                        }`}
                      >
                        {submission.status}
                      </Badge>
                    </Card>
                  )
                })}
              </div>
            </div>
          )
        })()}

{(isBrand || isAgency || isCreator) && aiMatchesLoading && (
          <p className="text-sm text-muted-foreground py-4">Loading AI matches…</p>
        )}
        {(isBrand || isAgency || isCreator) && !aiMatchesLoading && aiMatches.length > 0 && (
          <FitScorePanel
            matches={aiMatches}
            onViewProfile={(u) => onViewProfile?.(u)}
            onInvite={async (u) => {
              if (invitingId || !u?.id) return
              setInvitingId(u.id)
              const res = await api.inviteModelToCasting(casting.id, u.id)
              setInvitingId(null)
              if (res.error) return
              setAiMatchesFromApi((prev) => prev.filter((m) => m.model.id !== u.id))
            }}
            title="AI Top Matches"
          />
        )}

{/* Casting Analytics — Creator only */}
        {isCreator && (
          <CastingAnalytics castingId={casting.id} />
        )}

{/* Similar Castings */}
        {similarCastings.length > 0 && (
          <div>
            <h3 className="font-semibold mb-3">Similar Castings</h3>
            <div className="space-y-2">
              {similarCastings.map((c) => (
                <Card
                  key={c.id}
                  className="p-3 cursor-pointer hover:bg-muted/30 transition-colors"
                  onClick={() => onViewCasting?.(c)}
                >
                  <div className="flex items-center gap-3">
                    <Avatar className="w-10 h-10">
                      <AvatarImage src={c.creator.avatar || "/placeholder.svg"} alt={c.creator.name} />
                      <AvatarFallback>{c.creator.name[0]}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-sm truncate">{c.title}</p>
                      <p className="text-xs text-muted-foreground">{c.creator.name}</p>
                    </div>
                    <ChevronRight className="w-4 h-4 text-muted-foreground" />
                  </div>
                </Card>
              ))}
            </div>
          </div>
        )}
      </div>

{/* Fixed Action Bar — sits above bottom nav */}
      <div className="fixed bottom-14 left-0 right-0 p-4 bg-background border-t border-border z-40">{getActionButton()}</div>

{/* Apply Sheet - Model */}
      {isModel && (
        <Sheet open={showApplySheet} onOpenChange={(open) => {
          setShowApplySheet(open)
          if (open && user) {
            api.getMedia(user.id, "PORTFOLIO").then((res) => {
              const data = res.data as { media?: Array<{ url: string }> } | undefined
              if (data?.media) setDbPortfolioImages(data.media.map((m) => m.url))
            })
          }
        }}>
          <SheetContent side="bottom" className="h-[90vh] rounded-t-2xl overflow-y-auto">
            <SheetHeader>
              <SheetTitle>
                {applyStep === 1 && "Review Your Profile"}
                {applyStep === 2 && "Select Portfolio"}
                {applyStep === 3 && "Confirm Availability"}
                {applyStep === 4 && "Submit Application"}
              </SheetTitle>
            </SheetHeader>

{/* Step indicators */}
            <div className="flex gap-1 mt-4 mb-6">
              {[1, 2, 3, 4].map((s) => (
                <div
                  key={s}
                  className={`flex-1 h-1 rounded-full transition-colors ${
                    s <= applyStep ? "bg-foreground" : "bg-muted"
                  }`}
                />
              ))}
            </div>

<div className="space-y-6">
              {/* Step 1: Profile Review */}
              {applyStep === 1 && (
                <>
                  <p className="text-sm text-muted-foreground">
                    This info will be sent with your application. Make sure it's up to date.
                  </p>

<Card className="p-4 space-y-3">
                    <div className="flex items-center gap-3">
                      <Avatar className="w-14 h-14">
                        <AvatarImage src={user?.avatar || "/placeholder.svg"} />
                        <AvatarFallback>{user?.name?.[0]}</AvatarFallback>
                      </Avatar>
                      <div>
                        <p className="font-semibold">{user?.name}</p>
                        <p className="text-sm text-muted-foreground">@{user?.username}</p>
                      </div>
                    </div>

<div className="grid grid-cols-2 gap-3 pt-2 border-t border-border">
                      <div>
                        <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Location</p>
                        <p className="text-sm font-medium">{user?.location || "Not set"}</p>
                      </div>
                      <div>
                        <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Height</p>
                        <p className="text-sm font-medium">{user?.measurements?.height || "Not set"}</p>
                      </div>
                      <div>
                        <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Hair</p>
                        <p className="text-sm font-medium">{user?.measurements?.hairColor || "Not set"}</p>
                      </div>
                      <div>
                        <p className="text-[10px] uppercase tracking-wider text-muted-foreground">Eyes</p>
                        <p className="text-sm font-medium">{user?.measurements?.eyeColor || "Not set"}</p>
                      </div>
                    </div>

{user?.bio && (
                      <div className="pt-2 border-t border-border">
                        <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1">Bio</p>
                        <p className="text-sm text-muted-foreground line-clamp-3">{user.bio}</p>
                      </div>
                    )}
                  </Card>

{/* Casting requirements check */}
                  <Card className="p-4">
                    <h4 className="font-medium text-sm mb-3">Requirements Check</h4>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2 text-sm">
                        {user?.verified ? (
                          <Check className="w-4 h-4 text-emerald-500" />
                        ) : (
                          <AlertCircle className="w-4 h-4 text-muted-foreground" />
                        )}
                        <span className={user?.verified ? "" : "text-muted-foreground"}>Verified profile</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm">
                        {(dbPortfolioImages.length > 0 || (user?.portfolio?.length ?? 0) > 0) ? (
                          <Check className="w-4 h-4 text-emerald-500" />
                        ) : (
                          <AlertCircle className="w-4 h-4 text-amber-500" />
                        )}
                        <span>Portfolio ({dbPortfolioImages.length || user?.portfolio?.length || 0} photos)</span>
                      </div>
                      {requiresDigitalTwin && (
                        <div className="flex items-center gap-2 text-sm">
                          {meetsDigitalTwinReq ? (
                            <Check className="w-4 h-4 text-emerald-500" />
                          ) : (
                            <AlertCircle className="w-4 h-4 text-red-500" />
                          )}
                          <span className={meetsDigitalTwinReq ? "" : "text-red-400"}>Digital Twin required</span>
                        </div>
                      )}
                    </div>
                  </Card>

<Button className="w-full" onClick={() => setApplyStep(2)}>
                    Continue
                  </Button>
                </>
              )}

{/* Step 2: Portfolio Selection */}
              {applyStep === 2 && (
                <>
                  <p className="text-sm text-muted-foreground">
                    Select photos to include with your application ({selectedPortfolio.length} selected)
                  </p>
                  <div className="grid grid-cols-3 gap-2">
                    {(dbPortfolioImages.length > 0 ? dbPortfolioImages : user?.portfolio || []).map((img, i) => (
                      <button
                        key={i}
                        onClick={() => {
                          if (selectedPortfolio.includes(img)) {
                            setSelectedPortfolio((prev) => prev.filter((p) => p !== img))
                          } else {
                            setSelectedPortfolio((prev) => [...prev, img])
                          }
                        }}
                        className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors relative ${
                          selectedPortfolio.includes(img) ? "border-foreground" : "border-transparent"
                        }`}
                      >
                        <img
                          src={img || "/placeholder.svg"}
                          alt={`Portfolio ${i + 1}`}
                          className="w-full h-full object-cover"
                        />
                        {selectedPortfolio.includes(img) && (
                          <div className="absolute top-1 right-1 w-5 h-5 bg-foreground rounded-full flex items-center justify-center">
                            <Check className="w-3 h-3 text-background" />
                          </div>
                        )}
                      </button>
                    ))}
                  </div>
                  {dbPortfolioImages.length === 0 && (user?.portfolio || []).length === 0 && (
                    <p className="text-center text-muted-foreground text-sm py-4">
                      No portfolio photos yet. You can skip this step.
                    </p>
                  )}
                  <div className="flex gap-2">
                    <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setApplyStep(1)}>
                      Back
                    </Button>
                    <Button className="flex-1" onClick={() => setApplyStep(3)}>
                      Continue
                    </Button>
                  </div>
                </>
              )}

{/* Step 3: Availability */}
              {applyStep === 3 && (
                <>
                  <Card className="p-4">
                    <h4 className="font-medium mb-3">Casting Schedule</h4>
                    <div className="flex items-center gap-3 mb-3">
                      <Calendar className="w-5 h-5 text-muted-foreground" />
                      <div>
                        <p className="font-medium">
                          {format(casting.dates.start, "MMM d")} – {format(casting.dates.end, "MMM d, yyyy")}
                        </p>
                        <p className="text-sm text-muted-foreground">{casting.location}</p>
                      </div>
                    </div>
                    {casting.pay && (
                      <div className="flex items-center gap-3">
                        <DollarSign className="w-5 h-5 text-muted-foreground" />
                        <div>
                          <p className="font-medium">
                            €{casting.pay.amount}/{casting.pay.type}
                          </p>
                        </div>
                      </div>
                    )}
                  </Card>

<p className="text-sm text-muted-foreground">
                    By continuing, you confirm you are available for these dates and location.
                  </p>

<div className="flex gap-2">
                    <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setApplyStep(2)}>
                      Back
                    </Button>
                    <Button className="flex-1" onClick={() => setApplyStep(4)}>
                      I'm Available
                    </Button>
                  </div>
                </>
              )}

{/* Step 4: Note + Submit */}
              {applyStep === 4 && (
                <>
                  <div>
                    <h4 className="font-medium mb-3">Cover Note</h4>
                    <Textarea
                      placeholder="Tell the casting director why you're perfect for this role..."
                      value={applicationMessage}
                      onChange={(e) => setApplicationMessage(e.target.value)}
                      className="min-h-[120px]"
                    />
                    <p className="text-xs text-muted-foreground mt-1">Optional but recommended</p>
                  </div>

{/* Application summary */}
                  <Card className="p-4">
                    <h4 className="font-medium text-sm mb-2">Application Summary</h4>
                    <div className="space-y-1 text-sm text-muted-foreground">
                      <p>📋 Profile info included</p>
                      <p>🖼 {selectedPortfolio.length} portfolio photo{selectedPortfolio.length !== 1 ? "s" : ""}</p>
                      <p>📅 Availability confirmed</p>
                      {applicationMessage.trim() && <p>💬 Cover note included</p>}
                    </div>
                  </Card>

{applyError && (
                    <p className="text-sm text-red-500 text-center">{applyError}</p>
                  )}

<div className="flex gap-2">
                    <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setApplyStep(3)}>
                      Back
                    </Button>
                    <Button className="flex-1" onClick={handleApply} disabled={applyLoading}>
                      {applyLoading ? "Submitting…" : "Submit Application"}
                    </Button>
                  </div>
                </>
              )}
            </div>
          </SheetContent>
        </Sheet>
      )}

{/* Submit Sheet - Agency */}
      {isAgency && (
        <Sheet open={showApplySheet} onOpenChange={setShowApplySheet}>
          <SheetContent side="bottom" className="h-[85vh] rounded-t-2xl">
            <SheetHeader>
              <SheetTitle>Submit Models to {casting.title}</SheetTitle>
            </SheetHeader>
            <div className="mt-6 space-y-4">
              <p className="text-sm text-muted-foreground">
                Select models from your roster to submit. Max {casting.settings?.maxSubmissionsPerAgency || 5} per
                casting.
              </p>
              {agencyRoster.length > 0 ? (
                <div className="space-y-2">
                  {agencyRoster.map((model) => {
                    const isSelected = selectedModels.includes(model.id)
                    return (
                      <Card
                        key={model.id}
                        className={`p-3 flex items-center gap-3 cursor-pointer transition-colors ${isSelected ? "bg-muted border-foreground" : ""}`}
                        onClick={() => {
                          if (isSelected) {
                            setSelectedModels((prev) => prev.filter((id) => id !== model.id))
                          } else if (selectedModels.length < (casting.settings?.maxSubmissionsPerAgency || 5)) {
                            setSelectedModels((prev) => [...prev, model.id])
                          }
                        }}
                      >
                        <Avatar className="w-12 h-12">
                          <AvatarImage src={model.avatar || "/placeholder.svg"} alt={model.name} />
                          <AvatarFallback>{model.name[0]}</AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <span className="font-medium">{model.name}</span>
                            {model.verified && <BadgeCheck className="w-4 h-4" />}
                          </div>
                          <p className="text-sm text-muted-foreground">
                            {model.measurements?.height} • {model.location}
                          </p>
                        </div>
                        {isSelected && <Check className="w-5 h-5" />}
                      </Card>
                    )
                  })}
                </div>
              ) : (
                <p className="text-center py-8 text-muted-foreground">No models in your roster</p>
              )}

{selectedModels.length > 0 && (
                <Button className="w-full h-12" onClick={handleAgencySubmit}>
                  Submit {selectedModels.length} Model{selectedModels.length > 1 ? "s" : ""}
                </Button>
              )}
            </div>
          </SheetContent>
        </Sheet>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/castings/castings-hub.tsx"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/lib/auth-context"
import { useStore } from "@/lib/store-context"
import type { Casting } from "@/lib/types"
import { Search, Plus, SlidersHorizontal, X, MapPin, DollarSign } from "lucide-react"

interface CastingsHubProps {
  onViewCasting: (casting: Casting) => void
  onCreateCasting?: () => void
}

export function CastingsHub({ onViewCasting, onCreateCasting }: CastingsHubProps) {
  const { user } = useAuth()
  const { getActiveCastings, getCastingsForCreator, getApplicationsForModel, getCastings } = useStore()
  const [activeTab, setActiveTab] = useState<CastingTab>("active")
  const [search, setSearch] = useState("")
  const [showFilters, setShowFilters] = useState(false)
  const [filterType, setFilterType] = useState<string>("all")
  const [filterPayMin, setFilterPayMin] = useState<string>("")
  const [filterPayMax, setFilterPayMax] = useState<string>("")
  const [filterLocation, setFilterLocation] = useState("")
  const [sortBy, setSortBy] = useState<string>("newest")

const isCreator = user?.role === "brand" || user?.role === "agency"

// Get user's applications from store
  const userApplications = user ? getApplicationsForModel(user.id) : []
  const appliedCastingIds = userApplications.map((a) => a.castingId)
  const shortlistedCastingIds = userApplications.filter((a) => a.status === "shortlisted").map((a) => a.castingId)
  const bookedCastingIds = userApplications.filter((a) => a.status === "accepted").map((a) => a.castingId)

// Get creator's own castings from store
  const myCastings = user ? getCastingsForCreator(user.id) : []

// Tab labels based on role
  const getTabLabel = (tab: CastingTab) => {
    if (isCreator) {
      switch (tab) {
        case "applied":
          return "Submissions"
        case "booked":
          return "Confirmed"
        default:
          return tab.charAt(0).toUpperCase() + tab.slice(1)
      }
    }
    return tab.charAt(0).toUpperCase() + tab.slice(1)
  }

const tabs: CastingTab[] = isCreator
    ? ["active", "applied", "shortlisted", "booked"]
    : ["active", "foryou", "invited", "applied", "shortlisted", "booked"]

// Filter castings based on tab - using store methods
  const getFilteredCastings = (): Casting[] => {
    let castings: Casting[] = []
    const allCastings = getCastings()
    const activeCastings = getActiveCastings()

switch (activeTab) {
      case "active":
        castings = isCreator ? myCastings : activeCastings
        break
      case "foryou":
        // Mock "for you" - castings matching user tags (simplified)
        castings = activeCastings.slice(0, 3)
        break
      case "invited":
        // Mock invited castings
        castings = []
        break
      case "applied":
        castings = isCreator
          ? myCastings.filter((c) => c.applicationsCount > 0)
          : userApplications.filter((a) => appliedCastingIds.includes(a.castingId)).map((a) => a.casting).filter(Boolean) as Casting[]
        break
      case "shortlisted":
        castings = userApplications.filter((a) => a.status === "shortlisted" && a.casting).map((a) => a.casting!) as Casting[]
        break
      case "booked":
        castings = userApplications.filter((a) => (a.status === "accepted" || a.status === "confirmed") && a.casting).map((a) => a.casting!) as Casting[]
        break
    }

// Apply search filter
    if (search) {
      castings = castings.filter(
        (c) =>
          c.title.toLowerCase().includes(search.toLowerCase()) ||
          c.creator.name.toLowerCase().includes(search.toLowerCase()) ||
          c.location.toLowerCase().includes(search.toLowerCase()),
      )
    }

// Apply type filter
    if (filterType && filterType !== "all") {
      castings = castings.filter((c) => c.type === filterType)
    }

// Apply pay range filter
    if (filterPayMin) {
      const min = Number(filterPayMin)
      if (!isNaN(min)) {
        castings = castings.filter((c) => (c.pay?.amount ?? 0) >= min)
      }
    }
    if (filterPayMax) {
      const max = Number(filterPayMax)
      if (!isNaN(max)) {
        castings = castings.filter((c) => (c.pay?.amount ?? 0) <= max)
      }
    }

// Apply location filter
    if (filterLocation) {
      castings = castings.filter((c) =>
        c.location.toLowerCase().includes(filterLocation.toLowerCase()),
      )
    }

// Apply sort
    if (sortBy === "newest") {
      castings = [...castings].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    } else if (sortBy === "deadline") {
      castings = [...castings].sort((a, b) => {
        if (!a.deadline) return 1
        if (!b.deadline) return -1
        return new Date(a.deadline).getTime() - new Date(b.deadline).getTime()
      })
    } else if (sortBy === "pay") {
      castings = [...castings].sort((a, b) => (b.pay?.amount ?? 0) - (a.pay?.amount ?? 0))
    }

return castings
  }

const filteredCastings = getFilteredCastings()

const typeLabels: Record<string, string> = {
    runway: "Runway",
    campaign: "Campaign",
    editorial: "Editorial",
    commercial: "Commercial",
    event: "Event",
    fitting: "Fitting",
  }

// Get application status for a casting
  const getApplicationStatus = (castingId: string) => {
    const app = userApplications.find((a) => a.castingId === castingId)
    return app?.status
  }

return (
    <div className="pb-20 min-h-screen bg-zinc-950">
      {/* Header: filter chips + search/add – Pinterest-style */}
      <div className="sticky top-14 z-30 bg-zinc-950/95 backdrop-blur-sm border-b border-zinc-800">
        <div className="px-4 py-2 flex items-center gap-2">
          <div className="flex gap-1.5 overflow-x-auto no-scrollbar flex-1 min-w-0">
            {tabs.map((tab) => (
              <button
                key={tab}
                type="button"
                onClick={() => setActiveTab(tab)}
                className={`shrink-0 px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
                  activeTab === tab
                    ? "bg-white text-zinc-950"
                    : "bg-zinc-800/80 text-zinc-400 hover:text-zinc-200"
                }`}
              >
                {getTabLabel(tab)}
                {tab === "applied" && !isCreator && userApplications.length > 0 && (
                  <span className="ml-1 opacity-80">{userApplications.length}</span>
                )}
              </button>
            ))}
          </div>
          <div className="flex items-center gap-1 shrink-0">
            <button
              type="button"
              onClick={() => setShowFilters((v) => !v)}
              className={`relative w-9 h-9 flex items-center justify-center rounded-full transition-colors ${
                showFilters ? "bg-white text-zinc-950" : "bg-zinc-800/80 text-zinc-400 hover:text-zinc-200"
              }`}
            >
              <SlidersHorizontal className="w-4 h-4" />
            </button>
            {isCreator && onCreateCasting && (
              <Button
                onClick={onCreateCasting}
                size="icon"
                className="h-9 w-9 shrink-0 rounded-full bg-zinc-800 hover:bg-zinc-700 text-zinc-200 border-0"
              >
                <Plus className="w-4 h-4" />
              </Button>
            )}
          </div>
        </div>
        <div className="px-4 pb-2">
          <Input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search castings..."
            className="h-9 rounded-full bg-zinc-800/80 border-zinc-700 text-zinc-200 placeholder:text-zinc-500 pl-4 text-sm"
          />
        </div>

{/* Collapsible Filter Panel */}
        <AnimatePresence>
          {showFilters && (
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: "auto", opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.2 }}
              className="overflow-hidden border-t border-zinc-800"
            >
              <div className="px-4 py-3 space-y-3">
                {/* Type filter pills */}
                <div>
                  <p className="text-[10px] uppercase tracking-wider text-zinc-500 mb-1.5">Type</p>
                  <div className="flex gap-1.5 flex-wrap">
                    {(["all", "runway", "campaign", "editorial", "commercial", "event"] as const).map((t) => (
                      <button
                        key={t}
                        type="button"
                        onClick={() => setFilterType(t)}
                        className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
                          filterType === t
                            ? "bg-white text-zinc-950"
                            : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"
                        }`}
                      >
                        {t === "all" ? "All" : t.charAt(0).toUpperCase() + t.slice(1)}
                      </button>
                    ))}
                  </div>
                </div>

{/* Pay range */}
                <div>
                  <p className="text-[10px] uppercase tracking-wider text-zinc-500 mb-1.5">Pay Range</p>
                  <div className="flex gap-2 items-center">
                    <Input
                      type="number"
                      placeholder="Min \u20ac"
                      value={filterPayMin}
                      onChange={(e) => setFilterPayMin(e.target.value)}
                      className="h-8 w-24 rounded-lg bg-zinc-800 border-zinc-700 text-zinc-200 placeholder:text-zinc-500 text-xs"
                    />
                    <span className="text-zinc-500 text-xs">\u2013</span>
                    <Input
                      type="number"
                      placeholder="Max \u20ac"
                      value={filterPayMax}
                      onChange={(e) => setFilterPayMax(e.target.value)}
                      className="h-8 w-24 rounded-lg bg-zinc-800 border-zinc-700 text-zinc-200 placeholder:text-zinc-500 text-xs"
                    />
                  </div>
                </div>

{/* Location */}
                <div>
                  <p className="text-[10px] uppercase tracking-wider text-zinc-500 mb-1.5">Location</p>
                  <Input
                    placeholder="City or location..."
                    value={filterLocation}
                    onChange={(e) => setFilterLocation(e.target.value)}
                    className="h-8 rounded-lg bg-zinc-800 border-zinc-700 text-zinc-200 placeholder:text-zinc-500 text-xs"
                  />
                </div>

{/* Sort by pills */}
                <div>
                  <p className="text-[10px] uppercase tracking-wider text-zinc-500 mb-1.5">Sort By</p>
                  <div className="flex gap-1.5">
                    {([
                      { key: "newest", label: "Newest" },
                      { key: "deadline", label: "Deadline" },
                      { key: "pay", label: "Pay (High\u2192Low)" },
                    ] as const).map((s) => (
                      <button
                        key={s.key}
                        type="button"
                        onClick={() => setSortBy(s.key)}
                        className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
                          sortBy === s.key
                            ? "bg-white text-zinc-950"
                            : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"
                        }`}
                      >
                        {s.label}
                      </button>
                    ))}
                  </div>
                </div>

{/* Clear filters */}
                {(filterType !== "all" || filterPayMin || filterPayMax || filterLocation || sortBy !== "newest") && (
                  <button
                    type="button"
                    onClick={() => {
                      setFilterType("all")
                      setFilterPayMin("")
                      setFilterPayMax("")
                      setFilterLocation("")
                      setSortBy("newest")
                    }}
                    className="flex items-center gap-1 text-xs text-zinc-400 hover:text-zinc-200 transition-colors"
                  >
                    <X className="w-3 h-3" />
                    Clear filters
                  </button>
                )}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>

{/* Feed – masonry grid, image-dominant pins */}
      <AnimatePresence mode="wait">
        <motion.div
          key={activeTab}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="px-3 py-4"
        >
          {filteredCastings.length > 0 ? (
            <motion.div
              className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 gap-1.5 auto-rows-auto"
              layout
            >
              {filteredCastings.map((casting, index) => {
                const appStatus = getApplicationStatus(casting.id)
                // Every 5th card is featured; alternate left/right sides
                const isFeatured = index % 5 === 0
                const featuredCount = Math.floor(index / 5)
                // Even featured (0,2,4...) = left, Odd featured (1,3,5...) = right
                const featuredSide = isFeatured ? (featuredCount % 2 === 0 ? "left" : "right") : null

return (
                  <motion.div
                    key={casting.id}
                    layout
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.9 }}
                    transition={{
                      layout: { type: "spring", stiffness: 300, damping: 30 },
                      opacity: { delay: Math.min(index * 0.03, 0.25) },
                      scale: { delay: Math.min(index * 0.03, 0.25) },
                    }}
                    className={
                      isFeatured
                        ? `col-span-2 row-span-2 ${featuredSide === "left" ? "col-start-1" : "col-start-2 sm:col-start-3 lg:col-start-4"}`
                        : ""
                    }
                  >
                    <Card
                      className="overflow-hidden cursor-pointer rounded-xl border-0 bg-zinc-900 shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.97] !p-0 !gap-0 h-full group"
                      onClick={() => onViewCasting(casting)}
                    >
                      {/* Tile image */}
                      <div className={`relative bg-zinc-800 ${isFeatured ? "h-full min-h-[240px]" : "aspect-square"}`}>
                        <img
                          src={casting.images?.[0] || "/placeholder.svg"}
                          alt={casting.title}
                          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                        />
                        <div className="absolute top-1.5 left-1.5 flex items-center gap-1">
                          <span className={`rounded bg-black/60 backdrop-blur-sm font-medium text-white ${isFeatured ? "px-2 py-1 text-xs" : "px-1.5 py-0.5 text-[9px]"}`}>
                            {typeLabels[casting.type]}
                          </span>
                          {appStatus && (
                            <span
                              className={`rounded font-medium backdrop-blur-sm ${isFeatured ? "px-2 py-1 text-xs" : "px-1.5 py-0.5 text-[9px]"} ${
                                appStatus === "shortlisted"
                                  ? "bg-amber-500/90 text-black"
                                  : appStatus === "accepted"
                                    ? "bg-emerald-500/90 text-black"
                                    : "bg-white/20 text-white"
                              }`}
                            >
                              {appStatus}
                            </span>
                          )}
                        </div>
                        {/* Featured card overlay with details */}
                        {isFeatured && (
                          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3 pt-12">
                            <h3 className="font-semibold text-sm text-white line-clamp-2 leading-snug">
                              {casting.title}
                            </h3>
                            <p className="mt-0.5 text-xs text-zinc-300 truncate">
                              {casting.creator.name}
                            </p>
                            <div className="mt-2 flex items-center gap-3 text-[10px] text-zinc-400">
                              <span className="flex items-center gap-1">
                                <MapPin className="w-3 h-3" />
                                {casting.location || "Remote"}
                              </span>
                              {casting.pay && (
                                <span className="flex items-center gap-1">
                                  <DollarSign className="w-3 h-3" />
                                  €{casting.pay.amount}
                                </span>
                              )}
                            </div>
                          </div>
                        )}
                      </div>
                      {/* Compact caption — non-featured */}
                      {!isFeatured && (
                        <div className="p-1.5">
                          <h3 className="font-medium text-[10px] text-zinc-100 line-clamp-2 leading-tight">
                            {casting.title}
                          </h3>
                          <p className="mt-0.5 text-[9px] text-zinc-500 truncate">
                            {casting.creator.name}
                          </p>
                        </div>
                      )}
                    </Card>
                  </motion.div>
                )
              })}
            </motion.div>
          ) : (
            <div className="text-center py-16 text-zinc-500">
              <p>No castings found</p>
              {activeTab === "invited" && (
                <p className="text-sm mt-1 text-zinc-600">You haven't been invited to any castings yet</p>
              )}
            </div>
          )}
        </motion.div>
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/compare/compare-view.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { ArrowLeft, Shield, BadgeCheck } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import type { User, Casting } from "@/lib/types"
import { calculateFitScore } from "@/lib/ai-matching"

interface CompareViewProps {
  models: [User, User]
  casting?: Casting
  onBack: () => void
  onViewProfile: (user: User) => void
}

export function CompareView({ models, casting, onBack, onViewProfile }: CompareViewProps) {
  const [model1, model2] = models

const score1 = casting ? calculateFitScore(model1, casting) : null
  const score2 = casting ? calculateFitScore(model2, casting) : null

const getVerificationBadge = (level: string) => {
    switch (level) {
      case "luxlane_verified":
        return (
          <Badge variant="secondary" className="text-[10px]">
            <Shield className="w-2.5 h-2.5 mr-0.5" />
            Luxlane
          </Badge>
        )
      case "agency_verified":
        return (
          <Badge variant="secondary" className="text-[10px]">
            <BadgeCheck className="w-2.5 h-2.5 mr-0.5" />
            Agency
          </Badge>
        )
      default:
        return (
          <Badge variant="outline" className="text-[10px]">
            Unverified
          </Badge>
        )
    }
  }

return (
    <div className="min-h-screen bg-background pb-20">
      {/* Header */}
      <header className="sticky top-0 flex items-center h-14 px-4 border-b border-border bg-background z-10">
        <Button variant="ghost" size="icon" onClick={onBack}>
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <h1 className="ml-2 font-semibold">Compare Models</h1>
      </header>

{/* Model Headers */}
      <div className="grid grid-cols-2 gap-4 p-4">
        {[model1, model2].map((model, i) => (
          <motion.div
            key={model.id}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.1 }}
          >
            <Card
              className="p-4 text-center cursor-pointer hover:bg-muted/30 transition-colors"
              onClick={() => onViewProfile(model)}
            >
              <Avatar className="w-16 h-16 mx-auto mb-2">
                <AvatarImage src={model.avatar || "/placeholder.svg"} alt={model.name} />
                <AvatarFallback>{model.name[0]}</AvatarFallback>
              </Avatar>
              <p className="font-medium text-sm truncate">{model.name}</p>
              <div className="mt-1">{getVerificationBadge(model.verificationLevel)}</div>
            </Card>
          </motion.div>
        ))}
      </div>

{/* Fit Scores */}
      {casting && score1 && score2 && (
        <div className="px-4 mb-4">
          <Card className="p-4">
            <h3 className="font-semibold mb-3 text-center text-sm">Fit Score for {casting.title}</h3>
            <div className="grid grid-cols-2 gap-4 mb-4">
              <div className="text-center">
                <div className={`text-3xl font-bold ${score1.total >= score2.total ? "text-emerald-500" : ""}`}>
                  {score1.total}
                </div>
              </div>
              <div className="text-center">
                <div className={`text-3xl font-bold ${score2.total >= score1.total ? "text-emerald-500" : ""}`}>
                  {score2.total}
                </div>
              </div>
            </div>

{/* Breakdown */}
            <div className="space-y-2">
              {(Object.keys(score1.breakdown) as Array<keyof typeof score1.breakdown>).map((key) => (
                <CompareRow
                  key={key}
                  label={key.charAt(0).toUpperCase() + key.slice(1)}
                  value1={`${score1.breakdown[key]}%`}
                  value2={`${score2.breakdown[key]}%`}
                  highlight
                />
              ))}
            </div>
          </Card>
        </div>
      )}

{/* Measurements Comparison */}
      <div className="px-4 mb-4">
        <Card className="p-4">
          <h3 className="font-semibold mb-3 text-center text-sm">Measurements</h3>
          <CompareRow
            label="Height"
            value1={model1.measurements?.height || "-"}
            value2={model2.measurements?.height || "-"}
          />
          <CompareRow
            label="Bust"
            value1={model1.measurements?.bust || "-"}
            value2={model2.measurements?.bust || "-"}
          />
          <CompareRow
            label="Waist"
            value1={model1.measurements?.waist || "-"}
            value2={model2.measurements?.waist || "-"}
          />
          <CompareRow
            label="Hips"
            value1={model1.measurements?.hips || "-"}
            value2={model2.measurements?.hips || "-"}
          />
          <CompareRow
            label="Shoes"
            value1={model1.measurements?.shoeSize || "-"}
            value2={model2.measurements?.shoeSize || "-"}
          />
        </Card>
      </div>

{/* Stats Comparison */}
      <div className="px-4 mb-4">
        <Card className="p-4">
          <h3 className="font-semibold mb-3 text-center text-sm">Performance</h3>
          <CompareRow
            label="Luxlane Score"
            value1={model1.metrics?.luxlaneScore || 0}
            value2={model2.metrics?.luxlaneScore || 0}
            highlight
          />
          <CompareRow
            label="Rank"
            value1={model1.metrics?.rank ? `#${model1.metrics.rank}` : "-"}
            value2={model2.metrics?.rank ? `#${model2.metrics.rank}` : "-"}
          />
          <CompareRow
            label="Bookings"
            value1={model1.metrics?.components.bookings || 0}
            value2={model2.metrics?.components.bookings || 0}
            highlight
          />
          <CompareRow
            label="Shortlists"
            value1={model1.metrics?.components.shortlists || 0}
            value2={model2.metrics?.components.shortlists || 0}
            highlight
          />
          <CompareRow
            label="Reliability"
            value1={`${model1.metrics?.components.reliability || 0}%`}
            value2={`${model2.metrics?.components.reliability || 0}%`}
            highlight
          />
        </Card>
      </div>

</div>
  )
}
[V0_FILE]typescriptreact:file="components/create/create-post-view.tsx"
"use client"

import { useState } from "react"
import { X, ImageIcon, Camera, ChevronRight, MapPin, Tag, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { cn } from "@/lib/utils"

interface CreatePostViewProps {
  onClose: () => void
  onPost: (data: PostData) => void
}

interface PostData {
  media: string[]
  caption: string
  location: string
  tags: string[]
}

const mockLocations = ["Paris, France", "Milan, Italy", "New York, NY", "Los Angeles, CA", "London, UK", "Monaco"]

export function CreatePostView({ onClose, onPost }: CreatePostViewProps) {
  const [step, setStep] = useState<"media" | "details">("media")
  const [selectedMedia, setSelectedMedia] = useState<string[]>([])
  const [caption, setCaption] = useState("")
  const [location, setLocation] = useState("")
  const [tags, setTags] = useState<string[]>([])
  const [showLocationPicker, setShowLocationPicker] = useState(false)

const handleMediaSelect = () => {
    // Simulate selecting media
    setSelectedMedia(["/placeholder.svg?height=800&width=600"])
    setStep("details")
  }

const handlePost = () => {
    onPost({
      media: selectedMedia,
      caption,
      location,
      tags,
    })
    onClose()
  }

return (
    <div className="fixed inset-0 z-50 bg-background">
      {/* Header */}
      <header className="flex items-center justify-between h-14 px-4 border-b border-border/30">
        <button onClick={onClose} className="w-10 h-10 flex items-center justify-center">
          <X className="h-6 w-6" />
        </button>
        <h1 className="font-serif text-lg">New Post</h1>
        {step === "details" ? (
          <Button
            onClick={handlePost}
            disabled={!caption.trim()}
            className="bg-gold text-primary-foreground hover:bg-gold/90 rounded-full px-4"
          >
            Share
          </Button>
        ) : (
          <div className="w-16" />
        )}
      </header>

{step === "media" && (
        <div className="flex flex-col items-center justify-center h-[calc(100vh-56px)] px-6">
          <div className="w-24 h-24 rounded-full bg-secondary/50 flex items-center justify-center mb-6">
            <ImageIcon className="h-10 w-10 text-muted-foreground" />
          </div>
          <h2 className="font-serif text-2xl font-light mb-2">Create New Post</h2>
          <p className="text-muted-foreground text-center mb-8">Share photos and videos with your network</p>
          <div className="flex gap-4">
            <Button
              onClick={handleMediaSelect}
              variant="outline"
              className="h-14 px-6 rounded-full border-border/50 bg-transparent"
            >
              <ImageIcon className="h-5 w-5 mr-2" />
              Gallery
            </Button>
            <Button
              onClick={handleMediaSelect}
              className="h-14 px-6 bg-gold text-primary-foreground hover:bg-gold/90 rounded-full"
            >
              <Camera className="h-5 w-5 mr-2" />
              Camera
            </Button>
          </div>
        </div>
      )}

{step === "details" && (
        <div className="h-[calc(100vh-56px)] overflow-y-auto">
          {/* Media Preview */}
          <div className="aspect-square bg-secondary">
            <img
              src={selectedMedia[0] || "/placeholder.svg"}
              alt="Selected media"
              className="w-full h-full object-cover"
            />
          </div>

{/* Details Form */}
          <div className="p-4 space-y-4">
            <Textarea
              placeholder="Write a caption..."
              value={caption}
              onChange={(e) => setCaption(e.target.value)}
              className="min-h-[120px] bg-secondary/50 border-0 rounded-xl resize-none text-base"
            />

{/* Location */}
            <button
              onClick={() => setShowLocationPicker(!showLocationPicker)}
              className="w-full flex items-center justify-between p-4 rounded-xl bg-secondary/50"
            >
              <div className="flex items-center gap-3">
                <MapPin className="h-5 w-5 text-muted-foreground" />
                <span className={location ? "text-foreground" : "text-muted-foreground"}>
                  {location || "Add location"}
                </span>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </button>

{showLocationPicker && (
              <div className="space-y-2 pl-4">
                {mockLocations.map((loc) => (
                  <button
                    key={loc}
                    onClick={() => {
                      setLocation(loc)
                      setShowLocationPicker(false)
                    }}
                    className={cn(
                      "w-full text-left p-3 rounded-lg transition-colors",
                      location === loc ? "bg-gold/20 text-gold" : "hover:bg-secondary/50",
                    )}
                  >
                    {loc}
                  </button>
                ))}
              </div>
            )}

{/* Tag People */}
            <button className="w-full flex items-center justify-between p-4 rounded-xl bg-secondary/50">
              <div className="flex items-center gap-3">
                <Users className="h-5 w-5 text-muted-foreground" />
                <span className="text-muted-foreground">Tag people</span>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </button>

{/* Add Tags */}
            <div className="space-y-2">
              <div className="flex items-center gap-3 p-4 rounded-xl bg-secondary/50">
                <Tag className="h-5 w-5 text-muted-foreground" />
                <Input
                  placeholder="Add tags (e.g., fashion, runway)"
                  className="flex-1 bg-transparent border-0 p-0 h-auto text-base focus-visible:ring-0"
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && e.currentTarget.value) {
                      setTags([...tags, e.currentTarget.value])
                      e.currentTarget.value = ""
                    }
                  }}
                />
              </div>
              {tags.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {tags.map((tag, index) => (
                    <span
                      key={index}
                      className="px-3 py-1 bg-gold/20 text-gold rounded-full text-sm flex items-center gap-1"
                    >
                      #{tag}
                      <button
                        onClick={() => setTags(tags.filter((_, i) => i !== index))}
                        className="hover:text-foreground"
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </span>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/digital-twin/create-twin-flow.tsx"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ArrowLeft, Upload, Video, Scan, CheckCircle2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

interface CreateTwinFlowProps {
  onBack: () => void
  onComplete: () => void
}

export function CreateTwinFlow({ onBack, onComplete }: CreateTwinFlowProps) {
  const [step, setStep] = useState<TwinStep>("intro")
  const [progress, setProgress] = useState(0)

const handleVideoUpload = async () => {
    setStep("photos")
  }

const handlePhotosUpload = async () => {
    setStep("processing")
    // Simulate processing
    for (let i = 0; i <= 100; i += 10) {
      await new Promise((r) => setTimeout(r, 300))
      setProgress(i)
    }
    setStep("preview")
  }

const handleApprove = () => {
    setStep("complete")
  }

<AnimatePresence mode="wait">
        {step === "intro" && (
          <motion.div
            key="intro"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-8">
              <div className="w-24 h-24 rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 mx-auto mb-6 flex items-center justify-center">
                <Scan className="w-12 h-12 text-white" />
              </div>
              <h2 className="text-2xl font-semibold mb-2">Digital Twin</h2>
              <p className="text-muted-foreground mb-8">
                Create a 3D digital representation for enhanced casting opportunities
              </p>

<div className="space-y-4 text-left mb-8">
                <Card className="p-4 flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
                    <span className="text-sm font-semibold">1</span>
                  </div>
                  <div>
                    <p className="font-medium text-sm">Upload Video</p>
                    <p className="text-xs text-muted-foreground">30-second rotating video</p>
                  </div>
                </Card>
                <Card className="p-4 flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
                    <span className="text-sm font-semibold">2</span>
                  </div>
                  <div>
                    <p className="font-medium text-sm">Capture Photos</p>
                    <p className="text-xs text-muted-foreground">Front, side, and back views</p>
                  </div>
                </Card>
                <Card className="p-4 flex items-start gap-3">
                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
                    <span className="text-sm font-semibold">3</span>
                  </div>
                  <div>
                    <p className="font-medium text-sm">AI Processing</p>
                    <p className="text-xs text-muted-foreground">We create your 3D model</p>
                  </div>
                </Card>
              </div>

<Button className="w-full h-12" onClick={() => setStep("video")}>
                Get Started
              </Button>
            </div>
          </motion.div>
        )}

{step === "video" && (
          <motion.div
            key="video"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-8">
              <div className="w-16 h-16 rounded-full bg-muted mx-auto mb-4 flex items-center justify-center">
                <Video className="w-8 h-8" />
              </div>
              <h2 className="text-xl font-semibold mb-2">Upload Video</h2>
              <p className="text-sm text-muted-foreground mb-8">
                Record a 30-second video rotating slowly in a well-lit area
              </p>

<Card className="aspect-video mb-6 bg-muted flex items-center justify-center border-dashed border-2">
                <div className="text-center">
                  <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
                  <p className="text-sm text-muted-foreground">Tap to upload video</p>
                </div>
              </Card>

<Button className="w-full h-12" onClick={handleVideoUpload}>
                Continue
              </Button>
            </div>
          </motion.div>
        )}

{step === "photos" && (
          <motion.div
            key="photos"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-8">
              <h2 className="text-xl font-semibold mb-2">Capture Photos</h2>
              <p className="text-sm text-muted-foreground mb-6">Take clear photos from different angles</p>

<div className="grid grid-cols-3 gap-2 mb-6">
                {["Front", "Left", "Right", "Back", "Top", "Detail"].map((angle) => (
                  <Card
                    key={angle}
                    className="aspect-square flex items-center justify-center border-dashed border-2 cursor-pointer hover:bg-muted/50"
                  >
                    <div className="text-center">
                      <Upload className="w-5 h-5 mx-auto mb-1 text-muted-foreground" />
                      <p className="text-[10px] text-muted-foreground">{angle}</p>
                    </div>
                  </Card>
                ))}
              </div>

<Button className="w-full h-12" onClick={handlePhotosUpload}>
                Process Digital Twin
              </Button>
            </div>
          </motion.div>
        )}

{step === "processing" && (
          <motion.div
            key="processing"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-16">
              <motion.div
                animate={{ rotate: 360 }}
                transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
                className="w-20 h-20 rounded-full border-4 border-muted border-t-foreground mx-auto mb-6"
              />
              <h2 className="text-xl font-semibold mb-2">Processing</h2>
              <p className="text-sm text-muted-foreground mb-8">Creating your Digital Twin...</p>

<div className="max-w-xs mx-auto">
                <Progress value={progress} className="h-2 mb-2" />
                <p className="text-xs text-muted-foreground">{progress}% complete</p>
              </div>
            </div>
          </motion.div>
        )}

{step === "preview" && (
          <motion.div
            key="preview"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-8">
              <h2 className="text-xl font-semibold mb-2">Preview</h2>
              <p className="text-sm text-muted-foreground mb-6">Review your Digital Twin before approving</p>

<Card className="aspect-square mb-6 bg-gradient-to-b from-muted/50 to-muted flex items-center justify-center">
                <div className="text-center">
                  <span className="text-8xl">🧍</span>
                  <p className="text-sm text-muted-foreground mt-4">3D Preview</p>
                </div>
              </Card>

<div className="grid grid-cols-2 gap-3 mb-6">
                <Button variant="outline" className="h-12 bg-transparent" onClick={() => setStep("photos")}>
                  Retake
                </Button>
                <Button className="h-12" onClick={handleApprove}>
                  Approve
                </Button>
              </div>
            </div>
          </motion.div>
        )}

{step === "complete" && (
          <motion.div
            key="complete"
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="p-4"
          >
            <div className="text-center py-12">
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ type: "spring", delay: 0.2 }}
                className="w-24 h-24 rounded-full bg-emerald-500 mx-auto mb-6 flex items-center justify-center"
              >
                <CheckCircle2 className="w-12 h-12 text-white" />
              </motion.div>
              <h2 className="text-2xl font-semibold mb-2">Digital Twin Created!</h2>
              <p className="text-muted-foreground mb-8">Your Digital Twin is now available on your profile</p>

<Button className="w-full h-12" onClick={onComplete}>
                View on Profile
              </Button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/digital-twin/digital-twin-section.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Scan, RotateCcw, ZoomIn, ZoomOut, Upload, CheckCircle2 } from "lucide-react"
import type { User } from "@/lib/types"

interface DigitalTwinSectionProps {
  user: User
  isOwn?: boolean
  onCreateTwin?: () => void
}

export function DigitalTwinSection({ user, isOwn = false, onCreateTwin }: DigitalTwinSectionProps) {
  const [activeTab, setActiveTab] = useState("head")
  const [rotation, setRotation] = useState(0)
  const [zoom, setZoom] = useState(1)

const twin = user.digitalTwin

if (!twin || twin.status !== "complete") {
    return (
      <Card className="p-6">
        <div className="text-center">
          <div className="w-16 h-16 rounded-full bg-muted mx-auto mb-4 flex items-center justify-center">
            <Scan className="w-8 h-8 text-muted-foreground" />
          </div>
          <h3 className="font-semibold mb-2">Digital Twin</h3>
          <p className="text-sm text-muted-foreground mb-4">
            {twin?.status === "processing"
              ? "Your Digital Twin is being processed..."
              : twin?.status === "pending"
                ? "Your Digital Twin is pending review"
                : "Create a 3D digital representation of yourself"}
          </p>

{twin?.status === "processing" && (
            <div className="flex items-center justify-center gap-2 text-amber-500 mb-4">
              <motion.div
                animate={{ rotate: 360 }}
                transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
              >
                <Scan className="w-5 h-5" />
              </motion.div>
              <span className="text-sm">Processing...</span>
            </div>
          )}

{isOwn && !twin && (
            <Button onClick={onCreateTwin} className="w-full">
              <Upload className="w-4 h-4 mr-2" />
              Create Digital Twin
            </Button>
          )}
        </div>
      </Card>
    )
  }

return (
    <Card className="overflow-hidden">
      <div className="flex items-center justify-between p-4 border-b border-border">
        <div className="flex items-center gap-2">
          <Scan className="w-5 h-5" />
          <h3 className="font-semibold">Digital Twin</h3>
        </div>
        <Badge variant="secondary" className="bg-emerald-500/10 text-emerald-600">
          <CheckCircle2 className="w-3 h-3 mr-1" />
          Complete
        </Badge>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="w-full justify-start rounded-none border-b border-border h-10 p-0 bg-transparent">
          <TabsTrigger
            value="head"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-foreground data-[state=active]:bg-transparent"
          >
            Head
          </TabsTrigger>
          <TabsTrigger
            value="body"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-foreground data-[state=active]:bg-transparent"
          >
            Full Body
          </TabsTrigger>
          <TabsTrigger
            value="measurements"
            className="rounded-none border-b-2 border-transparent data-[state=active]:border-foreground data-[state=active]:bg-transparent"
          >
            Measurements
          </TabsTrigger>
        </TabsList>

<TabsContent value="head" className="mt-0">
          <div className="relative aspect-square bg-gradient-to-b from-muted/50 to-muted">
            {/* 3D Viewer Placeholder */}
            <div className="absolute inset-0 flex items-center justify-center">
              <motion.div
                animate={{ rotateY: rotation }}
                style={{ transformStyle: "preserve-3d" }}
                className="w-48 h-48"
              >
                <div className="w-full h-full rounded-full bg-gradient-to-br from-muted-foreground/20 to-muted-foreground/5 flex items-center justify-center">
                  <span className="text-4xl">👤</span>
                </div>
              </motion.div>
            </div>

{/* Controls */}
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-background/80 backdrop-blur-sm rounded-full p-1">
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 rounded-full"
                onClick={() => setRotation((r) => r - 45)}
              >
                <RotateCcw className="w-4 h-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 rounded-full"
                onClick={() => setZoom((z) => Math.max(0.5, z - 0.25))}
              >
                <ZoomOut className="w-4 h-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 rounded-full"
                onClick={() => setZoom((z) => Math.min(2, z + 0.25))}
              >
                <ZoomIn className="w-4 h-4" />
              </Button>
            </div>
          </div>

{/* Face Attributes */}
          {twin.attributes && (
            <div className="p-4 border-t border-border">
              <h4 className="text-sm font-medium mb-3">Extracted Attributes</h4>
              <div className="flex flex-wrap gap-2">
                <Badge variant="secondary">{twin.attributes.faceShape} face</Badge>
                <Badge variant="secondary">{twin.attributes.skinTone} skin</Badge>
                <Badge variant="secondary">{twin.attributes.eyeColor} eyes</Badge>
                <Badge variant="secondary">{twin.attributes.jawline} jawline</Badge>
                <Badge variant="secondary">{twin.attributes.cheekbones} cheekbones</Badge>
                <Badge variant="secondary">{twin.attributes.lipShape} lips</Badge>
              </div>
            </div>
          )}
        </TabsContent>

<TabsContent value="measurements" className="mt-0 p-4">
          {twin.attributes && (
            <div className="space-y-4">
              <h4 className="text-sm font-medium">Precise Measurements</h4>
              <div className="grid grid-cols-2 gap-3">
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Height</p>
                  <p className="font-semibold">{twin.attributes.preciseHeight}</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Chest</p>
                  <p className="font-semibold">{twin.attributes.preciseChest}</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Waist</p>
                  <p className="font-semibold">{twin.attributes.preciseWaist}</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Hips</p>
                  <p className="font-semibold">{twin.attributes.preciseHips}</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Shoulders</p>
                  <p className="font-semibold">{twin.attributes.shoulderWidth}</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg">
                  <p className="text-xs text-muted-foreground">Arm Length</p>
                  <p className="font-semibold">{twin.attributes.armLength}</p>
                </div>
                <div className="p-3 bg-muted/50 rounded-lg col-span-2">
                  <p className="text-xs text-muted-foreground">Leg Length</p>
                  <p className="font-semibold">{twin.attributes.legLength}</p>
                </div>
              </div>
            </div>
          )}
        </TabsContent>
      </Tabs>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/digital-twin/digital-twin-viewer-page.tsx"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useAuth } from "@/lib/auth-context"
import { TwinViewer3D } from "./twin-viewer-3d"
import type { User, FacialAnalysis, DigitalTwinAttributes } from "@/lib/types"
import {
  X,
  Scan,
  Eye,
  EyeOff,
  Ruler,
  Brain,
} from "lucide-react"

type ViewerTab = "head" | "body" | "analysis"

interface DigitalTwinViewerPageProps {
  user: User
  isOwn: boolean
  onClose: () => void
}

export function DigitalTwinViewerPage({ user, isOwn, onClose }: DigitalTwinViewerPageProps) {
  const { user: currentUser } = useAuth()
  const [activeTab, setActiveTab] = useState<ViewerTab>("head")
  const [showAnalysis, setShowAnalysis] = useState(false)

const isBrandOrAgency = currentUser?.role === "brand" || currentUser?.role === "agency"
  const hasFullAccess = isBrandOrAgency || isOwn

const twin = user.digitalTwin
  const attrs = twin?.attributes
  const analysis = attrs?.analysis

const tabs: { id: ViewerTab; label: string; icon: React.ReactNode }[] = [
    { id: "head", label: "Head", icon: <Scan className="w-4 h-4" /> },
    { id: "body", label: "Body", icon: <Ruler className="w-4 h-4" /> },
    { id: "analysis", label: "AI Analysis", icon: <Brain className="w-4 h-4" /> },
  ]

return (
    <motion.div
      initial={{ opacity: 0, y: "100%" }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: "100%" }}
      transition={{ type: "spring", damping: 25, stiffness: 200 }}
      className="fixed inset-0 z-50 bg-[#08080c] flex flex-col"
    >
      {/* Top Bar */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-white/5">
        <div className="flex items-center gap-3">
          <Button
            variant="ghost"
            size="icon"
            className="h-9 w-9 text-zinc-400 hover:text-white hover:bg-white/10"
            onClick={onClose}
          >
            <X className="w-5 h-5" />
          </Button>
          <div>
            <h2 className="text-sm font-semibold text-white">{user.name}</h2>
            <p className="text-[11px] text-zinc-500">Digital Twin</p>
          </div>
        </div>

{hasFullAccess && analysis && (
          <Button
            variant="ghost"
            size="sm"
            className={`rounded-full gap-2 text-xs font-mono ${
              showAnalysis
                ? "bg-white/10 text-white border border-white/20"
                : "text-zinc-400 hover:text-white hover:bg-white/10"
            }`}
            onClick={() => setShowAnalysis(!showAnalysis)}
          >
            {showAnalysis ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
            AI Analysis
          </Button>
        )}
      </div>

{/* Viewer Area with crossfade animation */}
      <div className="flex-1 min-h-0 relative">
        <AnimatePresence mode="wait">
          {activeTab !== "analysis" ? (
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              transition={{ duration: 0.35, ease: "easeInOut" }}
              className="absolute inset-0"
            >
              <TwinViewer3D
                user={user}
                mode={activeTab === "head" ? "head" : "body"}
                showAnalysis={showAnalysis}
              />
            </motion.div>
          ) : (
            <motion.div
              key="analysis"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 20 }}
              transition={{ duration: 0.3 }}
              className="absolute inset-0"
            >
              <AnalysisFullView analysis={analysis} attrs={attrs} />
            </motion.div>
          )}
        </AnimatePresence>
      </div>

{/* Tab Bar */}
      <div className="border-t border-white/5 bg-[#0c0c14]">
        <div className="flex">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              type="button"
              onClick={() => setActiveTab(tab.id)}
              className={`flex-1 py-3 flex flex-col items-center gap-1 transition-colors ${
                activeTab === tab.id
                  ? "text-white"
                  : "text-zinc-500 hover:text-zinc-300"
              }`}
            >
              {tab.icon}
              <span className="text-[10px] font-medium uppercase tracking-wider">
                {tab.label}
              </span>
            </button>
          ))}
        </div>
      </div>
    </motion.div>
  )
}

function AnalysisFullView({
  analysis,
  attrs,
}: {
  analysis?: FacialAnalysis
  attrs?: DigitalTwinAttributes
}) {
  if (!analysis) {
    return (
      <div className="flex-1 flex items-center justify-center text-zinc-500">
        <div className="text-center">
          <Brain className="w-12 h-12 mx-auto mb-3 opacity-40" />
          <p className="text-sm">No AI analysis available</p>
        </div>
      </div>
    )
  }

return (
    <div className="h-full overflow-y-auto p-4 space-y-4">
      {/* Overall Scores */}
      <div className="grid grid-cols-3 gap-3">
        <ScoreCard label="Symmetry" value={analysis.symmetryScore} />
        <ScoreCard label="Golden Ratio" value={analysis.goldenRatioScore} />
        <ScoreCard label="Harmony" value={analysis.overallHarmony} />
      </div>

{/* Facial Structure */}
      <div className="bg-white/5 rounded-xl p-4 border border-white/5">
        <h4 className="text-xs text-zinc-400 uppercase tracking-wider font-mono mb-3">
          Facial Structure
        </h4>
        <div className="space-y-3">
          <MetricRow label="Face Shape" value={attrs?.faceShape || "—"} />
          <MetricRow label="Jawline" value={attrs?.jawline || "—"} />
          <MetricRow label="Cheekbones" value={attrs?.cheekbones || "—"} />
          <MetricRow label="Nose Type" value={attrs?.noseType || "—"} />
          <MetricRow label="Lip Shape" value={attrs?.lipShape || "—"} />
          <MetricRow label="Eye Color" value={attrs?.eyeColor || "—"} />
          <MetricRow label="Skin Tone" value={attrs?.skinTone || "—"} />
        </div>
      </div>

{/* Proportions */}
      <div className="bg-white/5 rounded-xl p-4 border border-white/5">
        <h4 className="text-xs text-zinc-400 uppercase tracking-wider font-mono mb-3">
          Proportions
        </h4>
        <div className="space-y-3">
          <MetricRow label="Eye Spacing" value={analysis.eyeSpacing} />
          <MetricRow label="Jaw Angle" value={`${analysis.jawAngle}°`} />
          <MetricRow label="Nose Bridge Ratio" value={analysis.noseBridgeRatio.toFixed(2)} />
          <MetricRow label="Lip-to-Face Ratio" value={analysis.lipToFaceRatio.toFixed(2)} />
        </div>
      </div>

{/* Facial Thirds */}
      <div className="bg-white/5 rounded-xl p-4 border border-white/5">
        <h4 className="text-xs text-zinc-400 uppercase tracking-wider font-mono mb-3">
          Facial Thirds
        </h4>
        <div className="flex gap-1 h-28 items-end">
          {Object.entries(analysis.facialThirds).map(([key, val]) => (
            <div key={key} className="flex-1 flex flex-col items-center gap-1">
              <span className="text-xs font-mono text-zinc-300">
                {val.toFixed(1)}%
              </span>
              <motion.div
                initial={{ height: 0 }}
                animate={{ height: `${val}%` }}
                transition={{ delay: 0.2, duration: 0.6, ease: "easeOut" }}
                className="w-full rounded-t-md"
                style={{
                  background: `linear-gradient(to top, rgba(255,255,255,0.15), rgba(255,255,255,0.03))`,
                  border: "1px solid rgba(255,255,255,0.08)",
                }}
              />
              <span className="text-[10px] text-zinc-500 capitalize">{key}</span>
            </div>
          ))}
        </div>
      </div>

{/* Precise Measurements */}
      {attrs && (
        <div className="bg-white/5 rounded-xl p-4 border border-white/5">
          <h4 className="text-xs text-zinc-400 uppercase tracking-wider font-mono mb-3">
            Precise Measurements
          </h4>
          <div className="grid grid-cols-2 gap-2">
            <MeasurementCell label="Height" value={attrs.preciseHeight} />
            <MeasurementCell label="Chest" value={attrs.preciseChest} />
            <MeasurementCell label="Waist" value={attrs.preciseWaist} />
            <MeasurementCell label="Hips" value={attrs.preciseHips} />
            <MeasurementCell label="Shoulders" value={attrs.shoulderWidth} />
            <MeasurementCell label="Arm Length" value={attrs.armLength} />
          </div>
        </div>
      )}
    </div>
  )
}

function ScoreCard({ label, value }: { label: string; value: number }) {
  const color =
    value >= 90
      ? "from-emerald-500/20 to-emerald-500/5 border-emerald-500/20 text-emerald-400"
      : value >= 75
        ? "from-white/10 to-white/3 border-white/10 text-white"
        : "from-amber-500/20 to-amber-500/5 border-amber-500/20 text-amber-400"

return (
    <div
      className={`rounded-xl p-3 bg-gradient-to-b border text-center ${color}`}
    >
      <motion.p
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ type: "spring", delay: 0.1 }}
        className="text-2xl font-bold font-mono"
      >
        {value}
      </motion.p>
      <p className="text-[10px] uppercase tracking-wider mt-1 opacity-60">{label}</p>
    </div>
  )
}

function MetricRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between">
      <span className="text-xs text-zinc-500">{label}</span>
      <Badge
        variant="secondary"
        className="bg-white/5 text-zinc-300 border-white/10 font-mono text-xs"
      >
        {value}
      </Badge>
    </div>
  )
}

function MeasurementCell({ label, value }: { label: string; value: string }) {
  return (
    <div className="p-2.5 bg-white/3 rounded-lg border border-white/5">
      <p className="text-[10px] text-zinc-500 uppercase tracking-wider">{label}</p>
      <p className="text-sm font-mono text-zinc-200 mt-0.5">{value}</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/digital-twin/twin-viewer-3d.tsx"
"use client"

import { useState, useRef, useCallback } from "react"
import { motion, useMotionValue, useSpring, AnimatePresence } from "framer-motion"
import type { User } from "@/lib/types"

interface TwinViewer3DProps {
  user: User
  mode: "head" | "body"
  showAnalysis: boolean
}

// Human head silhouette (oval)
const HEAD_RADIUS = "50%"
// Body mode uses a tall rounded rectangle (no clip-path, just border-radius)

export function TwinViewer3D({ user, mode, showAnalysis }: TwinViewer3DProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const isDragging = useRef(false)
  const lastX = useRef(0)
  const [zoom, setZoom] = useState(1)

const rotateY = useMotionValue(0)
  const smoothRotateY = useSpring(rotateY, { stiffness: 100, damping: 20 })

const avatar = user.avatar || "/placeholder.svg"
  const polaroids = user.polaroids || []
  const frontImg = avatar
  const sideImg = polaroids[1] || avatar
  const rightImg = polaroids[0] || avatar

const handlePointerDown = useCallback(
    (e: React.PointerEvent) => {
      isDragging.current = true
      lastX.current = e.clientX
      ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
    },
    [],
  )

const handlePointerMove = useCallback(
    (e: React.PointerEvent) => {
      if (!isDragging.current) return
      const delta = e.clientX - lastX.current
      rotateY.set(rotateY.get() + delta * 0.5)
      lastX.current = e.clientX
    },
    [rotateY],
  )

const handlePointerUp = useCallback(() => {
    isDragging.current = false
  }, [])

const analysis = user.digitalTwin?.attributes?.analysis
  const containerSize = mode === "head" ? "w-56 h-56" : "w-48 h-80"
  const translateZ = mode === "head" ? 110 : 90
  const borderRadius = mode === "head" ? "50%" : "24px"

return (
    <div
      ref={containerRef}
      className="relative w-full h-full bg-[#08080c] overflow-hidden select-none"
      style={{ touchAction: "none" }}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
    >
      {/* Subtle grid background */}
      <div className="absolute inset-0 opacity-10">
        <div
          className="w-full h-full"
          style={{
            backgroundImage:
              "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)",
            backgroundSize: "40px 40px",
          }}
        />
      </div>

{/* Soft radial glow */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.03)_0%,transparent_60%)]" />

{/* 3D Model */}
      <div
        className="absolute inset-0 flex items-center justify-center"
        style={{ perspective: "800px" }}
      >
        <motion.div
          layout
          style={{
            rotateY: smoothRotateY,
            transformStyle: "preserve-3d",
            scale: zoom,
          }}
          transition={{ layout: { type: "spring", stiffness: 80, damping: 18 } }}
          className={containerSize}
        >
          {/* Front face */}
          <motion.div
            layout
            className="absolute inset-0 backface-hidden overflow-hidden"
            style={{ transform: `translateZ(${translateZ}px)` }}
            transition={{ layout: { type: "spring", stiffness: 80, damping: 18 } }}
          >
            <div
              className="w-full h-full rounded-2xl overflow-hidden border border-white/10"
              style={{ borderRadius }}
            >
              <img
                src={frontImg}
                alt="Front"
                className="w-full h-full object-cover"
                style={{ objectPosition: mode === "head" ? "center 20%" : "center" }}
                draggable={false}
              />
            </div>
          </motion.div>

{/* Right face */}
          <motion.div
            layout
            className="absolute inset-0 backface-hidden overflow-hidden"
            style={{ transform: `rotateY(90deg) translateZ(${translateZ}px)` }}
            transition={{ layout: { type: "spring", stiffness: 80, damping: 18 } }}
          >
            <div
              className="w-full h-full rounded-2xl overflow-hidden border border-white/8"
              style={{ borderRadius }}
            >
              <img
                src={rightImg}
                alt="Right"
                className="w-full h-full object-cover"
                style={{ filter: "brightness(0.85)", objectPosition: mode === "head" ? "center 20%" : "center" }}
                draggable={false}
              />
            </div>
          </motion.div>

{/* Back face */}
          <motion.div
            layout
            className="absolute inset-0 backface-hidden overflow-hidden"
            style={{ transform: `rotateY(180deg) translateZ(${translateZ}px)` }}
            transition={{ layout: { type: "spring", stiffness: 80, damping: 18 } }}
          >
            <div
              className="w-full h-full rounded-2xl overflow-hidden border border-white/5"
              style={{ borderRadius }}
            >
              <img
                src={frontImg}
                alt="Back"
                className="w-full h-full object-cover"
                style={{ filter: "brightness(0.25) grayscale(1) blur(2px)", objectPosition: mode === "head" ? "center 20%" : "center" }}
                draggable={false}
              />
            </div>
          </motion.div>

{/* Left face */}
          <motion.div
            layout
            className="absolute inset-0 backface-hidden overflow-hidden"
            style={{ transform: `rotateY(-90deg) translateZ(${translateZ}px)` }}
            transition={{ layout: { type: "spring", stiffness: 80, damping: 18 } }}
          >
            <div
              className="w-full h-full rounded-2xl overflow-hidden border border-white/8"
              style={{ borderRadius }}
            >
              <img
                src={sideImg}
                alt="Left"
                className="w-full h-full object-cover"
                style={{ filter: "brightness(0.85)", objectPosition: mode === "head" ? "center 20%" : "center" }}
                draggable={false}
              />
            </div>
          </motion.div>
        </motion.div>
      </div>

{/* Analysis overlay — minimal, no scan lines */}
      <AnimatePresence>
        {showAnalysis && analysis && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            {/* Score callouts */}
            <div className="absolute top-4 right-4 z-10 space-y-2">
              <ScoreCallout label="Symmetry" value={analysis.symmetryScore} />
              <ScoreCallout label="Golden Ratio" value={analysis.goldenRatioScore} />
              <ScoreCallout label="Harmony" value={analysis.overallHarmony} />
            </div>

<div className="absolute bottom-14 left-4 z-10 space-y-1">
              <div className="text-[10px] text-zinc-400/70 uppercase tracking-wider font-mono">
                Eye Spacing: {analysis.eyeSpacing}
              </div>
              <div className="text-[10px] text-zinc-400/70 uppercase tracking-wider font-mono">
                Jaw Angle: {analysis.jawAngle}°
              </div>
              <div className="text-[10px] text-zinc-400/70 uppercase tracking-wider font-mono">
                Nose Ratio: {analysis.noseBridgeRatio}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

{/* Zoom controls */}
      <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1 bg-black/60 backdrop-blur-sm rounded-full px-2 py-1 z-20">
        <button
          type="button"
          className="p-1.5 text-zinc-400 hover:text-white transition-colors"
          onClick={() => rotateY.set(rotateY.get() - 45)}
        >
          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M1 4v6h6M23 20v-6h-6" />
            <path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" />
          </svg>
        </button>
        <div className="w-px h-4 bg-zinc-700" />
        <button
          type="button"
          className="p-1.5 text-zinc-400 hover:text-white transition-colors"
          onClick={() => setZoom((z) => Math.max(0.5, z - 0.2))}
        >
          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35M8 11h6" />
          </svg>
        </button>
        <button
          type="button"
          className="p-1.5 text-zinc-400 hover:text-white transition-colors"
          onClick={() => setZoom((z) => Math.min(2, z + 0.2))}
        >
          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35M8 11h6M11 8v6" />
          </svg>
        </button>
      </div>

{/* Drag hint */}
      <div className="absolute top-3 left-1/2 -translate-x-1/2 text-[10px] text-zinc-500 font-mono uppercase tracking-wider z-10">
        Drag to rotate
      </div>
    </div>
  )
}

function ScoreCallout({ label, value }: { label: string; value: number }) {
  const color =
    value >= 90
      ? "text-emerald-400"
      : value >= 75
        ? "text-zinc-200"
        : value >= 60
          ? "text-amber-400"
          : "text-zinc-400"

return (
    <div className="flex items-center gap-2 bg-black/60 backdrop-blur-sm rounded-lg px-2.5 py-1.5">
      <span className="text-[10px] text-zinc-400 uppercase tracking-wider font-mono">
        {label}
      </span>
      <span className={`text-sm font-bold font-mono ${color}`}>
        {value}
      </span>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/explore/explore-view.tsx"
"use client"

import { useState } from "react"
import { Search, X, BadgeCheck } from "lucide-react"
import { Input } from "@/components/ui/input"
import { mockPosts, mockUsers } from "@/lib/mock-data"
import { cn } from "@/lib/utils"

interface ExploreViewProps {
  onProfileClick: (userId: string) => void
  onPostClick: (postId: string) => void
}

const categories = ["All", "Models", "Brands", "Agencies", "Photographers", "Trending"]

export function ExploreView({ onProfileClick, onPostClick }: ExploreViewProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [activeCategory, setActiveCategory] = useState("All")
  const [isSearchFocused, setIsSearchFocused] = useState(false)

const filteredUsers = mockUsers.filter(
    (user) =>
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.username.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="min-h-screen pb-20">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 glass border-b border-border/30">
        <div className="px-4 py-3">
          <div className="relative">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Search models, brands, agencies..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onFocus={() => setIsSearchFocused(true)}
              onBlur={() => setTimeout(() => setIsSearchFocused(false), 200)}
              className="h-12 pl-12 pr-10 bg-secondary/50 border-0 rounded-xl text-base"
            />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery("")}
                className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
              >
                <X className="h-5 w-5" />
              </button>
            )}
          </div>
        </div>

{/* Categories */}
        {!isSearchFocused && (
          <div className="flex gap-2 px-4 pb-3 overflow-x-auto scrollbar-hide">
            {categories.map((category) => (
              <button
                key={category}
                onClick={() => setActiveCategory(category)}
                className={cn(
                  "px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-all min-h-[44px]",
                  activeCategory === category
                    ? "bg-gold text-primary-foreground"
                    : "bg-secondary/50 text-muted-foreground hover:bg-secondary",
                )}
              >
                {category}
              </button>
            ))}
          </div>
        )}
      </header>

<main className={cn("pt-28", !isSearchFocused && "pt-36")}>
        {/* Search Results */}
        {isSearchFocused && searchQuery && (
          <div className="px-4 space-y-2">
            {filteredUsers.map((user) => (
              <button
                key={user.id}
                onClick={() => onProfileClick(user.id)}
                className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-secondary/50 transition-colors"
              >
                <div
                  className={cn(
                    "w-12 h-12 rounded-full p-[2px]",
                    user.verified ? "bg-gradient-to-br from-gold to-gold-muted" : "bg-border",
                  )}
                >
                  <div className="w-full h-full rounded-full overflow-hidden bg-background">
                    <img
                      src={user.avatar || "/placeholder.svg"}
                      alt={user.name}
                      className="w-full h-full object-cover"
                    />
                  </div>
                </div>
                <div className="flex-1 text-left">
                  <div className="flex items-center gap-1">
                    <span className="font-medium">{user.username}</span>
                    {user.verified && <BadgeCheck className="h-4 w-4 text-gold fill-gold/20" />}
                  </div>
                  <span className="text-sm text-muted-foreground">{user.name}</span>
                </div>
                <span className="text-xs text-muted-foreground capitalize px-2 py-1 bg-secondary/50 rounded-full">
                  {user.role}
                </span>
              </button>
            ))}
          </div>
        )}

{/* Grid */}
        {!isSearchFocused && (
          <div className="grid grid-cols-3 gap-[2px] px-[2px]">
            {mockPosts.map((post) => (
              <button
                key={post.id}
                onClick={() => onPostClick(post.id)}
                className="relative aspect-square overflow-hidden"
              >
                <img
                  src={post.media[0] || "/placeholder.svg"}
                  alt=""
                  className="w-full h-full object-cover hover:opacity-90 transition-opacity"
                />
                {post.media.length > 1 && (
                  <div className="absolute top-2 right-2">
                    <svg className="w-4 h-4 text-foreground drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M4 6h2v2H4V6zm0 5h2v2H4v-2zm0 5h2v2H4v-2zm16-8V6H8v14h14v-2h-2V8h2z" />
                    </svg>
                  </div>
                )}
              </button>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/feed/bottom-nav.tsx"
"use client"

import { Home, Search, PlusSquare, ShoppingBag, User } from "lucide-react"
import { cn } from "@/lib/utils"

export type NavTab = "feed" | "explore" | "create" | "marketplace" | "profile"

interface BottomNavProps {
  activeTab: NavTab
  onTabChange: (tab: NavTab) => void
}

const navItems: { id: NavTab; icon: typeof Home; label: string }[] = [
  { id: "feed", icon: Home, label: "Home" },
  { id: "explore", icon: Search, label: "Explore" },
  { id: "create", icon: PlusSquare, label: "Create" },
  { id: "marketplace", icon: ShoppingBag, label: "Market" },
  { id: "profile", icon: User, label: "Profile" },
]

export function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 glass border-t border-border/30">
      <div className="flex items-center justify-around h-16 px-2 pb-safe">
        {navItems.map((item) => {
          const Icon = item.icon
          const isActive = activeTab === item.id
          const isCreate = item.id === "create"

return (
            <button
              key={item.id}
              onClick={() => onTabChange(item.id)}
              className={cn(
                "flex flex-col items-center justify-center gap-1 min-w-[64px] min-h-[44px] transition-all",
                isCreate && "relative",
              )}
            >
              {isCreate ? (
                <div className="w-10 h-10 rounded-xl bg-gold flex items-center justify-center">
                  <Icon className="h-5 w-5 text-primary-foreground" />
                </div>
              ) : (
                <>
                  <Icon className={cn("h-6 w-6 transition-colors", isActive ? "text-gold" : "text-muted-foreground")} />
                  <span
                    className={cn(
                      "text-[10px] font-medium transition-colors",
                      isActive ? "text-gold" : "text-muted-foreground",
                    )}
                  >
                    {item.label}
                  </span>
                </>
              )}
            </button>
          )
        })}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/feed/feed-header.tsx"
"use client"

import { Bell, MessageCircle } from "lucide-react"
import { LuxlaneLogo } from "@/components/ui/luxlane-logo"

interface FeedHeaderProps {
  unreadMessages: number
  unreadNotifications: number
  onMessagesClick: () => void
  onNotificationsClick: () => void
}

export function FeedHeader({
  unreadMessages,
  unreadNotifications,
  onMessagesClick,
  onNotificationsClick,
}: FeedHeaderProps) {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 glass border-b border-border/30">
      <div className="flex items-center justify-between h-14 px-4">
        <LuxlaneLogo size="sm" />

<div className="flex items-center gap-2">
          <button
            onClick={onNotificationsClick}
            className="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-secondary/50 transition-colors"
          >
            <Bell className="h-5 w-5" />
            {unreadNotifications > 0 && (
              <span className="absolute top-1 right-1 w-4 h-4 bg-gold text-[10px] font-bold text-primary-foreground rounded-full flex items-center justify-center">
                {unreadNotifications > 9 ? "9+" : unreadNotifications}
              </span>
            )}
          </button>

<button
            onClick={onMessagesClick}
            className="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-secondary/50 transition-colors"
          >
            <MessageCircle className="h-5 w-5" />
            {unreadMessages > 0 && (
              <span className="absolute top-1 right-1 w-4 h-4 bg-gold text-[10px] font-bold text-primary-foreground rounded-full flex items-center justify-center">
                {unreadMessages > 9 ? "9+" : unreadMessages}
              </span>
            )}
          </button>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/feed/feed-view.tsx"
"use client"

import { useState } from "react"
import { FeedHeader } from "./feed-header"
import { StoriesBar } from "./stories-bar"
import { PostCard } from "./post-card"
import { mockPosts, mockUsers, getCurrentUser } from "@/lib/mock-data"

interface FeedViewProps {
  onMessagesClick: () => void
  onProfileClick: (userId: string) => void
}

export function FeedView({ onMessagesClick, onProfileClick }: FeedViewProps) {
  const currentUser = getCurrentUser()
  const [posts, setPosts] = useState(mockPosts)

const handleLike = (postId: string) => {
    setPosts((prev) =>
      prev.map((post) =>
        post.id === postId
          ? { ...post, liked: !post.liked, likes: post.liked ? post.likes - 1 : post.likes + 1 }
          : post,
      ),
    )
  }

const handleBookmark = (postId: string) => {
    setPosts((prev) => prev.map((post) => (post.id === postId ? { ...post, bookmarked: !post.bookmarked } : post)))
  }

return (
    <div className="min-h-screen pb-20">
      <FeedHeader
        unreadMessages={2}
        unreadNotifications={5}
        onMessagesClick={onMessagesClick}
        onNotificationsClick={() => {}}
      />

<main className="pt-14">
        <StoriesBar
          currentUser={currentUser}
          users={mockUsers.filter((u) => u.id !== currentUser.id)}
          onStoryClick={() => {}}
          onAddStory={() => {}}
        />

<div>
          {posts.map((post) => (
            <PostCard
              key={post.id}
              post={post}
              onLike={handleLike}
              onComment={() => {}}
              onShare={() => {}}
              onBookmark={handleBookmark}
              onProfileClick={onProfileClick}
            />
          ))}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/feed/post-card.tsx"
"use client"

import { useState } from "react"
import { Heart, MessageCircle, Send, Bookmark, MoreHorizontal, BadgeCheck } from "lucide-react"
import type { Post } from "@/lib/types"
import { cn } from "@/lib/utils"
import { formatDistanceToNow } from "@/lib/format"

interface PostCardProps {
  post: Post
  onLike: (postId: string) => void
  onComment: (postId: string) => void
  onShare: (postId: string) => void
  onBookmark: (postId: string) => void
  onProfileClick: (userId: string) => void
}

export function PostCard({ post, onLike, onComment, onShare, onBookmark, onProfileClick }: PostCardProps) {
  const [currentMediaIndex, setCurrentMediaIndex] = useState(0)
  const [isLiked, setIsLiked] = useState(post.liked)
  const [isBookmarked, setIsBookmarked] = useState(post.bookmarked)
  const [likeCount, setLikeCount] = useState(post.likes)

const handleLike = () => {
    setIsLiked(!isLiked)
    setLikeCount((prev) => (isLiked ? prev - 1 : prev + 1))
    onLike(post.id)
  }

const handleBookmark = () => {
    setIsBookmarked(!isBookmarked)
    onBookmark(post.id)
  }

const formatCount = (count: number): string => {
    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`
    if (count >= 1000) return `${(count / 1000).toFixed(1)}K`
    return count.toString()
  }

return (
    <article className="border-b border-border/30">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3">
        <button onClick={() => onProfileClick(post.user.id)} className="flex items-center gap-3">
          <div
            className={cn(
              "w-10 h-10 rounded-full p-[2px]",
              post.user.verified ? "bg-gradient-to-br from-gold to-gold-muted" : "bg-border",
            )}
          >
            <div className="w-full h-full rounded-full overflow-hidden bg-background">
              <img
                src={post.user.avatar || "/placeholder.svg"}
                alt={post.user.name}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
          <div className="text-left">
            <div className="flex items-center gap-1">
              <span className="font-medium text-sm">{post.user.username}</span>
              {post.user.verified && <BadgeCheck className="h-4 w-4 text-gold fill-gold/20" />}
            </div>
            <span className="text-xs text-muted-foreground">{post.user.location}</span>
          </div>
        </button>

{/* Media */}
      <div className="relative aspect-[4/5] bg-secondary">
        <img
          src={post.media[currentMediaIndex] || "/placeholder.svg"}
          alt={post.caption}
          className="w-full h-full object-cover"
        />

{/* Carousel Indicators */}
        {post.media.length > 1 && (
          <>
            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1">
              {post.media.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setCurrentMediaIndex(index)}
                  className={cn(
                    "w-1.5 h-1.5 rounded-full transition-all",
                    index === currentMediaIndex ? "bg-foreground w-3" : "bg-foreground/50",
                  )}
                />
              ))}
            </div>
            <div className="absolute top-4 right-4 px-2 py-1 rounded-full bg-background/60 text-xs">
              {currentMediaIndex + 1}/{post.media.length}
            </div>
          </>
        )}
      </div>

{/* Actions */}
      <div className="px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button
              onClick={handleLike}
              className="flex items-center gap-2 min-h-[44px] transition-transform active:scale-90"
            >
              <Heart className={cn("h-6 w-6 transition-colors", isLiked ? "fill-red-500 text-red-500" : "")} />
            </button>
            <button onClick={() => onComment(post.id)} className="flex items-center gap-2 min-h-[44px]">
              <MessageCircle className="h-6 w-6" />
            </button>
            <button onClick={() => onShare(post.id)} className="flex items-center gap-2 min-h-[44px]">
              <Send className="h-6 w-6" />
            </button>
          </div>

{/* Likes */}
        <div className="mt-2">
          <span className="font-semibold text-sm">{formatCount(likeCount)} likes</span>
        </div>

{/* Caption */}
        <div className="mt-1">
          <span className="text-sm">
            <button onClick={() => onProfileClick(post.user.id)} className="font-semibold mr-1">
              {post.user.username}
            </button>
            {post.caption}
          </span>
        </div>

{/* Comments Link */}
        {post.comments > 0 && (
          <button onClick={() => onComment(post.id)} className="mt-1 text-sm text-muted-foreground">
            View all {formatCount(post.comments)} comments
          </button>
        )}

{/* Timestamp */}
        <p className="mt-1 text-xs text-muted-foreground uppercase">{formatDistanceToNow(post.createdAt)}</p>
      </div>
    </article>
  )
}
[V0_FILE]typescriptreact:file="components/feed/stories-bar.tsx"
"use client"

import { Plus } from "lucide-react"
import type { User } from "@/lib/types"
import { cn } from "@/lib/utils"

interface StoriesBarProps {
  currentUser: User
  users: User[]
  onStoryClick: (userId: string) => void
  onAddStory: () => void
}

export function StoriesBar({ currentUser, users, onStoryClick, onAddStory }: StoriesBarProps) {
  return (
    <div className="py-4 border-b border-border/30">
      <div className="flex gap-4 px-4 overflow-x-auto scrollbar-hide">
        {/* Add Story */}
        <button onClick={onAddStory} className="flex flex-col items-center gap-2 min-w-[72px]">
          <div className="relative">
            <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-border">
              <img
                src={currentUser.avatar || "/placeholder.svg"}
                alt="Your story"
                className="w-full h-full object-cover"
              />
            </div>
            <div className="absolute bottom-0 right-0 w-5 h-5 bg-gold rounded-full flex items-center justify-center border-2 border-background">
              <Plus className="h-3 w-3 text-primary-foreground" />
            </div>
          </div>
          <span className="text-xs text-muted-foreground">Your story</span>
        </button>

{/* Other Stories */}
        {users.map((user) => (
          <button
            key={user.id}
            onClick={() => onStoryClick(user.id)}
            className="flex flex-col items-center gap-2 min-w-[72px]"
          >
            <div
              className={cn(
                "w-16 h-16 rounded-full p-[2px]",
                user.verified ? "bg-gradient-to-br from-gold to-gold-muted" : "bg-border",
              )}
            >
              <div className="w-full h-full rounded-full overflow-hidden bg-background">
                <img src={user.avatar || "/placeholder.svg"} alt={user.name} className="w-full h-full object-cover" />
              </div>
            </div>
            <span className="text-xs text-foreground truncate max-w-[72px]">{user.username}</span>
          </button>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/active-castings.tsx"
"use client"

import { motion } from "framer-motion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { useAuth } from "@/lib/auth-context"
import { useStore } from "@/lib/store-context"
import type { Casting } from "@/lib/types"
import { MapPin, Clock, ChevronRight, BadgeCheck } from "lucide-react"
import { formatDistanceToNow } from "date-fns"

interface ActiveCastingsProps {
  onViewCasting: (casting: Casting) => void
  onViewAll: () => void
}

export function ActiveCastings({ onViewCasting, onViewAll }: ActiveCastingsProps) {
  const { user } = useAuth()
  const { getActiveCastings } = useStore()
  const activeCastings = getActiveCastings().slice(0, 6)

const typeLabels: Record<string, string> = {
    runway: "Runway",
    campaign: "Campaign",
    editorial: "Editorial",
    commercial: "Commercial",
    event: "Event",
    fitting: "Fitting",
  }

const getActionLabel = () => {
    switch (user?.role) {
      case "model":
        return "Apply"
      case "agency":
        return "Submit"
      case "brand":
        return "Review"
      case "client":
        return "View"
      default:
        return "View"
    }
  }

return (
    <section className="px-4 py-4">
      <div className="flex items-center justify-between mb-3">
        <h2 className="font-semibold text-base">Active Castings</h2>
        <Button variant="ghost" size="sm" className="text-muted-foreground h-8" onClick={onViewAll}>
          View all
          <ChevronRight className="w-4 h-4 ml-1" />
        </Button>
      </div>

{activeCastings.length === 0 ? (
        <Card className="p-6 text-center">
          <p className="text-muted-foreground text-sm">No active castings available</p>
        </Card>
      ) : (
        <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 no-scrollbar">
          {activeCastings.map((casting, index) => (
            <motion.div
              key={casting.id}
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.05 }}
              className="shrink-0"
            >
              <Card
                className="w-[280px] overflow-hidden cursor-pointer hover:bg-muted/30 transition-colors !p-0 !gap-0"
                onClick={() => onViewCasting(casting)}
              >
                {/* Casting image */}
                <div className="aspect-[16/10] bg-muted relative overflow-hidden">
                  <img
                    src={casting.images?.[0] || "/placeholder.svg"}
                    alt={casting.title}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute top-2 left-2 flex gap-1">
                    <Badge variant="secondary" className="text-[10px] h-5 bg-background/90 backdrop-blur-sm">
                      {typeLabels[casting.type]}
                    </Badge>
                  </div>
                </div>

<div className="p-3">
                  <h3 className="font-medium text-sm truncate">{casting.title}</h3>

{/* Creator */}
                  <div className="flex items-center gap-1.5 mt-1.5">
                    <Avatar className="w-4 h-4">
                      <AvatarImage src={casting.creator.avatar || "/placeholder.svg"} alt={casting.creator.name} />
                      <AvatarFallback className="text-[8px]">{casting.creator.name[0]}</AvatarFallback>
                    </Avatar>
                    <span className="text-xs text-muted-foreground truncate">{casting.creator.name}</span>
                    {casting.creator.verified && <BadgeCheck className="w-3 h-3 text-foreground shrink-0" />}
                  </div>

{/* Meta */}
                  <div className="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <MapPin className="w-3 h-3" />
                      {casting.location?.split(",")[0] || "TBD"}
                    </span>
                    <span className="flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      {formatDistanceToNow(casting.deadline, { addSuffix: false })}
                    </span>
                  </div>

{/* Pay + Action */}
                  <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
                    <span className="text-sm font-medium">
                      {casting.pay.type === "tbd"
                        ? "TBD"
                        : `${casting.pay.currency} ${casting.pay.amount.toLocaleString()}`}
                    </span>
                    <Button size="sm" variant="outline" className="h-7 text-xs bg-transparent" onClick={(e) => { e.stopPropagation(); onViewCasting(casting) }}>
                      {getActionLabel()}
                    </Button>
                  </div>
                </div>
              </Card>
            </motion.div>
          ))}
        </div>
      )}
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/feed-post.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { Heart, MessageCircle, Share2, Bookmark, MoreHorizontal, BadgeCheck, Send, Trash2 } from "lucide-react"
import { useAuth } from "@/lib/auth-context"
import { formatDistanceToNow } from "date-fns"
import { api } from "@/lib/api-client"

interface FeedPostProps {
  post: {
    id: string
    user: {
      name: string
      username: string
      avatar: string
      verified: boolean
    }
    image: string
    caption: string
    likes: number
    comments: number
    likedByMe?: boolean
    savedByMe?: boolean
    createdAt: Date
  }
  onUserClick?: () => void
  onLike?: () => void
  onSave?: () => void
  refreshFeed?: () => void
}

interface CommentItem {
  id: string
  user: { name: string; username: string; avatar: string }
  body: string
  createdAt: string
}

export function FeedPost({ post, onUserClick, onLike, onSave, refreshFeed }: FeedPostProps) {
  const { user: currentUser } = useAuth()
  const [liked, setLiked] = useState(post.likedByMe ?? false)
  const [saved, setSaved] = useState(post.savedByMe ?? false)
  const [likeCount, setLikeCount] = useState(post.likes)
  const [showCommentsSheet, setShowCommentsSheet] = useState(false)
  const [showMenu, setShowMenu] = useState(false)
  const [deleted, setDeleted] = useState(false)

const isOwnPost = currentUser?.username === post.user.username

const handleDelete = async () => {
    if (!confirm("Delete this post?")) return
    const res = await api.deletePost(post.id)
    if (!res.error) {
      setDeleted(true)
      refreshFeed?.()
    }
  }

if (deleted) return null
  const [comments, setComments] = useState<CommentItem[]>([])
  const [commentsLoading, setCommentsLoading] = useState(false)
  const [commentInput, setCommentInput] = useState("")
  const [commentSending, setCommentSending] = useState(false)

const loadComments = useCallback(async () => {
    setCommentsLoading(true)
    const res = await api.getComments(post.id)
    if (!res.error && Array.isArray(res.data)) {
      setComments(res.data as CommentItem[])
    }
    setCommentsLoading(false)
  }, [post.id])

useEffect(() => {
    setLiked(post.likedByMe ?? false)
    setSaved(post.savedByMe ?? false)
    setLikeCount(post.likes)
  }, [post.id, post.likedByMe, post.savedByMe, post.likes])

useEffect(() => {
    if (showCommentsSheet) loadComments()
  }, [showCommentsSheet, loadComments])

const handleLike = () => {
    if (onLike) {
      onLike()
      setLiked(!liked)
      setLikeCount((prev) => (liked ? prev - 1 : prev + 1))
    } else {
      setLiked(!liked)
      setLikeCount((prev) => (liked ? prev - 1 : prev + 1))
    }
  }

const handleSave = () => {
    if (onSave) onSave()
    setSaved(!saved)
  }

const handleSendComment = async () => {
    const body = commentInput.trim()
    if (!body || commentSending) return
    setCommentSending(true)
    const res = await api.addComment(post.id, body)
    setCommentSending(false)
    if (res.error) return
    setCommentInput("")
    loadComments()
    refreshFeed?.()
  }

return (
    <article className="border-b border-border">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3">
        <button className="flex items-center gap-2" onClick={onUserClick}>
          <Avatar className="w-8 h-8">
            <AvatarImage src={post.user.avatar || "/placeholder.svg"} alt={post.user.name} />
            <AvatarFallback>{post.user.name[0]}</AvatarFallback>
          </Avatar>
          <div className="flex items-center gap-1">
            <span className="font-medium text-sm">{post.user.username}</span>
            {post.user.verified && <BadgeCheck className="w-4 h-4 text-foreground" />}
          </div>
        </button>
        <div className="relative">
          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setShowMenu(!showMenu)}>
            <MoreHorizontal className="w-5 h-5" />
          </Button>
          {showMenu && (
            <div className="absolute right-0 top-8 z-50 bg-background border border-border rounded-lg shadow-lg py-1 min-w-[140px]">
              {isOwnPost && (
                <button
                  className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-500 hover:bg-muted"
                  onClick={() => { setShowMenu(false); handleDelete() }}
                >
                  <Trash2 className="w-4 h-4" /> Delete post
                </button>
              )}
              <button
                className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted"
                onClick={() => setShowMenu(false)}
              >
                <Share2 className="w-4 h-4" /> Share
              </button>
            </div>
          )}
        </div>
      </div>

{/* Image */}
      <div className="aspect-[4/5] bg-muted">
        <img src={post.image || "/placeholder.svg"} alt={post.caption} className="w-full h-full object-cover" />
      </div>

{/* Actions */}
      <div className="px-4 py-3">
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" className="h-9 w-9" onClick={handleLike}>
              <Heart className={`w-6 h-6 ${liked ? "fill-destructive text-destructive" : ""}`} />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              className="h-9 w-9"
              onClick={() => setShowCommentsSheet(true)}
            >
              <MessageCircle className="w-6 h-6" />
            </Button>
            <Button variant="ghost" size="icon" className="h-9 w-9">
              <Share2 className="w-5 h-5" />
            </Button>
          </div>
            <Button variant="ghost" size="icon" className="h-9 w-9" onClick={handleSave}>
            <Bookmark className={`w-6 h-6 ${saved ? "fill-foreground" : ""}`} />
          </Button>
        </div>

{/* Likes */}
        <p className="font-semibold text-sm mb-1">{likeCount.toLocaleString()} likes</p>

{/* Caption */}
        <p className="text-sm">
          <button
            type="button"
            className="font-semibold mr-1 hover:underline focus:outline-none"
            onClick={onUserClick}
          >
            {post.user.username}
          </button>
          {post.caption}
        </p>

{/* Comments */}
        <button
          type="button"
          className="text-sm text-muted-foreground mt-1 hover:underline"
          onClick={() => setShowCommentsSheet(true)}
        >
          {post.comments > 0 ? `View all ${post.comments} comments` : "Add a comment…"}
        </button>

{/* Timestamp */}
        <p className="text-[11px] text-muted-foreground mt-1 uppercase">
          {formatDistanceToNow(post.createdAt, { addSuffix: true })}
        </p>
      </div>

{/* Comments Sheet */}
      <Sheet open={showCommentsSheet} onOpenChange={setShowCommentsSheet}>
        <SheetContent side="bottom" className="h-[70vh] flex flex-col rounded-t-2xl">
          <SheetHeader>
            <SheetTitle>Comments</SheetTitle>
          </SheetHeader>
          <div className="flex-1 overflow-y-auto py-4 space-y-3 min-h-0">
            {commentsLoading ? (
              <p className="text-sm text-muted-foreground">Loading…</p>
            ) : comments.length === 0 ? (
              <p className="text-sm text-muted-foreground">No comments yet. Be the first.</p>
            ) : (
              comments.map((c) => (
                <div key={c.id} className="flex gap-3">
                  <Avatar className="w-8 h-8 shrink-0">
                    <AvatarImage src={c.user.avatar || "/placeholder.svg"} alt={c.user.name} />
                    <AvatarFallback>{c.user.name[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm">
                      <span className="font-semibold">{c.user.username}</span>{" "}
                      <span className="text-muted-foreground">{c.body}</span>
                    </p>
                    <p className="text-[10px] text-muted-foreground mt-0.5">
                      {formatDistanceToNow(new Date(c.createdAt), { addSuffix: true })}
                    </p>
                  </div>
                </div>
              ))
            )}
          </div>
          <div className="flex gap-2 pt-3 border-t border-border">
            <Input
              placeholder="Add a comment…"
              value={commentInput}
              onChange={(e) => setCommentInput(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSendComment()}
              className="flex-1"
            />
            <Button size="icon" onClick={handleSendComment} disabled={!commentInput.trim() || commentSending}>
              <Send className="w-4 h-4" />
            </Button>
          </div>
        </SheetContent>
      </Sheet>
    </article>
  )
}
[V0_FILE]typescriptreact:file="components/home/feed-toggle.tsx"
"use client"

interface FeedToggleProps {
  active: "foryou" | "following"
  onChange: (value: "foryou" | "following") => void
}

export function FeedToggle({ active, onChange }: FeedToggleProps) {
  return (
    <div className="flex items-center justify-center gap-6 py-3 border-b border-border">
      <button
        onClick={() => onChange("foryou")}
        className={`relative text-sm font-medium transition-colors pb-3 ${
          active === "foryou" ? "text-foreground" : "text-muted-foreground"
        }`}
      >
        Explore
        <span
          className={`absolute bottom-0 left-0 right-0 h-0.5 bg-foreground transition-opacity duration-200 ${
            active === "foryou" ? "opacity-100" : "opacity-0"
          }`}
        />
      </button>
      <button
        onClick={() => onChange("following")}
        className={`relative text-sm font-medium transition-colors pb-3 ${
          active === "following" ? "text-foreground" : "text-muted-foreground"
        }`}
      >
        Following
        <span
          className={`absolute bottom-0 left-0 right-0 h-0.5 bg-foreground transition-opacity duration-200 ${
            active === "following" ? "opacity-100" : "opacity-0"
          }`}
        />
      </button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/home-view.tsx"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ActiveCastings } from "./active-castings"
import { FeedToggle } from "./feed-toggle"
import { SwipeFeed } from "./swipe-feed"
import { StoryBar } from "@/components/stories/story-bar"
import { StoryViewer } from "@/components/stories/story-viewer"
import { MyRankCard } from "@/components/scoreboard/my-rank-card"
import { useAuth } from "@/lib/auth-context"
import { useStore } from "@/lib/store-context"
import { usePosts } from "@/lib/hooks/use-posts"
import { api } from "@/lib/api-client"
import { getRecommendedCastingsForModel } from "@/lib/ai-matching"
import { Card } from "@/components/ui/card"
import { CreateStorySheet } from "@/components/stories/create-story-sheet"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { ChevronRight, Sparkles, MapPin, DollarSign, Calendar, Clock, Plus, ImageIcon, Loader2, Send } from "lucide-react"
import type { Casting, User } from "@/lib/types"

interface HomeViewProps {
  onViewCasting: (casting: Casting) => void
  onViewProfile: (user: User) => void
  onViewCastingsHub: () => void
  onViewScoreboard: () => void
}

export function HomeView({ onViewCasting, onViewProfile, onViewCastingsHub, onViewScoreboard }: HomeViewProps) {
  const router = useRouter()
  const { user } = useAuth()
  const { castings } = useStore()
  const [feedType, setFeedType] = useState<"foryou" | "following">("foryou")
  const { posts: apiPosts, isLoading: postsLoading, refresh: refreshPosts } = usePosts({
    feed: feedType === "following" ? "following" : undefined,
  })

const handleLike = async (postId: string, currentlyLiked: boolean) => {
    const res = currentlyLiked ? await api.unlikePost(postId) : await api.likePost(postId)
    if (!res.error) refreshPosts()
  }

const handleSave = async (postId: string, currentlySaved: boolean) => {
    const res = currentlySaved ? await api.unsavePost(postId) : await api.savePost(postId)
    if (!res.error) refreshPosts()
  }

const handleUserClick = (username: string) => {
    router.push("/u/" + username)
  }

const isModel = user?.role === "model"

// Story + Post creation state
  const [showCreateStory, setShowCreateStory] = useState(false)
  const [showCreatePost, setShowCreatePost] = useState(false)
  const [newPostCaption, setNewPostCaption] = useState("")
  const [newPostImage, setNewPostImage] = useState("")
  const [postCreating, setPostCreating] = useState(false)

// Story viewer state
  const [viewingStories, setViewingStories] = useState<{
    userId: string
    username: string
    name: string
    avatar: string | null
    isOwn: boolean
    stories: { id: string; mediaUrl: string; mediaType: string; caption: string | null; viewCount: number; viewed: boolean; createdAt: string; expiresAt: string }[]
  } | null>(null)

// Get recommended castings for model
  const recommendedCastings = isModel && user ? getRecommendedCastingsForModel(user, castings, 3) : []

return (
    <div className="pb-20">
      {/* Stories Bar */}
      <StoryBar
        onViewStories={(u) => setViewingStories(u)}
        onCreateStory={() => setShowCreateStory(true)}
      />

{/* Create Story Sheet */}
      <CreateStorySheet
        open={showCreateStory}
        onClose={() => setShowCreateStory(false)}
        onCreated={() => {
          // Stories will refresh on next feed load
        }}
      />

{/* Welcome Card — for new users with no followers/posts */}
      {user && feedPosts.length === 0 && !postsLoading && (
        <div className="px-4 pt-2 pb-3">
          <Card className="p-5 bg-gradient-to-br from-zinc-900 to-zinc-800 border-zinc-700">
            <h3 className="font-bold text-lg mb-1">Welcome to Luxlane! 👋</h3>
            <p className="text-sm text-muted-foreground mb-4">
              {user.role === "model"
                ? "Start by completing your profile, browsing castings, and following brands."
                : user.role === "agency"
                  ? "Scout models, create castings, and build your roster."
                  : user.role === "brand"
                    ? "Create your first casting, browse models, and find the perfect talent."
                    : "Browse models, create castings, and connect with talent."}
            </p>
            <div className="flex gap-2 flex-wrap">
              {user.role === "model" && (
                <>
                  <Button size="sm" variant="secondary" onClick={onViewCastingsHub}>Browse Castings</Button>
                  <Button size="sm" variant="outline" className="bg-transparent" onClick={() => setShowCreatePost(true)}>Create Post</Button>
                </>
              )}
              {(user.role === "brand" || user.role === "client") && (
                <Button size="sm" variant="secondary" onClick={onViewCastingsHub}>Create Casting</Button>
              )}
              {user.role === "agency" && (
                <Button size="sm" variant="secondary" onClick={onViewCastingsHub}>Scout Models</Button>
              )}
            </div>
          </Card>
        </div>
      )}

{/* Story Viewer */}
      {viewingStories && (
        <StoryViewer
          user={viewingStories}
          onClose={() => setViewingStories(null)}
        />
      )}

{/* My Rank Card - Model only */}
      {isModel && user?.metrics && (
        <div className="px-4 pt-4">
          <MyRankCard user={user} onViewScoreboard={onViewScoreboard} />
        </div>
      )}

{/* Active Castings Module */}
      <ActiveCastings onViewCasting={onViewCasting} onViewAll={onViewCastingsHub} />

{/* Recommended for You - Model only */}
      {isModel && recommendedCastings.length > 0 && (
        <div className="px-4 mb-4">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <Sparkles className="w-4 h-4 text-violet-500" />
              <h3 className="font-semibold text-sm">Recommended for You</h3>
            </div>
            <button className="text-xs text-muted-foreground flex items-center" onClick={onViewCastingsHub}>
              See all <ChevronRight className="w-3 h-3" />
            </button>
          </div>
          <div className="space-y-3">
            {recommendedCastings.map(({ casting, fitScore }) => (
              <Card
                key={casting.id}
                className="overflow-hidden cursor-pointer hover:bg-muted/30 transition-colors !p-0 !gap-0"
                onClick={() => onViewCasting(casting)}
              >
                <div className="flex h-28">
                  {/* Left: Image + title overlay */}
                  <div className="relative w-28 shrink-0 bg-muted">
                    <img
                      src={casting.images?.[0] || "/placeholder.svg"}
                      alt={casting.title}
                      className="w-full h-full object-cover"
                    />
                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2 pt-6">
                      <p className="font-semibold text-[11px] text-white line-clamp-2 leading-tight">{casting.title}</p>
                      <p className="text-[9px] text-zinc-300 mt-0.5 truncate">{casting.creator.name}</p>
                    </div>
                    {/* Match badge */}
                    <div
                      className={`absolute top-1.5 right-1.5 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
                        fitScore.total >= 80
                          ? "bg-emerald-500/90 text-black"
                          : fitScore.total >= 60
                            ? "bg-sky-500/90 text-black"
                            : "bg-amber-500/90 text-black"
                      }`}
                    >
                      {fitScore.total}%
                    </div>
                  </div>
                  {/* Right: Casting details */}
                  <div className="flex-1 p-3 flex flex-col justify-between min-w-0">
                    <div className="space-y-1.5">
                      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                        <MapPin className="w-3 h-3 shrink-0" />
                        <span className="truncate">{casting.location || "Remote"}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                        <DollarSign className="w-3 h-3 shrink-0" />
                        <span>{casting.pay ? `€${casting.pay.amount}/${casting.pay.type}` : "TBD"}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                        <Calendar className="w-3 h-3 shrink-0" />
                        <span>
                          {casting.dates?.start
                            ? new Date(casting.dates.start).toLocaleDateString("en-US", { month: "short", day: "numeric" })
                            : "Flexible"}
                          {casting.dates?.end && ` – ${new Date(casting.dates.end).toLocaleDateString("en-US", { month: "short", day: "numeric" })}`}
                        </span>
                      </div>
                    </div>
                    <div className="flex items-center gap-1.5 text-[10px] text-amber-500">
                      <Clock className="w-3 h-3 shrink-0" />
                      <span>
                        {casting.deadline
                          ? `Deadline: ${new Date(casting.deadline).toLocaleDateString("en-US", { month: "short", day: "numeric" })}`
                          : "Open deadline"}
                      </span>
                    </div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      )}

{/* Feed Toggle — Explore / Following */}
      <FeedToggle active={feedType} onChange={setFeedType} />

{/* TikTok-style Swipe Feed */}
      <SwipeFeed
        posts={feedPosts}
        isLoading={postsLoading}
        onUserClick={handleUserClick}
        onLike={handleLike}
        onSave={handleSave}
        refreshFeed={refreshPosts}
      />

{/* Floating Create Post Button */}
      <button
        onClick={() => setShowCreatePost(true)}
        className="fixed bottom-20 right-4 z-30 w-14 h-14 rounded-full bg-foreground text-background flex items-center justify-center shadow-lg hover:opacity-90 transition-opacity"
      >
        <Plus className="w-6 h-6" />
      </button>

{/* Create Post Sheet */}
      <Sheet open={showCreatePost} onOpenChange={setShowCreatePost}>
        <SheetContent side="bottom" className="h-[60vh] rounded-t-2xl">
          <SheetHeader>
            <SheetTitle>Create Post</SheetTitle>
          </SheetHeader>
          <div className="mt-4 space-y-4">
            {/* Upload photo */}
            <div>
              <label className="flex items-center justify-center w-full h-40 border-2 border-dashed border-muted-foreground/30 rounded-xl cursor-pointer hover:border-muted-foreground/50 transition-colors overflow-hidden">
                {newPostImage ? (
                  <img src={newPostImage} alt="Preview" className="w-full h-full object-cover" />
                ) : (
                  <div className="text-center">
                    <ImageIcon className="w-10 h-10 mx-auto text-muted-foreground" />
                    <p className="text-sm text-muted-foreground mt-2">Tap to upload photo</p>
                  </div>
                )}
                <input
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={async (e) => {
                    const file = e.target.files?.[0]
                    if (!file) return
                    const formData = new FormData()
                    formData.append("file", file)
                    formData.append("type", "post")
                    const res = await fetch("/api/media/upload", { method: "POST", credentials: "include", body: formData })
                    if (res.ok) {
                      const data = await res.json()
                      setNewPostImage(data.url || "")
                    }
                  }}
                />
              </label>
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground mb-1 block">Caption</label>
              <Input
                placeholder="Write a caption..."
                value={newPostCaption}
                onChange={(e) => setNewPostCaption(e.target.value)}
                maxLength={500}
              />
            </div>
            <Button
              className="w-full h-12"
              disabled={!newPostImage.trim() || postCreating}
              onClick={async () => {
                setPostCreating(true)
                const res = await api.createPost({ imageUrl: newPostImage.trim(), caption: newPostCaption.trim() || undefined })
                setPostCreating(false)
                if (!res.error) {
                  setShowCreatePost(false)
                  setNewPostImage("")
                  setNewPostCaption("")
                  refreshPosts()
                }
              }}
            >
              {postCreating ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Send className="w-4 h-4 mr-2" />}
              Post
            </Button>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/swipe-feed.tsx"
"use client"

import { useState, useRef, useCallback, useEffect } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import {
  Heart,
  MessageCircle,
  Share2,
  Bookmark,
  UserPlus,
  BadgeCheck,
  Send,
  ChevronLeft,
  ChevronRight,
  Trash2,
} from "lucide-react"
import { useAuth } from "@/lib/auth-context"
import { formatDistanceToNow } from "date-fns"
import { api } from "@/lib/api-client"
import { motion, AnimatePresence } from "framer-motion"

interface SwipePost {
  id: string
  user: {
    name: string
    username: string
    avatar: string
    verified: boolean
  }
  image: string
  caption: string
  likes: number
  comments: number
  likedByMe?: boolean
  savedByMe?: boolean
  createdAt: Date
}

interface SwipeFeedProps {
  posts: SwipePost[]
  isLoading: boolean
  onUserClick: (username: string) => void
  onLike: (postId: string, currentlyLiked: boolean) => void
  onSave: (postId: string, currentlySaved: boolean) => void
  refreshFeed: () => void
}

interface CommentItem {
  id: string
  user: { name: string; username: string; avatar: string }
  body: string
  createdAt: string
}

export function SwipeFeed({ posts, isLoading, onUserClick, onLike, onSave, refreshFeed }: SwipeFeedProps) {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [direction, setDirection] = useState(0) // -1 left, 1 right
  const touchStartX = useRef(0)
  const touchStartTime = useRef(0)

const goToPost = useCallback((index: number, dir: number) => {
    if (index >= 0 && index < posts.length) {
      setDirection(dir)
      setCurrentIndex(index)
    }
  }, [posts.length])

// Touch handling for horizontal swipe
  const handleTouchStart = useCallback((e: React.TouchEvent) => {
    touchStartX.current = e.touches[0].clientX
    touchStartTime.current = Date.now()
  }, [])

const handleTouchEnd = useCallback((e: React.TouchEvent) => {
    const deltaX = touchStartX.current - e.changedTouches[0].clientX
    const deltaTime = Date.now() - touchStartTime.current
    const velocity = Math.abs(deltaX) / deltaTime

// Swipe threshold: 50px or fast flick
    if (deltaX > 50 || (deltaX > 20 && velocity > 0.3)) {
      goToPost(currentIndex + 1, 1) // swipe left → next
    } else if (deltaX < -50 || (deltaX < -20 && velocity > 0.3)) {
      goToPost(currentIndex - 1, -1) // swipe right → previous
    }
  }, [currentIndex, goToPost])

// Keyboard navigation
  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "ArrowRight" || e.key === "l") goToPost(currentIndex + 1, 1)
      if (e.key === "ArrowLeft" || e.key === "h") goToPost(currentIndex - 1, -1)
    }
    window.addEventListener("keydown", handleKey)
    return () => window.removeEventListener("keydown", handleKey)
  }, [currentIndex, goToPost])

if (isLoading) {
    return (
      <div className="flex items-center justify-center h-[calc(100vh-12rem)] text-muted-foreground">
        Loading…
      </div>
    )
  }

if (posts.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-muted-foreground gap-3 px-8">
        <p className="text-center">No posts yet. Follow people or explore to see content here.</p>
      </div>
    )
  }

const post = posts[currentIndex]
  if (!post) return null

const variants = {
    enter: (dir: number) => ({ x: dir > 0 ? "100%" : "-100%", opacity: 0 }),
    center: { x: 0, opacity: 1 },
    exit: (dir: number) => ({ x: dir > 0 ? "-100%" : "100%", opacity: 0 }),
  }

return (
    <div
      className="relative overflow-hidden bg-black"
      style={{ height: "calc(100vh - 12rem)" }}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
    >
      <AnimatePresence initial={false} custom={direction} mode="popLayout">
        <motion.div
          key={post.id}
          custom={direction}
          variants={variants}
          initial="enter"
          animate="center"
          exit="exit"
          transition={{ type: "spring", stiffness: 300, damping: 30 }}
          className="absolute inset-0"
        >
          <PostCard
            post={post}
            onUserClick={() => onUserClick(post.user.username)}
            onLike={() => onLike(post.id, post.likedByMe ?? false)}
            onSave={() => onSave(post.id, post.savedByMe ?? false)}
            refreshFeed={refreshFeed}
            index={currentIndex}
            total={posts.length}
          />
        </motion.div>
      </AnimatePresence>

{/* Navigation arrows (desktop) */}
      {currentIndex > 0 && (
        <button
          onClick={() => goToPost(currentIndex - 1, -1)}
          className="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-8 h-8 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>
      )}
      {currentIndex < posts.length - 1 && (
        <button
          onClick={() => goToPost(currentIndex + 1, 1)}
          className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-8 h-8 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors"
        >
          <ChevronRight className="w-5 h-5" />
        </button>
      )}

{/* Dot indicators at bottom */}
      {posts.length > 1 && (
        <div className="absolute bottom-3 left-0 right-0 flex justify-center gap-1.5 z-10">
          {posts.map((_, i) => (
            <button
              key={i}
              onClick={() => goToPost(i, i > currentIndex ? 1 : -1)}
              className={`w-1.5 h-1.5 rounded-full transition-all ${
                i === currentIndex ? "bg-white w-4" : "bg-white/40"
              }`}
            />
          ))}
        </div>
      )}
    </div>
  )
}

function PostCard({
  post,
  onUserClick,
  onLike,
  onSave,
  refreshFeed,
  index,
  total,
}: {
  post: SwipePost
  onUserClick: () => void
  onLike: () => void
  onSave: () => void
  refreshFeed: () => void
  index: number
  total: number
}) {
  const { user: currentUser } = useAuth()
  const [liked, setLiked] = useState(post.likedByMe ?? false)
  const [saved, setSaved] = useState(post.savedByMe ?? false)
  const [likeCount, setLikeCount] = useState(post.likes)
  const [showComments, setShowComments] = useState(false)
  const [comments, setComments] = useState<CommentItem[]>([])
  const [commentsLoading, setCommentsLoading] = useState(false)
  const [commentInput, setCommentInput] = useState("")
  const [commentSending, setCommentSending] = useState(false)
  const [isFollowing, setIsFollowing] = useState(false)

const isOwnPost = currentUser?.username === post.user.username

useEffect(() => {
    setLiked(post.likedByMe ?? false)
    setSaved(post.savedByMe ?? false)
    setLikeCount(post.likes)
  }, [post.id, post.likedByMe, post.savedByMe, post.likes])

useEffect(() => {
    if (showComments) loadComments()
  }, [showComments, loadComments])

const handleLike = () => {
    onLike()
    setLiked(!liked)
    setLikeCount((prev) => (liked ? prev - 1 : prev + 1))
  }

const handleSave = () => {
    onSave()
    setSaved(!saved)
  }

const handleFollow = async () => {
    try {
      // Look up userId from username via profile API
      const profileRes = await api.getProfile(post.user.username)
      const profileData = profileRes.data as { profile?: { userId?: string } } | undefined
      const userId = profileData?.profile?.userId
      if (userId) {
        await api.follow(userId)
        setIsFollowing(true)
      }
    } catch {
      // Silently fail
    }
  }

const handleDelete = async () => {
    if (!confirm("Delete this post?")) return
    await api.deletePost(post.id)
    refreshFeed()
  }

return (
    <div className="relative w-full h-full">
      {/* Full-screen image */}
      <img
        src={post.image || "/placeholder.svg"}
        alt={post.caption}
        className="w-full h-full object-cover"
      />

{/* Gradient overlays */}
      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-black/20 pointer-events-none" />

{/* Right side — action buttons (TikTok style) */}
      <div className="absolute right-3 bottom-24 flex flex-col items-center gap-5">
        {/* Profile pic with follow button */}
        <div className="relative">
          <div onClick={onUserClick} className="cursor-pointer">
            <Avatar className="w-11 h-11 ring-2 ring-white">
              <AvatarImage src={post.user.avatar || "/placeholder.svg"} alt={post.user.name} />
              <AvatarFallback className="text-xs">{post.user.name?.[0]}</AvatarFallback>
            </Avatar>
          </div>
          {!isOwnPost && !isFollowing && (
            <div
              onClick={handleFollow}
              className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-5 h-5 bg-rose-500 rounded-full flex items-center justify-center cursor-pointer"
            >
              <UserPlus className="w-3 h-3 text-white" />
            </div>
          )}
        </div>

{/* Like */}
        <button onClick={handleLike} className="flex flex-col items-center gap-0.5">
          <Heart className={`w-7 h-7 ${liked ? "fill-rose-500 text-rose-500" : "text-white"}`} />
          <span className="text-white text-[10px] font-medium">{likeCount > 0 ? likeCount : ""}</span>
        </button>

{/* Comment */}
        <button onClick={() => setShowComments(true)} className="flex flex-col items-center gap-0.5">
          <MessageCircle className="w-7 h-7 text-white" />
          <span className="text-white text-[10px] font-medium">{post.comments > 0 ? post.comments : ""}</span>
        </button>

{/* Save + Like side by side at bottom */}
        <button onClick={handleSave} className="flex flex-col items-center gap-0.5">
          <Bookmark className={`w-7 h-7 ${saved ? "fill-white text-white" : "text-white"}`} />
        </button>

{/* Share */}
        <button
          className="flex flex-col items-center gap-0.5"
          onClick={async () => {
            const url = `${window.location.origin}/u/${post.user.username}`
            if (navigator.share) {
              await navigator.share({ title: post.caption || "Check this out on Luxlane", url }).catch(() => {})
            } else {
              await navigator.clipboard.writeText(url).catch(() => {})
            }
          }}
        >
          <Share2 className="w-6 h-6 text-white" />
        </button>

{/* Delete (own post) */}
        {isOwnPost && (
          <button onClick={handleDelete} className="flex flex-col items-center gap-0.5">
            <Trash2 className="w-5 h-5 text-white/60" />
          </button>
        )}
      </div>

{/* Bottom — username + caption */}
      <div className="absolute bottom-6 left-4 right-20">
        <button onClick={onUserClick} className="flex items-center gap-2 mb-2">
          <span className="text-white font-bold text-sm">@{post.user.username}</span>
          {post.user.verified && <BadgeCheck className="w-4 h-4 text-white" />}
        </button>
        {post.caption && (
          <p className="text-white/90 text-sm leading-relaxed line-clamp-3">{post.caption}</p>
        )}
        <p className="text-white/40 text-[10px] mt-1 uppercase">
          {formatDistanceToNow(post.createdAt, { addSuffix: true })}
        </p>
      </div>

{/* Comments Sheet */}
      <Sheet open={showComments} onOpenChange={setShowComments}>
        <SheetContent side="bottom" className="h-[70vh] flex flex-col rounded-t-2xl">
          <SheetHeader>
            <SheetTitle>Comments</SheetTitle>
          </SheetHeader>
          <div className="flex-1 overflow-y-auto py-4 space-y-3 min-h-0">
            {commentsLoading ? (
              <p className="text-sm text-muted-foreground">Loading…</p>
            ) : comments.length === 0 ? (
              <p className="text-sm text-muted-foreground">No comments yet. Be the first.</p>
            ) : (
              comments.map((c) => (
                <div key={c.id} className="flex gap-3">
                  <Avatar className="w-8 h-8 shrink-0">
                    <AvatarImage src={c.user.avatar || "/placeholder.svg"} alt={c.user.name} />
                    <AvatarFallback>{c.user.name?.[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm">
                      <span className="font-semibold">{c.user.username}</span>{" "}
                      <span className="text-muted-foreground">{c.body}</span>
                    </p>
                    <p className="text-[10px] text-muted-foreground mt-0.5">
                      {formatDistanceToNow(new Date(c.createdAt), { addSuffix: true })}
                    </p>
                  </div>
                </div>
              ))
            )}
          </div>
          <div className="flex gap-2 pt-3 border-t border-border">
            <Input
              placeholder="Add a comment…"
              value={commentInput}
              onChange={(e) => setCommentInput(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSendComment()}
              className="flex-1"
            />
            <Button size="icon" onClick={handleSendComment} disabled={!commentInput.trim() || commentSending}>
              <Send className="w-4 h-4" />
            </Button>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/layout/back-button.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import { usePathname, useRouter } from "next/navigation"
import { useNavigation } from "@/lib/navigation-context"

interface BackButtonProps {
  fallbackPath?: string
  className?: string
  onBack?: () => void
}

export function BackButton({ className, onBack }: BackButtonProps) {
  const pathname = usePathname()
  const router = useRouter()
  const { canGoBack, goBack, goHome } = useNavigation()

const handleBack = () => {
    if (onBack) {
      onBack()
      return
    }
    // On real routes (e.g. /u/username) use browser back so history works
    if (pathname?.startsWith("/u/")) {
      router.back()
      return
    }
    if (canGoBack) {
      goBack()
    } else {
      goHome()
    }
  }

return (
    <Button variant="ghost" size="icon" className={className} onClick={handleBack}>
      <ArrowLeft className="w-5 h-5" />
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/layout/bottom-nav.tsx"
"use client"

import { useAuth } from "@/lib/auth-context"
import { getNavTabs, type TabId } from "@/lib/navigation"

interface BottomNavProps {
  activeTab: TabId
  onTabChange: (tab: TabId) => void
  unreadCount?: number
}

export function BottomNav({ activeTab, onTabChange, unreadCount = 0 }: BottomNavProps) {
  const { user } = useAuth()
  const tabs = getNavTabs(user?.role || "model")

return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-background border-t border-border safe-area-bottom pointer-events-auto">
      <div className="flex items-center justify-around h-16 max-w-lg mx-auto">
        {tabs.map((tab) => {
          const Icon = tab.icon
          return (
            <button
              key={tab.id}
              onClick={() => onTabChange(tab.id)}
              className={`flex flex-col items-center justify-center w-full h-full gap-1 transition-colors relative touch-manipulation ${
                activeTab === tab.id ? "text-foreground" : "text-muted-foreground"
              }`}
              style={{ minHeight: "44px" }}
            >
              <div className="relative">
                <Icon className="w-5 h-5" />
                {tab.id === "inbox" && unreadCount > 0 && (
                  <span className="absolute -top-1 -right-1 w-4 h-4 bg-destructive text-destructive-foreground text-[10px] font-medium rounded-full flex items-center justify-center">
                    {unreadCount > 9 ? "9+" : unreadCount}
                  </span>
                )}
              </div>
              <span className="text-[10px] font-medium">{tab.label}</span>
              {activeTab === tab.id && <div className="absolute bottom-1 w-1 h-1 rounded-full bg-foreground" />}
            </button>
          )
        })}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/layout/header.tsx"
"use client"

import { LuxlaneLogo } from "@/components/ui/luxlane-logo"
import { Bell, Search, Settings } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useAuth } from "@/lib/auth-context"
import { BackButton } from "@/components/layout/back-button"

interface HeaderProps {
  title?: string
  showLogo?: boolean
  showSearch?: boolean
  showNotifications?: boolean
  showAvatar?: boolean
  showBack?: boolean
  onBack?: () => void
  onAvatarClick?: () => void
  onSearchClick?: () => void
  onSettingsClick?: () => void
  notificationCount?: number
}

export function Header({
  title,
  showLogo = true,
  showSearch = true,
  showNotifications = true,
  showAvatar = true,
  showBack = false,
  onBack,
  onAvatarClick,
  onSearchClick,
  onSettingsClick,
  notificationCount = 0,
}: HeaderProps) {
  const { user } = useAuth()

return (
    <header className="sticky top-0 z-40 bg-background/95 backdrop-blur-sm border-b border-border">
      <div className="flex items-center justify-between h-14 px-4 max-w-lg mx-auto">
        <div className="flex items-center gap-2">
          {showBack && <BackButton onBack={onBack} />}
          {showLogo && !showBack ? (
            <LuxlaneLogo size="sm" />
          ) : title ? (
            <h1 className="text-lg font-semibold tracking-tight">{title}</h1>
          ) : null}
        </div>

{/* Right side actions */}
        <div className="flex items-center gap-1">
          {showSearch && (
            <Button variant="ghost" size="icon" onClick={onSearchClick}>
              <Search className="w-5 h-5" />
            </Button>
          )}
          {showNotifications && (
            <Button variant="ghost" size="icon" className="relative">
              <Bell className="w-5 h-5" />
              {notificationCount > 0 && (
                <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-destructive rounded-full" />
              )}
            </Button>
          )}
          {onSettingsClick && (
            <Button variant="ghost" size="icon" onClick={onSettingsClick}>
              <Settings className="w-5 h-5" />
            </Button>
          )}
          {showAvatar && user && (
            <Button variant="ghost" size="icon" className="ml-1" onClick={onAvatarClick}>
              <Avatar className="w-7 h-7">
                <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                <AvatarFallback className="text-xs">{user.name[0]}</AvatarFallback>
              </Avatar>
            </Button>
          )}
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace/booking-sheet.tsx"
"use client"

import { useState } from "react"
import { X, Calendar, Clock, MapPin, ChevronLeft, ChevronRight, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import type { User } from "@/lib/types"
import { cn } from "@/lib/utils"
import { formatCurrency } from "@/lib/format"

interface BookingSheetProps {
  isOpen: boolean
  onClose: () => void
  talent: User
  onSubmit: (booking: BookingData) => void
}

interface BookingData {
  talentId: string
  type: string
  date: Date
  duration: number
  location: string
  notes: string
}

const bookingTypes = [
  { id: "photoshoot", label: "Photoshoot", rate: 500 },
  { id: "runway", label: "Runway Show", rate: 2000 },
  { id: "commercial", label: "Commercial", rate: 3000 },
  { id: "event", label: "Event", rate: 1500 },
]

const durations = [
  { hours: 2, label: "2 hours" },
  { hours: 4, label: "Half day (4h)" },
  { hours: 8, label: "Full day (8h)" },
]

export function BookingSheet({ isOpen, onClose, talent, onSubmit }: BookingSheetProps) {
  const [step, setStep] = useState<"type" | "datetime" | "details" | "confirm">("type")
  const [selectedType, setSelectedType] = useState<string>("")
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
  const [selectedDuration, setSelectedDuration] = useState(4)
  const [location, setLocation] = useState("")
  const [notes, setNotes] = useState("")

const [currentMonth, setCurrentMonth] = useState(new Date())

const selectedBookingType = bookingTypes.find((t) => t.id === selectedType)
  const totalCost = selectedBookingType ? selectedBookingType.rate * (selectedDuration / 2) : 0

const getDaysInMonth = (date: Date) => {
    const year = date.getFullYear()
    const month = date.getMonth()
    const firstDay = new Date(year, month, 1)
    const lastDay = new Date(year, month + 1, 0)
    const daysInMonth = lastDay.getDate()
    const startingDay = firstDay.getDay()

const days: (number | null)[] = []
    for (let i = 0; i < startingDay; i++) {
      days.push(null)
    }
    for (let i = 1; i <= daysInMonth; i++) {
      days.push(i)
    }
    return days
  }

const handleSubmit = () => {
    if (selectedDate) {
      onSubmit({
        talentId: talent.id,
        type: selectedType,
        date: selectedDate,
        duration: selectedDuration,
        location,
        notes,
      })
    }
    onClose()
  }

const resetAndClose = () => {
    setStep("type")
    setSelectedType("")
    setSelectedDate(null)
    setSelectedDuration(4)
    setLocation("")
    setNotes("")
    onClose()
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-50">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={resetAndClose} />

{/* Sheet */}
      <div className="absolute inset-x-0 bottom-0 bg-card rounded-t-3xl max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-border/30">
          {step !== "type" ? (
            <button
              onClick={() => setStep(step === "datetime" ? "type" : step === "details" ? "datetime" : "details")}
              className="w-10 h-10 flex items-center justify-center"
            >
              <ChevronLeft className="h-5 w-5" />
            </button>
          ) : (
            <div className="w-10" />
          )}
          <h2 className="font-serif text-lg">Book {talent.name}</h2>
          <button onClick={resetAndClose} className="w-10 h-10 flex items-center justify-center">
            <X className="h-5 w-5" />
          </button>
        </div>

{/* Progress */}
        <div className="flex gap-1 px-4 pt-4">
          {["type", "datetime", "details", "confirm"].map((s, i) => (
            <div
              key={s}
              className={cn(
                "flex-1 h-1 rounded-full transition-colors",
                ["type", "datetime", "details", "confirm"].indexOf(step) >= i ? "bg-gold" : "bg-secondary",
              )}
            />
          ))}
        </div>

{/* Content */}
        <div className="p-4 overflow-y-auto max-h-[calc(90vh-180px)]">
          {step === "type" && (
            <div className="space-y-4">
              <p className="text-muted-foreground">Select the type of booking</p>
              {bookingTypes.map((type) => (
                <button
                  key={type.id}
                  onClick={() => setSelectedType(type.id)}
                  className={cn(
                    "w-full p-4 rounded-xl text-left transition-all flex items-center justify-between",
                    selectedType === type.id
                      ? "bg-gold/10 border border-gold"
                      : "bg-secondary/50 border border-transparent hover:bg-secondary",
                  )}
                >
                  <span className="font-medium">{type.label}</span>
                  <span className="text-muted-foreground">From {formatCurrency(type.rate)}/hr</span>
                </button>
              ))}
            </div>
          )}

{step === "datetime" && (
            <div className="space-y-6">
              {/* Calendar */}
              <div>
                <div className="flex items-center justify-between mb-4">
                  <button
                    onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1))}
                    className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-secondary"
                  >
                    <ChevronLeft className="h-5 w-5" />
                  </button>
                  <span className="font-medium">
                    {currentMonth.toLocaleDateString("en-US", { month: "long", year: "numeric" })}
                  </span>
                  <button
                    onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1))}
                    className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-secondary"
                  >
                    <ChevronRight className="h-5 w-5" />
                  </button>
                </div>

<div className="grid grid-cols-7 gap-1 text-center text-sm">
                  {["S", "M", "T", "W", "T", "F", "S"].map((day) => (
                    <div key={day} className="py-2 text-muted-foreground">
                      {day}
                    </div>
                  ))}
                  {getDaysInMonth(currentMonth).map((day, i) => {
                    if (day === null) return <div key={`empty-${i}`} />
                    const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day)
                    const isSelected = selectedDate?.toDateString() === date.toDateString()
                    const isPast = date < new Date(new Date().setHours(0, 0, 0, 0))

return (
                      <button
                        key={day}
                        onClick={() => !isPast && setSelectedDate(date)}
                        disabled={isPast}
                        className={cn(
                          "py-2 rounded-lg transition-colors min-h-[44px]",
                          isSelected ? "bg-gold text-primary-foreground" : "hover:bg-secondary",
                          isPast && "opacity-30 cursor-not-allowed",
                        )}
                      >
                        {day}
                      </button>
                    )
                  })}
                </div>
              </div>

{/* Duration */}
              <div>
                <label className="text-sm font-medium text-muted-foreground mb-2 block">Duration</label>
                <div className="flex gap-2">
                  {durations.map((d) => (
                    <button
                      key={d.hours}
                      onClick={() => setSelectedDuration(d.hours)}
                      className={cn(
                        "flex-1 py-3 rounded-xl text-sm transition-colors",
                        selectedDuration === d.hours
                          ? "bg-gold text-primary-foreground"
                          : "bg-secondary/50 hover:bg-secondary",
                      )}
                    >
                      {d.label}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

{step === "details" && (
            <div className="space-y-4">
              <div>
                <label className="text-sm font-medium text-muted-foreground mb-2 block">Location</label>
                <div className="relative">
                  <MapPin className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                  <input
                    type="text"
                    placeholder="Enter shoot location"
                    value={location}
                    onChange={(e) => setLocation(e.target.value)}
                    className="w-full h-14 pl-12 pr-4 bg-secondary/50 border-0 rounded-xl text-base focus:ring-2 focus:ring-gold outline-none"
                  />
                </div>
              </div>

<div>
                <label className="text-sm font-medium text-muted-foreground mb-2 block">Notes for {talent.name}</label>
                <Textarea
                  placeholder="Add any specific requirements or details..."
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                  className="min-h-[120px] bg-secondary/50 border-0 rounded-xl resize-none text-base"
                />
              </div>
            </div>
          )}

{step === "confirm" && (
            <div className="space-y-4">
              {/* Summary Card */}
              <div className="p-4 rounded-xl bg-secondary/50 space-y-3">
                <div className="flex items-center gap-3">
                  <img
                    src={talent.avatar || "/placeholder.svg"}
                    alt={talent.name}
                    className="w-12 h-12 rounded-full object-cover"
                  />
                  <div>
                    <h3 className="font-medium">{talent.name}</h3>
                    <span className="text-sm text-muted-foreground capitalize">{talent.role}</span>
                  </div>
                </div>

<div className="space-y-2">
                  <div className="flex items-center gap-3 text-sm">
                    <Calendar className="h-4 w-4 text-gold" />
                    <span>
                      {selectedDate?.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })}
                    </span>
                  </div>
                  <div className="flex items-center gap-3 text-sm">
                    <Clock className="h-4 w-4 text-gold" />
                    <span>
                      {selectedDuration} hours - {selectedBookingType?.label}
                    </span>
                  </div>
                  {location && (
                    <div className="flex items-center gap-3 text-sm">
                      <MapPin className="h-4 w-4 text-gold" />
                      <span>{location}</span>
                    </div>
                  )}
                </div>

<div className="flex items-center justify-between">
                  <span className="text-muted-foreground">Total</span>
                  <span className="text-xl font-serif font-medium text-gold">{formatCurrency(totalCost)}</span>
                </div>
              </div>

{notes && (
                <div className="p-4 rounded-xl bg-secondary/50">
                  <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Notes</label>
                  <p className="mt-1 text-sm">{notes}</p>
                </div>
              )}
            </div>
          )}
        </div>

{/* Footer */}
        <div className="p-4 border-t border-border/30">
          {step === "confirm" ? (
            <Button
              onClick={handleSubmit}
              className="w-full h-14 bg-gold text-primary-foreground hover:bg-gold/90 rounded-full text-base font-medium"
            >
              <Check className="mr-2 h-5 w-5" />
              Confirm Booking
            </Button>
          ) : (
            <Button
              onClick={() => setStep(step === "type" ? "datetime" : step === "datetime" ? "details" : "confirm")}
              disabled={(step === "type" && !selectedType) || (step === "datetime" && !selectedDate)}
              className="w-full h-14 bg-gold text-primary-foreground hover:bg-gold/90 rounded-full text-base font-medium disabled:opacity-50"
            >
              Continue
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace/filter-sheet.tsx"
"use client"

import { useState } from "react"
import { X, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

interface FilterSheetProps {
  isOpen: boolean
  onClose: () => void
  onApply: (filters: FilterState) => void
  initialFilters: FilterState
}

export interface FilterState {
  talentType: string[]
  location: string[]
  availability: string
  priceRange: [number, number]
  verified: boolean
  tier: string[]
}

const talentTypes = ["Models", "Photographers", "Stylists", "Makeup Artists", "Hair Stylists"]
const locations = ["New York", "Los Angeles", "Paris", "Milan", "London", "Tokyo"]
const tiers = ["Black", "Elite", "Free"]

export function FilterSheet({ isOpen, onClose, onApply, initialFilters }: FilterSheetProps) {
  const [filters, setFilters] = useState<FilterState>(initialFilters)
  const [expandedSection, setExpandedSection] = useState<string | null>("talentType")

const toggleFilter = (key: keyof FilterState, value: string) => {
    setFilters((prev) => {
      const current = prev[key] as string[]
      if (current.includes(value)) {
        return { ...prev, [key]: current.filter((v) => v !== value) }
      }
      return { ...prev, [key]: [...current, value] }
    })
  }

const handleReset = () => {
    setFilters({
      talentType: [],
      location: [],
      availability: "any",
      priceRange: [0, 10000],
      verified: false,
      tier: [],
    })
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-50">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={onClose} />

{/* Sheet */}
      <div className="absolute inset-x-0 bottom-0 bg-card rounded-t-3xl max-h-[85vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-border/30">
          <button onClick={handleReset} className="text-sm text-gold">
            Reset
          </button>
          <h2 className="font-serif text-lg">Filters</h2>
          <button onClick={onClose} className="w-10 h-10 flex items-center justify-center">
            <X className="h-5 w-5" />
          </button>
        </div>

{/* Content */}
        <div className="overflow-y-auto max-h-[calc(85vh-140px)]">
          {/* Talent Type */}
          <div className="border-b border-border/30">
            <button
              onClick={() => setExpandedSection(expandedSection === "talentType" ? null : "talentType")}
              className="w-full flex items-center justify-between p-4"
            >
              <span className="font-medium">Talent Type</span>
              <ChevronDown
                className={cn("h-5 w-5 transition-transform", expandedSection === "talentType" && "rotate-180")}
              />
            </button>
            {expandedSection === "talentType" && (
              <div className="px-4 pb-4 flex flex-wrap gap-2">
                {talentTypes.map((type) => (
                  <button
                    key={type}
                    onClick={() => toggleFilter("talentType", type)}
                    className={cn(
                      "px-4 py-2 rounded-full text-sm transition-colors",
                      filters.talentType.includes(type)
                        ? "bg-gold text-primary-foreground"
                        : "bg-secondary/50 text-foreground hover:bg-secondary",
                    )}
                  >
                    {type}
                  </button>
                ))}
              </div>
            )}
          </div>

{/* Location */}
          <div className="border-b border-border/30">
            <button
              onClick={() => setExpandedSection(expandedSection === "location" ? null : "location")}
              className="w-full flex items-center justify-between p-4"
            >
              <span className="font-medium">Location</span>
              <ChevronDown
                className={cn("h-5 w-5 transition-transform", expandedSection === "location" && "rotate-180")}
              />
            </button>
            {expandedSection === "location" && (
              <div className="px-4 pb-4 flex flex-wrap gap-2">
                {locations.map((loc) => (
                  <button
                    key={loc}
                    onClick={() => toggleFilter("location", loc)}
                    className={cn(
                      "px-4 py-2 rounded-full text-sm transition-colors",
                      filters.location.includes(loc)
                        ? "bg-gold text-primary-foreground"
                        : "bg-secondary/50 text-foreground hover:bg-secondary",
                    )}
                  >
                    {loc}
                  </button>
                ))}
              </div>
            )}
          </div>

{/* Tier */}
          <div className="border-b border-border/30">
            <button
              onClick={() => setExpandedSection(expandedSection === "tier" ? null : "tier")}
              className="w-full flex items-center justify-between p-4"
            >
              <span className="font-medium">Membership Tier</span>
              <ChevronDown className={cn("h-5 w-5 transition-transform", expandedSection === "tier" && "rotate-180")} />
            </button>
            {expandedSection === "tier" && (
              <div className="px-4 pb-4 flex flex-wrap gap-2">
                {tiers.map((tier) => (
                  <button
                    key={tier}
                    onClick={() => toggleFilter("tier", tier.toLowerCase())}
                    className={cn(
                      "px-4 py-2 rounded-full text-sm transition-colors",
                      filters.tier.includes(tier.toLowerCase())
                        ? "bg-gold text-primary-foreground"
                        : "bg-secondary/50 text-foreground hover:bg-secondary",
                    )}
                  >
                    {tier}
                  </button>
                ))}
              </div>
            )}
          </div>

{/* Verified Only */}
          <div className="p-4 border-b border-border/30">
            <button
              onClick={() => setFilters((prev) => ({ ...prev, verified: !prev.verified }))}
              className="w-full flex items-center justify-between"
            >
              <span className="font-medium">Verified Only</span>
              <div
                className={cn(
                  "w-12 h-7 rounded-full transition-colors relative",
                  filters.verified ? "bg-gold" : "bg-secondary",
                )}
              >
                <div
                  className={cn(
                    "absolute top-1 w-5 h-5 rounded-full bg-foreground transition-transform",
                    filters.verified ? "translate-x-6" : "translate-x-1",
                  )}
                />
              </div>
            </button>
          </div>
        </div>

{/* Apply Button */}
        <div className="p-4 border-t border-border/30">
          <Button
            onClick={() => onApply(filters)}
            className="w-full h-14 bg-gold text-primary-foreground hover:bg-gold/90 rounded-full text-base font-medium"
          >
            Apply Filters
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace/marketplace-header.tsx"
"use client"

import { SlidersHorizontal } from "lucide-react"
import { LuxlaneLogo } from "@/components/ui/luxlane-logo"

interface MarketplaceHeaderProps {
  onFilterClick: () => void
  activeFiltersCount: number
}

export function MarketplaceHeader({ onFilterClick, activeFiltersCount }: MarketplaceHeaderProps) {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 glass border-b border-border/30">
      <div className="flex items-center justify-between h-14 px-4">
        <LuxlaneLogo size="sm" />

<button
          onClick={onFilterClick}
          className="relative flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/50 hover:bg-secondary transition-colors"
        >
          <SlidersHorizontal className="h-4 w-4" />
          <span className="text-sm font-medium">Filters</span>
          {activeFiltersCount > 0 && (
            <span className="absolute -top-1 -right-1 w-5 h-5 bg-gold text-[10px] font-bold text-primary-foreground rounded-full flex items-center justify-center">
              {activeFiltersCount}
            </span>
          )}
        </button>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace/marketplace-view.tsx"
"use client"

import { useState } from "react"
import { MarketplaceHeader } from "./marketplace-header"
import { TalentCard } from "./talent-card"
import { FilterSheet, type FilterState } from "./filter-sheet"
import { BookingSheet } from "./booking-sheet"
import { mockUsers } from "@/lib/mock-data"
import type { User } from "@/lib/types"

interface MarketplaceViewProps {
  onProfileClick: (userId: string) => void
}

const defaultFilters: FilterState = {
  talentType: [],
  location: [],
  availability: "any",
  priceRange: [0, 10000],
  verified: false,
  tier: [],
}

export function MarketplaceView({ onProfileClick }: MarketplaceViewProps) {
  const [showFilters, setShowFilters] = useState(false)
  const [filters, setFilters] = useState<FilterState>(defaultFilters)
  const [bookingTalent, setBookingTalent] = useState<User | null>(null)

// Filter models and talent
  const talent = mockUsers.filter((u) => u.role === "model")

const filteredTalent = talent.filter((user) => {
    if (filters.verified && !user.verified) return false
    if (filters.tier.length > 0 && !filters.tier.includes(user.tier)) return false
    if (filters.location.length > 0) {
      const userCity = user.location.split(",")[0].trim()
      if (!filters.location.some((loc) => userCity.toLowerCase().includes(loc.toLowerCase()))) return false
    }
    return true
  })

const activeFiltersCount = [
    filters.talentType.length > 0,
    filters.location.length > 0,
    filters.verified,
    filters.tier.length > 0,
  ].filter(Boolean).length

return (
    <div className="min-h-screen pb-20">
      <MarketplaceHeader onFilterClick={() => setShowFilters(true)} activeFiltersCount={activeFiltersCount} />

<main className="pt-14 px-4">
        {/* Hero */}
        <div className="py-6">
          <h1 className="font-serif text-2xl font-light">
            Discover <span className="text-gold">Elite Talent</span>
          </h1>
          <p className="text-muted-foreground mt-1">Book top models, photographers, and creatives</p>
        </div>

{/* Results Count */}
        <div className="flex items-center justify-between mb-4">
          <span className="text-sm text-muted-foreground">{filteredTalent.length} talent available</span>
        </div>

{/* Grid */}
        <div className="grid grid-cols-2 gap-4">
          {filteredTalent.map((user) => (
            <TalentCard key={user.id} user={user} onClick={() => setBookingTalent(user)} />
          ))}
        </div>

{filteredTalent.length === 0 && (
          <div className="flex flex-col items-center justify-center py-16">
            <div className="w-16 h-16 rounded-full bg-secondary/50 flex items-center justify-center mb-4">
              <svg className="w-8 h-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                />
              </svg>
            </div>
            <h3 className="font-serif text-lg">No talent found</h3>
            <p className="text-sm text-muted-foreground mt-1">Try adjusting your filters</p>
          </div>
        )}
      </main>

<FilterSheet
        isOpen={showFilters}
        onClose={() => setShowFilters(false)}
        onApply={(newFilters) => {
          setFilters(newFilters)
          setShowFilters(false)
        }}
        initialFilters={filters}
      />

{bookingTalent && (
        <BookingSheet
          isOpen={!!bookingTalent}
          onClose={() => setBookingTalent(null)}
          talent={bookingTalent}
          onSubmit={(booking) => {
            console.log("Booking submitted:", booking)
            setBookingTalent(null)
          }}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/marketplace/talent-card.tsx"
"use client"

import { BadgeCheck, MapPin, Star } from "lucide-react"
import type { User } from "@/lib/types"
import { cn } from "@/lib/utils"

interface TalentCardProps {
  user: User
  onClick: () => void
}

export function TalentCard({ user, onClick }: TalentCardProps) {
  const getTierStyle = () => {
    if (user.tier === "black") return "border-foreground"
    if (user.tier === "elite") return "border-gold"
    return "border-border/30"
  }

return (
    <button onClick={onClick} className={cn("w-full rounded-2xl overflow-hidden border bg-card", getTierStyle())}>
      {/* Image */}
      <div className="relative aspect-[3/4]">
        <img src={user.avatar || "/placeholder.svg"} alt={user.name} className="w-full h-full object-cover" />

{/* Tier Badge */}
        {user.tier !== "free" && (
          <div className="absolute top-3 left-3">
            <span
              className={cn(
                "px-2 py-1 text-[10px] font-bold rounded",
                user.tier === "black" ? "bg-foreground text-background" : "bg-gold text-primary-foreground",
              )}
            >
              {user.tier.toUpperCase()}
            </span>
          </div>
        )}

{/* Verified Badge */}
        {user.verified && (
          <div className="absolute top-3 right-3">
            <div className="w-6 h-6 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center">
              <BadgeCheck className="h-4 w-4 text-gold fill-gold/20" />
            </div>
          </div>
        )}

{/* Gradient Overlay */}
        <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-background to-transparent" />
      </div>

{/* Info */}
      <div className="p-3 -mt-8 relative">
        <h3 className="font-serif text-lg font-medium truncate">{user.name}</h3>
        <div className="flex items-center gap-1 text-sm text-muted-foreground mt-1">
          <MapPin className="h-3 w-3" />
          <span className="truncate">{user.location}</span>
        </div>

{/* Rating - Mock */}
        <div className="flex items-center gap-1 mt-2">
          <Star className="h-4 w-4 text-gold fill-gold" />
          <span className="text-sm font-medium">4.9</span>
          <span className="text-xs text-muted-foreground">(128)</span>
        </div>

{/* Quick Stats */}
        {user.role === "model" && user.measurements && (
          <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
            {user.measurements.height && <span>{user.measurements.height.includes("/") ? user.measurements.height.split("/")[0].trim() : user.measurements.height}</span>}
            {user.measurements.hairColor && <><span className="w-1 h-1 rounded-full bg-muted-foreground" /><span>{user.measurements.hairColor}</span></>}
            {user.measurements.eyeColor && <><span className="w-1 h-1 rounded-full bg-muted-foreground" /><span>{user.measurements.eyeColor}</span></>}
          </div>
        )}
      </div>
    </button>
  )
}
[V0_FILE]typescriptreact:file="components/messages/chat-view.tsx"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { ArrowLeft, MoreHorizontal, Send, ImageIcon, BadgeCheck, Phone, Video } from "lucide-react"
import type { User, Message } from "@/lib/types"
import { cn } from "@/lib/utils"
import { getCurrentUser } from "@/lib/mock-data"

interface ChatViewProps {
  otherUser: User
  messages: Message[]
  onBack: () => void
  onSend: (content: string) => void
  onProfileClick: () => void
}

export function ChatView({ otherUser, messages, onBack, onSend, onProfileClick }: ChatViewProps) {
  const currentUser = getCurrentUser()
  const [newMessage, setNewMessage] = useState("")
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const handleSend = () => {
    if (newMessage.trim()) {
      onSend(newMessage.trim())
      setNewMessage("")
    }
  }

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

const formatTime = (date: Date) => {
    return date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })
  }

const groupMessagesByDate = (msgs: Message[]) => {
    const groups: { date: string; messages: Message[] }[] = []
    let currentDate = ""

msgs.forEach((msg) => {
      const dateStr = msg.createdAt.toLocaleDateString("en-US", {
        weekday: "long",
        month: "short",
        day: "numeric",
      })
      if (dateStr !== currentDate) {
        currentDate = dateStr
        groups.push({ date: dateStr, messages: [msg] })
      } else {
        groups[groups.length - 1].messages.push(msg)
      }
    })

return groups
  }

const groupedMessages = groupMessagesByDate(messages)

return (
    <div className="fixed inset-0 z-50 bg-background flex flex-col">
      {/* Header */}
      <header className="flex items-center justify-between h-14 px-4 border-b border-border/30 flex-shrink-0">
        <div className="flex items-center gap-3">
          <button onClick={onBack} className="w-10 h-10 flex items-center justify-center">
            <ArrowLeft className="h-5 w-5" />
          </button>
          <button onClick={onProfileClick} className="flex items-center gap-3">
            <div
              className={cn(
                "w-10 h-10 rounded-full p-[2px]",
                otherUser.verified ? "bg-gradient-to-br from-gold to-gold-muted" : "bg-border",
              )}
            >
              <div className="w-full h-full rounded-full overflow-hidden bg-background">
                <img
                  src={otherUser.avatar || "/placeholder.svg"}
                  alt={otherUser.name}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
            <div className="text-left">
              <div className="flex items-center gap-1">
                <span className="font-medium text-sm">{otherUser.name}</span>
                {otherUser.verified && <BadgeCheck className="h-4 w-4 text-gold fill-gold/20" />}
              </div>
              <span className="text-xs text-muted-foreground capitalize">{otherUser.role}</span>
            </div>
          </button>
        </div>

{/* Messages */}
      <div className="flex-1 overflow-y-auto px-4 py-4">
        {groupedMessages.map((group, groupIndex) => (
          <div key={groupIndex}>
            {/* Date Separator */}
            <div className="flex items-center justify-center my-4">
              <span className="px-3 py-1 text-xs text-muted-foreground bg-secondary/50 rounded-full">{group.date}</span>
            </div>

{/* Messages */}
            {group.messages.map((message, msgIndex) => {
              const isOwn = message.senderId === currentUser.id
              const showAvatar =
                !isOwn &&
                (msgIndex === group.messages.length - 1 || group.messages[msgIndex + 1]?.senderId === currentUser.id)

return (
                <div key={message.id} className={cn("flex gap-2 mb-2", isOwn ? "justify-end" : "justify-start")}>
                  {!isOwn && (
                    <div className="w-8 flex-shrink-0">
                      {showAvatar && (
                        <img
                          src={otherUser.avatar || "/placeholder.svg"}
                          alt={otherUser.name}
                          className="w-8 h-8 rounded-full object-cover"
                        />
                      )}
                    </div>
                  )}
                  <div
                    className={cn(
                      "max-w-[75%] px-4 py-2.5 rounded-2xl",
                      isOwn
                        ? "bg-gold text-primary-foreground rounded-br-md"
                        : "bg-secondary/70 text-foreground rounded-bl-md",
                    )}
                  >
                    <p className="text-sm leading-relaxed">{message.content}</p>
                    <span
                      className={cn(
                        "text-[10px] mt-1 block",
                        isOwn ? "text-primary-foreground/70" : "text-muted-foreground",
                      )}
                    >
                      {formatTime(message.createdAt)}
                    </span>
                  </div>
                </div>
              )
            })}
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

{/* Input */}
      <div className="flex-shrink-0 p-4 border-t border-border/30 bg-background">
        <div className="flex items-center gap-2">
          <button className="w-11 h-11 flex items-center justify-center rounded-full bg-secondary/50 hover:bg-secondary">
            <ImageIcon className="h-5 w-5" />
          </button>
          <div className="flex-1 relative">
            <input
              ref={inputRef}
              type="text"
              placeholder="Message..."
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              onKeyDown={handleKeyDown}
              className="w-full h-11 px-4 bg-secondary/50 border-0 rounded-full text-base focus:ring-2 focus:ring-gold outline-none"
            />
          </div>
          <button
            onClick={handleSend}
            disabled={!newMessage.trim()}
            className={cn(
              "w-11 h-11 flex items-center justify-center rounded-full transition-colors",
              newMessage.trim() ? "bg-gold text-primary-foreground" : "bg-secondary/50 text-muted-foreground",
            )}
          >
            <Send className="h-5 w-5" />
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messages/conversation-list.tsx"
"use client"

import { ArrowLeft, Edit, BadgeCheck } from "lucide-react"
import type { Conversation } from "@/lib/types"
import { formatDistanceToNow } from "@/lib/format"
import { cn } from "@/lib/utils"
import { getCurrentUser } from "@/lib/mock-data"

interface ConversationListProps {
  conversations: Conversation[]
  onConversationClick: (conversationId: string) => void
  onBack: () => void
  onNewMessage: () => void
}

export function ConversationList({ conversations, onConversationClick, onBack, onNewMessage }: ConversationListProps) {
  const currentUser = getCurrentUser()

const getOtherParticipant = (conversation: Conversation) => {
    return conversation.participants.find((p) => p.id !== currentUser.id) || conversation.participants[0]
  }

return (
    <div className="fixed inset-0 z-50 bg-background">
      {/* Header */}
      <header className="flex items-center justify-between h-14 px-4 border-b border-border/30">
        <button onClick={onBack} className="w-10 h-10 flex items-center justify-center">
          <ArrowLeft className="h-5 w-5" />
        </button>
        <h1 className="font-serif text-lg">Messages</h1>
        <button onClick={onNewMessage} className="w-10 h-10 flex items-center justify-center">
          <Edit className="h-5 w-5" />
        </button>
      </header>

{/* Conversations */}
      <div className="overflow-y-auto h-[calc(100vh-56px)]">
        {conversations.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full px-6">
            <div className="w-16 h-16 rounded-full bg-secondary/50 flex items-center justify-center mb-4">
              <Edit className="h-8 w-8 text-muted-foreground" />
            </div>
            <h3 className="font-serif text-lg">No messages yet</h3>
            <p className="text-sm text-muted-foreground mt-1 text-center">
              Start a conversation with models, brands, or clients
            </p>
          </div>
        ) : (
          conversations.map((conversation) => {
            const otherUser = getOtherParticipant(conversation)
            const hasUnread = conversation.unreadCount > 0

return (
              <button
                key={conversation.id}
                onClick={() => onConversationClick(conversation.id)}
                className="w-full flex items-center gap-3 p-4 hover:bg-secondary/30 transition-colors"
              >
                {/* Avatar */}
                <div
                  className={cn(
                    "relative flex-shrink-0 w-14 h-14 rounded-full p-[2px]",
                    otherUser.verified ? "bg-gradient-to-br from-gold to-gold-muted" : "bg-border",
                  )}
                >
                  <div className="w-full h-full rounded-full overflow-hidden bg-background">
                    <img
                      src={otherUser.avatar || "/placeholder.svg"}
                      alt={otherUser.name}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  {hasUnread && (
                    <div className="absolute -top-1 -right-1 w-5 h-5 bg-gold rounded-full flex items-center justify-center">
                      <span className="text-[10px] font-bold text-primary-foreground">{conversation.unreadCount}</span>
                    </div>
                  )}
                </div>

{/* Content */}
                <div className="flex-1 min-w-0 text-left">
                  <div className="flex items-center gap-1">
                    <span className={cn("font-medium truncate", hasUnread && "text-foreground")}>{otherUser.name}</span>
                    {otherUser.verified && <BadgeCheck className="h-4 w-4 text-gold fill-gold/20 flex-shrink-0" />}
                  </div>
                  <p
                    className={cn(
                      "text-sm truncate mt-0.5",
                      hasUnread ? "text-foreground font-medium" : "text-muted-foreground",
                    )}
                  >
                    {conversation.lastMessage.senderId === currentUser.id && "You: "}
                    {conversation.lastMessage.content}
                  </p>
                </div>

{/* Time */}
                <span className="text-xs text-muted-foreground flex-shrink-0">
                  {formatDistanceToNow(conversation.lastMessage.createdAt)}
                </span>
              </button>
            )
          })
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messages/messages-view.tsx"
"use client"

import { useState } from "react"
import { ConversationList } from "./conversation-list"
import { ChatView } from "./chat-view"
import { mockConversations, mockMessages, getCurrentUser } from "@/lib/mock-data"
import type { Message } from "@/lib/types"

interface MessagesViewProps {
  onClose: () => void
  onProfileClick: (userId: string) => void
}

export function MessagesView({ onClose, onProfileClick }: MessagesViewProps) {
  const currentUser = getCurrentUser()
  const [selectedConversation, setSelectedConversation] = useState<string | null>(null)
  const [messages, setMessages] = useState<Message[]>(mockMessages)

const conversation = selectedConversation ? mockConversations.find((c) => c.id === selectedConversation) : null

const otherUser = conversation
    ? conversation.participants.find((p) => p.id !== currentUser.id) || conversation.participants[0]
    : null

const conversationMessages = messages.filter((m) => m.conversationId === selectedConversation)

const handleSendMessage = (content: string) => {
    const newMessage: Message = {
      id: `msg-${Date.now()}`,
      conversationId: selectedConversation!,
      senderId: currentUser.id,
      content,
      read: true,
      createdAt: new Date(),
    }
    setMessages((prev) => [...prev, newMessage])
  }

if (selectedConversation && otherUser) {
    return (
      <ChatView
        otherUser={otherUser}
        messages={conversationMessages}
        onBack={() => setSelectedConversation(null)}
        onSend={handleSendMessage}
        onProfileClick={() => onProfileClick(otherUser.id)}
      />
    )
  }

return (
    <ConversationList
      conversations={mockConversations}
      onConversationClick={setSelectedConversation}
      onBack={onClose}
      onNewMessage={() => {}}
    />
  )
}
[V0_FILE]typescriptreact:file="components/model/availability-calendar.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { api } from "@/lib/api-client"
import { ChevronLeft, ChevronRight, Calendar } from "lucide-react"

interface AvailabilityDate {
  date: string // "2026-03-20"
  status: string // "AVAILABLE" | "HOLD" | "BOOKED"
}

interface AvailabilityCalendarProps {
  userId: string
  isOwn: boolean
}

const STATUS_COLORS: Record<string, string> = {
  AVAILABLE: "bg-emerald-500/20 text-emerald-600 border-emerald-500/30",
  HOLD: "bg-amber-500/20 text-amber-600 border-amber-500/30",
  BOOKED: "bg-red-500/20 text-red-600 border-red-500/30",
}

const STATUS_CYCLE = ["AVAILABLE", "HOLD", "BOOKED"] as const

function formatMonth(year: number, month: number): string {
  return `${year}-${String(month + 1).padStart(2, "0")}`
}

function getDaysInMonth(year: number, month: number): number {
  return new Date(year, month + 1, 0).getDate()
}

function getFirstDayOfWeek(year: number, month: number): number {
  return new Date(year, month, 1).getDay()
}

export function AvailabilityCalendar({ userId, isOwn }: AvailabilityCalendarProps) {
  const today = new Date()
  const [viewYear, setViewYear] = useState(today.getFullYear())
  const [viewMonth, setViewMonth] = useState(today.getMonth())
  const [dates, setDates] = useState<Map<string, string>>(new Map()) // date -> status
  const [selectedTool, setSelectedTool] = useState<string>("AVAILABLE")

const monthStr = formatMonth(viewYear, viewMonth)

const fetchDates = useCallback(async () => {
    const res = await api.getAvailability(monthStr, userId)
    const data = res.data as { dates?: AvailabilityDate[] } | undefined
    if (data?.dates) {
      const map = new Map<string, string>()
      for (const d of data.dates) {
        map.set(d.date, d.status)
      }
      setDates(map)
    }
  }, [monthStr, userId])

useEffect(() => {
    fetchDates()
  }, [fetchDates])

const handleDayClick = useCallback(
    async (dateStr: string) => {
      if (!isOwn) return

const currentStatus = dates.get(dateStr)
      if (currentStatus === selectedTool) {
        // Remove the entry
        await api.deleteAvailability([dateStr])
        setDates((prev) => {
          const next = new Map(prev)
          next.delete(dateStr)
          return next
        })
      } else {
        // Set or update the status
        await api.setAvailability([{ date: dateStr, status: selectedTool }])
        setDates((prev) => {
          const next = new Map(prev)
          next.set(dateStr, selectedTool)
          return next
        })
      }
    },
    [isOwn, dates, selectedTool],
  )

const prevMonth = () => {
    if (viewMonth === 0) {
      setViewYear((y) => y - 1)
      setViewMonth(11)
    } else {
      setViewMonth((m) => m - 1)
    }
  }

const nextMonth = () => {
    if (viewMonth === 11) {
      setViewYear((y) => y + 1)
      setViewMonth(0)
    } else {
      setViewMonth((m) => m + 1)
    }
  }

const daysInMonth = getDaysInMonth(viewYear, viewMonth)
  const firstDayOfWeek = getFirstDayOfWeek(viewYear, viewMonth)
  const todayStr = today.toISOString().split("T")[0]

const monthName = new Date(viewYear, viewMonth).toLocaleDateString("en", {
    month: "long",
    year: "numeric",
  })

return (
    <Card className="p-4">
      <div className="flex items-center justify-between mb-4">
        <h3 className="font-semibold flex items-center gap-2">
          <Calendar className="w-4 h-4" />
          Availability
        </h3>
        <div className="flex items-center gap-1">
          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={prevMonth}>
            <ChevronLeft className="w-4 h-4" />
          </Button>
          <span className="text-sm font-medium min-w-[130px] text-center">{monthName}</span>
          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={nextMonth}>
            <ChevronRight className="w-4 h-4" />
          </Button>
        </div>
      </div>

{/* Status tool selector — only for model owners */}
      {isOwn && (
        <div className="flex gap-2 mb-3">
          {STATUS_CYCLE.map((status) => (
            <Button
              key={status}
              variant={selectedTool === status ? "default" : "outline"}
              size="sm"
              className="flex-1 text-xs"
              onClick={() => setSelectedTool(status)}
            >
              <span
                className={`w-2 h-2 rounded-full mr-1.5 ${
                  status === "AVAILABLE" ? "bg-emerald-500" : status === "HOLD" ? "bg-amber-500" : "bg-red-500"
                }`}
              />
              {status === "AVAILABLE" ? "Available" : status === "HOLD" ? "On Hold" : "Booked"}
            </Button>
          ))}
        </div>
      )}

{/* Weekday headers */}
      <div className="grid grid-cols-7 gap-1 mb-1">
        {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
          <div key={i} className="text-center text-[10px] text-muted-foreground font-medium py-1">
            {day}
          </div>
        ))}
      </div>

{/* Calendar grid */}
      <div className="grid grid-cols-7 gap-1">
        {/* Empty cells for days before the first */}
        {Array.from({ length: firstDayOfWeek }).map((_, i) => (
          <div key={`empty-${i}`} className="aspect-square" />
        ))}

{/* Day cells */}
        {Array.from({ length: daysInMonth }).map((_, i) => {
          const day = i + 1
          const dateStr = `${viewYear}-${String(viewMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`
          const status = dates.get(dateStr)
          const isToday = dateStr === todayStr
          const isPast = new Date(dateStr) < new Date(todayStr)

const bgClass = status
            ? STATUS_COLORS[status] || ""
            : isPast
              ? "text-muted-foreground/40"
              : ""

return (
            <button
              key={day}
              type="button"
              className={`aspect-square rounded-md flex items-center justify-center text-xs font-medium transition-colors border border-transparent ${bgClass} ${
                isToday ? "ring-1 ring-foreground/30" : ""
              } ${isOwn && !isPast ? "cursor-pointer hover:bg-muted" : "cursor-default"}`}
              onClick={() => !isPast && handleDayClick(dateStr)}
              disabled={!isOwn || isPast}
            >
              {day}
            </button>
          )
        })}
      </div>

{/* Legend */}
      <div className="flex items-center gap-3 mt-3 pt-3 border-t border-border">
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <span className="w-2.5 h-2.5 rounded-sm bg-emerald-500/20 border border-emerald-500/30" />
          Available
        </div>
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <span className="w-2.5 h-2.5 rounded-sm bg-amber-500/20 border border-amber-500/30" />
          On Hold
        </div>
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <span className="w-2.5 h-2.5 rounded-sm bg-red-500/20 border border-red-500/30" />
          Booked
        </div>
      </div>

{isOwn && (
        <p className="text-[10px] text-muted-foreground mt-2">
          Tap a date to mark it with the selected status. Tap again to clear.
        </p>
      )}
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/model/discover-view.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { motion } from "framer-motion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { mockUsers } from "@/lib/mock-data"
import { useStore } from "@/lib/store-context"
import type { User, Casting } from "@/lib/types"
import { Search, BadgeCheck, MapPin, Users, Building2, Briefcase } from "lucide-react"

type Category = "all" | "brands" | "agencies" | "clients" | "castings"

interface DiscoverViewProps {
  onViewProfile: (user: User) => void
  onViewCasting: (casting: Casting) => void
}

export function DiscoverView({ onViewProfile, onViewCasting }: DiscoverViewProps) {
  const [search, setSearch] = useState("")
  const [category, setCategory] = useState<Category>("all")
  const { castings } = useStore()

const categories: { id: Category; label: string; icon: React.ReactNode }[] = [
    { id: "all", label: "All", icon: null },
    { id: "brands", label: "Brands", icon: <Briefcase className="w-4 h-4" /> },
    { id: "agencies", label: "Agencies", icon: <Building2 className="w-4 h-4" /> },
    { id: "clients", label: "Clients", icon: <Users className="w-4 h-4" /> },
    { id: "castings", label: "Castings", icon: null },
  ]

const filteredUsers = mockUsers.filter((user) => {
    if (user.role === "model") return false
    if (search && !user.name.toLowerCase().includes(search.toLowerCase())) return false
    if (category === "brands" && user.role !== "brand") return false
    if (category === "agencies" && user.role !== "agency") return false
    if (category === "clients" && user.role !== "client") return false
    if (category === "castings") return false
    return true
  })

const filteredCastings = castings.filter((casting) => {
    if (search && !casting.title.toLowerCase().includes(search.toLowerCase())) return false
    return casting.status === "active"
  })

return (
    <div className="pb-20">
      {/* Search */}
      <div className="px-4 py-3 border-b border-border sticky top-14 bg-background z-30">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search brands, agencies, castings..."
            className="pl-9 h-11"
          />
        </div>
      </div>

{/* Categories */}
      <div className="px-4 py-3 flex gap-2 overflow-x-auto no-scrollbar border-b border-border">
        {categories.map((cat) => (
          <Button
            key={cat.id}
            variant={category === cat.id ? "default" : "outline"}
            size="sm"
            onClick={() => setCategory(cat.id)}
            className="shrink-0"
          >
            {cat.icon}
            {cat.label}
          </Button>
        ))}
      </div>

{/* Results */}
      <div className="px-4 py-4">
        {category !== "castings" && filteredUsers.length > 0 && (
          <section className="mb-6">
            {category === "all" && <h2 className="font-semibold mb-3">Brands & Agencies</h2>}
            <div className="space-y-3">
              {filteredUsers.map((user, index) => (
                <motion.div
                  key={user.id}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.03 }}
                >
                  <UserCard user={user} onView={() => onViewProfile(user)} />
                </motion.div>
              ))}
            </div>
          </section>
        )}

{(category === "all" || category === "castings") && filteredCastings.length > 0 && (
          <section>
            <h2 className="font-semibold mb-3">Open Castings</h2>
            <div className="space-y-3">
              {filteredCastings.map((casting, index) => (
                <motion.div
                  key={casting.id}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.03 }}
                >
                  <CastingListCard
                    casting={casting}
                    onView={() => onViewCasting(casting)}
                    onViewCreator={onViewProfile}
                  />
                </motion.div>
              ))}
            </div>
          </section>
        )}

{filteredUsers.length === 0 && filteredCastings.length === 0 && (
          <div className="text-center py-12 text-muted-foreground">
            <p>No results found</p>
          </div>
        )}
      </div>
    </div>
  )
}

function UserCard({ user, onView }: { user: User; onView: () => void }) {
  const roleLabels = {
    brand: "Brand",
    agency: "Agency",
    client: "Client",
    model: "Model",
  }

return (
    <Card className="p-4 cursor-pointer hover:bg-muted/50 transition-colors" onClick={onView}>
      <div className="flex items-center gap-3">
        <Avatar className="w-12 h-12">
          <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
          <AvatarFallback>{user.name[0]}</AvatarFallback>
        </Avatar>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className="font-medium truncate">{user.name}</span>
            {user.verified && <BadgeCheck className="w-4 h-4 text-foreground shrink-0" />}
          </div>
          <div className="flex items-center gap-2 mt-0.5">
            <Badge variant="secondary" className="text-xs">
              {roleLabels[user.role]}
            </Badge>
            {user.industry && <span className="text-xs text-muted-foreground">{user.industry}</span>}
          </div>
          <div className="flex items-center gap-1 mt-1 text-xs text-muted-foreground">
            <MapPin className="w-3 h-3" />
            {user.location}
          </div>
        </div>
      </div>
    </Card>
  )
}

function CastingListCard({
  casting,
  onView,
  onViewCreator,
}: {
  casting: Casting
  onView: () => void
  onViewCreator?: (user: User) => void
}) {
  const typeLabels = {
    runway: "Runway",
    campaign: "Campaign",
    editorial: "Editorial",
    commercial: "Commercial",
    event: "Event",
    fitting: "Fitting",
  }

return (
    <Card className="p-4 cursor-pointer hover:bg-muted/50 transition-colors" onClick={onView}>
      <div className="flex items-start gap-3">
        <button
          type="button"
          className="flex items-center gap-3 min-w-0 shrink-0 text-left rounded-full focus:outline-none focus:ring-2 focus:ring-ring"
          onClick={(e) => {
            e.stopPropagation()
            onViewCreator?.(casting.creator)
          }}
        >
          <Avatar className="w-10 h-10">
            <AvatarImage src={casting.creator.avatar || "/placeholder.svg"} alt={casting.creator.name} />
            <AvatarFallback>{casting.creator.name[0]}</AvatarFallback>
          </Avatar>
        </button>
        <div className="flex-1 min-w-0" onClick={onView}>
          <div className="flex items-center gap-2">
            <Badge variant="secondary" className="text-xs">
              {typeLabels[casting.type]}
            </Badge>
            {casting.pay.type !== "tbd" && (
              <span className="text-xs font-medium">
                {casting.pay.amount.toLocaleString()} {casting.pay.currency}
              </span>
            )}
          </div>
          <p className="font-medium mt-1 truncate">{casting.title}</p>
          <button
            type="button"
            className="flex items-center gap-2 mt-1 text-xs text-muted-foreground hover:underline text-left"
            onClick={(e) => {
              e.stopPropagation()
              onViewCreator?.(casting.creator)
            }}
          >
            <span>{casting.creator.name}</span>
            <span>•</span>
            <span className="flex items-center gap-1">
              <MapPin className="w-3 h-3" />
              {casting.location}
            </span>
          </button>
        </div>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/model/home-feed.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { mockJobOffers, mockConversations, getApplicationsForModel } from "@/lib/mock-data"
import { useStore } from "@/lib/store-context"
import { useAuth } from "@/lib/auth-context"
import type { Casting, JobOffer, CastingApplication } from "@/lib/types"
import { MapPin, Calendar, DollarSign, ArrowRight, CheckCircle2, Clock, Sparkles, BadgeCheck } from "lucide-react"
import { formatDistanceToNow } from "date-fns"

interface HomeFeedProps {
  onViewCasting: (casting: Casting) => void
  onViewOffer: (offer: JobOffer) => void
}

export function HomeFeed({ onViewCasting, onViewOffer }: HomeFeedProps) {
  const { user } = useAuth()
  const [activeFilter, setActiveFilter] = useState<"all" | "castings" | "offers" | "updates">("all")
  const { castings } = useStore()

const applications = user ? getApplicationsForModel(user.id) : []
  const offers = user ? mockJobOffers.filter((o) => o.modelId === user.id) : []
  const unreadMessages = mockConversations.reduce((acc, c) => acc + c.unreadCount, 0)

const filters = [
    { id: "all", label: "All" },
    { id: "castings", label: "Castings" },
    { id: "offers", label: "Offers" },
    { id: "updates", label: "Updates" },
  ] as const

return (
    <div className="pb-20">
      {/* Quick Stats */}
      <div className="px-4 py-4 border-b border-border">
        <div className="grid grid-cols-3 gap-3">
          <Card className="p-3 text-center">
            <div className="text-2xl font-semibold">{applications.length}</div>
            <div className="text-xs text-muted-foreground">Applications</div>
          </Card>
          <Card className="p-3 text-center">
            <div className="text-2xl font-semibold">{offers.length}</div>
            <div className="text-xs text-muted-foreground">Offers</div>
          </Card>
          <Card className="p-3 text-center">
            <div className="text-2xl font-semibold">{unreadMessages}</div>
            <div className="text-xs text-muted-foreground">Messages</div>
          </Card>
        </div>
      </div>

{/* Filters */}
      <div className="px-4 py-3 flex gap-2 overflow-x-auto no-scrollbar border-b border-border">
        {filters.map((filter) => (
          <Button
            key={filter.id}
            variant={activeFilter === filter.id ? "default" : "outline"}
            size="sm"
            onClick={() => setActiveFilter(filter.id)}
            className="shrink-0"
          >
            {filter.label}
          </Button>
        ))}
      </div>

{/* Pending Offers Section */}
      {(activeFilter === "all" || activeFilter === "offers") && offers.length > 0 && (
        <section className="px-4 py-4 border-b border-border">
          <div className="flex items-center gap-2 mb-3">
            <Sparkles className="w-4 h-4 text-warning" />
            <h2 className="font-semibold">Pending Offers</h2>
          </div>
          <div className="space-y-3">
            {offers.map((offer) => (
              <OfferCard key={offer.id} offer={offer} onView={() => onViewOffer(offer)} />
            ))}
          </div>
        </section>
      )}

{/* Your Applications */}
      {(activeFilter === "all" || activeFilter === "castings") && applications.length > 0 && (
        <section className="px-4 py-4 border-b border-border">
          <div className="flex items-center justify-between mb-3">
            <h2 className="font-semibold">Your Applications</h2>
            <Button variant="ghost" size="sm" className="text-muted-foreground">
              View All
            </Button>
          </div>
          <div className="space-y-3">
            {applications.slice(0, 3).map((app) => (
              <ApplicationCard key={app.id} application={app} onView={() => app.casting && onViewCasting(app.casting)} />
            ))}
          </div>
        </section>
      )}

{/* Open Castings */}
      {(activeFilter === "all" || activeFilter === "castings") && (
        <section className="px-4 py-4">
          <div className="flex items-center justify-between mb-3">
            <h2 className="font-semibold">Open Castings</h2>
            <Button variant="ghost" size="sm" className="text-muted-foreground">
              See All
            </Button>
          </div>
          <div className="space-y-3">
            {castings
              .filter((c) => c.status === "active")
              .slice(0, 5)
              .map((casting, index) => (
                <motion.div
                  key={casting.id}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.05 }}
                >
                  <CastingCard casting={casting} onView={() => onViewCasting(casting)} />
                </motion.div>
              ))}
          </div>
        </section>
      )}
    </div>
  )
}

function OfferCard({ offer, onView }: { offer: JobOffer; onView: () => void }) {
  return (
    <Card className="p-4 cursor-pointer hover:bg-muted/50 transition-colors" onClick={onView}>
      <div className="flex items-start gap-3">
        <Avatar className="w-10 h-10">
          <AvatarImage src={offer.sender.avatar || "/placeholder.svg"} alt={offer.sender.name} />
          <AvatarFallback>{offer.sender.name[0]}</AvatarFallback>
        </Avatar>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className="font-medium truncate">{offer.sender.name}</span>
            {offer.sender.verified && <BadgeCheck className="w-4 h-4 text-foreground shrink-0" />}
          </div>
          <p className="font-medium text-sm mt-1">{offer.title}</p>
          <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
            <span className="flex items-center gap-1">
              <DollarSign className="w-3 h-3" />
              {offer.pay.amount.toLocaleString()} {offer.pay.currency}
            </span>
            <span className="flex items-center gap-1">
              <MapPin className="w-3 h-3" />
              {offer.location}
            </span>
          </div>
        </div>
        <Badge variant="outline" className="shrink-0 bg-warning/10 text-warning border-warning/20">
          Pending
        </Badge>
      </div>
    </Card>
  )
}

function ApplicationCard({
  application,
  onView,
}: {
  application: CastingApplication
  onView: () => void
}) {
  const statusConfig = {
    pending: { label: "Pending", icon: Clock, color: "text-muted-foreground" },
    shortlisted: { label: "Shortlisted", icon: Sparkles, color: "text-warning" },
    accepted: { label: "Accepted", icon: CheckCircle2, color: "text-success" },
    rejected: { label: "Not Selected", icon: null, color: "text-destructive" },
    withdrawn: { label: "Withdrawn", icon: null, color: "text-muted-foreground" },
  }

const status = statusConfig[application.status]
  const StatusIcon = status.icon

return (
    <Card className="p-4 cursor-pointer hover:bg-muted/50 transition-colors" onClick={onView}>
      <div className="flex items-start gap-3">
        <Avatar className="w-10 h-10">
          <AvatarImage
            src={application.casting?.creator.avatar || "/placeholder.svg"}
            alt={application.casting?.creator.name ?? ""}
          />
          <AvatarFallback>{application.casting?.creator.name?.[0] ?? "?"}</AvatarFallback>
        </Avatar>
        <div className="flex-1 min-w-0">
          <p className="font-medium truncate">{application.casting?.title ?? "Casting"}</p>
          <p className="text-sm text-muted-foreground truncate">{application.casting?.creator.name}</p>
          <div className="flex items-center gap-1 mt-2">
            {StatusIcon && <StatusIcon className={`w-3 h-3 ${status.color}`} />}
            <span className={`text-xs ${status.color}`}>{status.label}</span>
          </div>
        </div>
        <ArrowRight className="w-4 h-4 text-muted-foreground shrink-0" />
      </div>
    </Card>
  )
}

function CastingCard({ casting, onView }: { casting: Casting; onView: () => void }) {
  const typeLabels = {
    runway: "Runway",
    campaign: "Campaign",
    editorial: "Editorial",
    commercial: "Commercial",
    event: "Event",
    fitting: "Fitting",
  }

return (
    <Card className="overflow-hidden cursor-pointer hover:bg-muted/50 transition-colors" onClick={onView}>
      {casting.images?.[0] && (
        <div className="h-32 bg-muted">
          <img
            src={casting.images[0] || "/placeholder.svg"}
            alt={casting.title}
            className="w-full h-full object-cover"
          />
        </div>
      )}
      <div className="p-4">
        <div className="flex items-start justify-between gap-2">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2">
              <Badge variant="secondary" className="shrink-0">
                {typeLabels[casting.type]}
              </Badge>
              {casting.pay.type !== "tbd" && (
                <span className="text-sm font-medium">
                  {casting.pay.amount.toLocaleString()} {casting.pay.currency}
                </span>
              )}
            </div>
            <h3 className="font-semibold mt-2 truncate">{casting.title}</h3>
            <div className="flex items-center gap-2 mt-1">
              <Avatar className="w-5 h-5">
                <AvatarImage src={casting.creator.avatar || "/placeholder.svg"} alt={casting.creator.name} />
                <AvatarFallback>{casting.creator.name[0]}</AvatarFallback>
              </Avatar>
              <span className="text-sm text-muted-foreground truncate">{casting.creator.name}</span>
              {casting.creator.verified && <BadgeCheck className="w-3 h-3 text-foreground shrink-0" />}
            </div>
          </div>
        </div>
        <div className="flex items-center gap-4 mt-3 text-xs text-muted-foreground">
          <span className="flex items-center gap-1">
            <MapPin className="w-3 h-3" />
            {casting.location}
          </span>
          <span className="flex items-center gap-1">
            <Calendar className="w-3 h-3" />
            {formatDistanceToNow(casting.deadline, { addSuffix: true })}
          </span>
        </div>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/model/inbox-view.tsx"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { useAuth } from "@/lib/auth-context"
import { useStore } from "@/lib/store-context"
import { useConversations, useMessages } from "@/lib/hooks/use-conversations"
import { useNotifications } from "@/lib/hooks/use-notifications"
import { api } from "@/lib/api-client"
import type { User as UserType } from "@/lib/types"
import type { Conversation, Message, JobOffer, Notification, CastingApplication } from "@/lib/types"
import {
  ArrowLeft,
  Send,
  BadgeCheck,
  Sparkles,
  Check,
  X,
  Bell,
  Briefcase,
  Star,
  MessageSquare,
  UserPlus,
  CheckCircle,
  CalendarCheck,
} from "lucide-react"
import { formatDistanceToNow, format, isToday, isYesterday } from "date-fns"

type InboxTab = "messages" | "bookings" | "notifications"

interface InboxViewProps {
  onViewProfile?: (user: import("@/lib/types").User) => void
  initialConversationId?: string | null
  onConversationOpened?: () => void
  onOpenCastingRoom?: (castingId: string) => void
  onNavigateToTab?: (tab: string) => void
}

export function InboxView({ onViewProfile, initialConversationId, onConversationOpened, onOpenCastingRoom, onNavigateToTab }: InboxViewProps = {}) {
  const { user } = useAuth()
  const { conversations: apiConversations, isLoading: conversationsLoading, refresh: refreshConversations } = useConversations()
  const { notifications: apiNotifications, unreadCount, refresh: refreshNotifications } = useNotifications()
  const [activeTab, setActiveTab] = useState<InboxTab>("messages")
  const [selectedConversation, setSelectedConversation] = useState<Conversation | null>(null)
  const [dismissedInitial, setDismissedInitial] = useState(false)

const conversations = (apiConversations ?? []).map(mapApiConversationToConversation)

// Map API notifications to frontend Notification type
  const notifications: Notification[] = (apiNotifications ?? []).map((n: any) => ({
    id: n.id,
    userId: n.userId || user?.id || "",
    type: n.type?.toLowerCase() || "system",
    title: n.payload?.title || n.title || "Notification",
    message: n.payload?.message || n.payload?.body || n.message || "",
    read: n.read ?? false,
    actionUrl: n.payload?.castingId ? `/castings/${n.payload.castingId}` : undefined,
    metadata: n.payload || {},
    createdAt: new Date(n.createdAt),
  }))

// Auto-open conversation if initialConversationId is provided (only once)
  useEffect(() => {
    if (initialConversationId && conversations.length > 0 && !selectedConversation && !dismissedInitial) {
      const conv = conversations.find((c: Conversation) => c.id === initialConversationId)
      if (conv) {
        setSelectedConversation(conv)
        onConversationOpened?.()
      }
    }
  }, [initialConversationId, conversations, selectedConversation, dismissedInitial, onConversationOpened])

// Fetch real bookings + offers from store (loaded from DB)
  const { getApplicationsForModel, refreshCastings } = useStore()
  const allApplications = user ? getApplicationsForModel(user.id) : []
  const offeredApplications = allApplications.filter((a) => a.status === "offered")
  const bookingApplications = allApplications.filter(
    (a) => a.status === "accepted" || a.status === "shortlisted" || a.status === "confirmed"
  )

if (selectedConversation) {
    return (
      <ChatView
        conversation={selectedConversation}
        onBack={() => { setSelectedConversation(null); setDismissedInitial(true) }}
        onViewProfile={onViewProfile}
        refreshConversations={refreshConversations}
      />
    )
  }

const handleMarkAllRead = async () => {
    await api.markAllNotificationsRead()
    refreshNotifications()
  }

const handleMarkOneRead = async (notificationId: string) => {
    await api.markNotificationRead(notificationId)
    refreshNotifications()
  }

return (
    <div className="pb-20">
      {/* Tabs */}
      <div className="flex border-b border-border sticky top-14 bg-background z-30">
        <button
          onClick={() => setActiveTab("messages")}
          className={`flex-1 py-3 text-sm font-medium border-b-2 transition-colors ${
            activeTab === "messages" ? "border-foreground text-foreground" : "border-transparent text-muted-foreground"
          }`}
        >
          Messages
        </button>
        <button
          onClick={() => setActiveTab("bookings")}
          className={`flex-1 py-3 text-sm font-medium border-b-2 transition-colors relative ${
            activeTab === "bookings"
              ? "border-foreground text-foreground"
              : "border-transparent text-muted-foreground"
          }`}
        >
          {user?.role === "brand" || user?.role === "agency" || user?.role === "client" ? "Castings" : "Bookings"}
          {bookingApplications.length > 0 && (
            <span className="absolute top-2 ml-1 px-1.5 py-0.5 text-[10px] bg-foreground text-background rounded-full">
              {bookingApplications.length}
            </span>
          )}
        </button>
        <button
          onClick={() => setActiveTab("notifications")}
          className={`flex-1 py-3 text-sm font-medium border-b-2 transition-colors relative ${
            activeTab === "notifications"
              ? "border-foreground text-foreground"
              : "border-transparent text-muted-foreground"
          }`}
        >
          Notifications
          {unreadCount > 0 && (
            <span className="absolute top-2 ml-1 px-1.5 py-0.5 text-[10px] bg-destructive text-destructive-foreground rounded-full">
              {unreadCount}
            </span>
          )}
        </button>
      </div>

<AnimatePresence mode="wait">
        {activeTab === "messages" && (
          <motion.div key="messages" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
            {conversationsLoading ? (
              <div className="text-center py-12 text-muted-foreground">Loading…</div>
            ) : conversations.length > 0 ? (
              <div className="divide-y divide-border">
                {conversations.map((conversation: any) => (
                  <ConversationItem
                    key={conversation.id}
                    conversation={conversation}
                    currentUserId={user?.id || ""}
                    onClick={() => {
                      if (conversation.type === "casting" && conversation.castingId && onOpenCastingRoom) {
                        onOpenCastingRoom(conversation.castingId)
                      } else {
                        setSelectedConversation(conversation)
                      }
                    }}
                  />
                ))}
              </div>
            ) : (
              <div className="text-center py-12 text-muted-foreground">
                <MessageSquare className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p>No messages yet</p>
              </div>
            )}
          </motion.div>
        )}

{activeTab === "bookings" && (
          <motion.div
            key="bookings"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="p-4 space-y-3"
          >
            {/* Pending Offers — need Accept/Decline */}
            {offeredApplications.length > 0 && (
              <div className="mb-4">
                <h3 className="text-sm font-medium text-muted-foreground mb-3">Pending Offers</h3>
                {offeredApplications.map((app) => (
                  <Card key={app.id} className="p-4 space-y-3 mb-3 border-purple-500/30 bg-purple-500/5">
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
                        <h3 className="font-semibold text-sm">{app.casting?.title || "Casting"}</h3>
                        <p className="text-xs text-muted-foreground mt-0.5">{app.casting?.creator?.name || "Brand"}</p>
                      </div>
                      <Badge variant="outline" className="bg-purple-500/10 text-purple-400 border-purple-500/20">
                        <Sparkles className="w-3 h-3 mr-1" />
                        Offer
                      </Badge>
                    </div>
                    {app.casting?.location && (
                      <p className="text-xs text-muted-foreground">{app.casting.location}</p>
                    )}
                    {app.casting?.pay && (
                      <p className="text-sm font-medium">{app.casting.pay.amount.toLocaleString()} {app.casting.pay.currency}</p>
                    )}
                    <div className="flex gap-2 pt-1">
                      <Button
                        variant="outline"
                        className="flex-1 bg-transparent"
                        onClick={async () => {
                          await api.declineOffer(app.id)
                          refreshCastings()
                        }}
                      >
                        <X className="w-4 h-4 mr-1" /> Decline
                      </Button>
                      <Button
                        className="flex-1"
                        onClick={async () => {
                          await api.acceptOffer(app.id)
                          refreshCastings()
                        }}
                      >
                        <Check className="w-4 h-4 mr-1" /> Accept
                      </Button>
                    </div>
                  </Card>
                ))}
              </div>
            )}

{/* Confirmed bookings */}
            {bookingApplications.length > 0 ? (
              <div className="space-y-3">
                {offeredApplications.length > 0 && <h3 className="text-sm font-medium text-muted-foreground mb-2">Bookings</h3>}
                {bookingApplications.map((application) => (
                  <BookingCard key={application.id} application={application} onOpenCastingRoom={onOpenCastingRoom} />
                ))}
              </div>
            ) : offeredApplications.length === 0 ? (
              <div className="text-center py-12 text-muted-foreground">
                <CalendarCheck className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p>No bookings yet</p>
                <p className="text-xs mt-1">Accepted casting applications will appear here</p>
              </div>
            ) : null}
          </motion.div>
        )}

{activeTab === "notifications" && (
          <motion.div
            key="notifications"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="p-4 space-y-3"
          >
            {unreadCount > 0 && (
              <div className="flex justify-end mb-2">
                <Button variant="ghost" size="sm" onClick={handleMarkAllRead}>
                  Mark all as read
                </Button>
              </div>
            )}

{/* Notifications Section */}
            {notifications.length > 0 ? (
              <div className="space-y-2">
                {notifications.map((notification) => (
                  <NotificationItem
                    key={notification.id}
                    notification={notification}
                    onRead={() => handleMarkOneRead(notification.id)}
                    onNavigate={(tab) => setActiveTab(tab as InboxTab)}
                    onAgencyRespond={async (applicationId, action) => {
                      await api.respondToAgencyApplication(applicationId, action)
                      refreshNotifications()
                    }}
                  />
                ))}
              </div>
            ) : (
              <div className="text-center py-12 text-muted-foreground">
                <Bell className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p>No notifications yet</p>
              </div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

function NotificationItem({ notification, onRead, onAgencyRespond, onNavigate }: { notification: Notification; onRead: () => void; onAgencyRespond?: (applicationId: string, action: "accept" | "reject") => void; onNavigate?: (tab: string) => void }) {
  const [responding, setResponding] = useState(false)
  const isAgencyInvite = notification.metadata?.relatedType === "agency_application" && notification.metadata?.relatedId

const getIcon = () => {
    switch (notification.type) {
      case "casting_invite":
        return <Briefcase className="w-5 h-5" />
      case "shortlisted":
        return <Star className="w-5 h-5 text-warning" />
      case "offer":
        return <Sparkles className="w-5 h-5 text-success" />
      case "accepted":
        return <CheckCircle className="w-5 h-5 text-success" />
      case "message":
        return <MessageSquare className="w-5 h-5" />
      case "follow":
        return <UserPlus className="w-5 h-5" />
      default:
        return <Bell className="w-5 h-5" />
    }
  }

return (
    <Card
      className={`p-4 cursor-pointer transition-colors ${!notification.read ? "bg-muted/50 border-foreground/20" : ""}`}
      onClick={() => {
        onRead()
        // Navigate based on notification type
        if (onNavigate) {
          const type = notification.type
          if (type === "shortlisted" || type === "offer" || type === "accepted" || notification.title?.includes("confirmed")) {
            onNavigate("bookings")
          }
        }
      }}
    >
      <div className="flex items-start gap-3">
        <div className={`p-2 rounded-full ${!notification.read ? "bg-foreground/10" : "bg-muted"}`}>{getIcon()}</div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className={`font-medium text-sm ${!notification.read ? "" : "text-muted-foreground"}`}>
              {notification.title}
            </span>
            {!notification.read && <span className="w-2 h-2 bg-foreground rounded-full" />}
          </div>
          <p className="text-sm text-muted-foreground mt-0.5">{notification.message}</p>
          {isAgencyInvite && onAgencyRespond && !responding && (
            <div className="flex gap-2 mt-3">
              <Button
                variant="outline"
                size="sm"
                className="bg-transparent text-xs"
                onClick={(e) => {
                  e.stopPropagation()
                  setResponding(true)
                  onAgencyRespond(notification.metadata!.relatedId!, "reject")
                }}
              >
                <X className="w-3 h-3 mr-1" /> Decline
              </Button>
              <Button
                size="sm"
                className="text-xs"
                onClick={(e) => {
                  e.stopPropagation()
                  setResponding(true)
                  onAgencyRespond(notification.metadata!.relatedId!, "accept")
                }}
              >
                <Check className="w-3 h-3 mr-1" /> Accept
              </Button>
            </div>
          )}
          {responding && <p className="text-xs text-muted-foreground mt-2">Response sent</p>}
          <p className="text-xs text-muted-foreground mt-1">
            {formatDistanceToNow(notification.createdAt, { addSuffix: true })}
          </p>
        </div>
      </div>
    </Card>
  )
}

function ConversationItem({
  conversation,
  currentUserId,
  onClick,
}: {
  conversation: Conversation & { castingTitle?: string | null; castingId?: string | null }
  currentUserId: string
  onClick: () => void
}) {
  const isCastingRoom = conversation.type === "casting"
  const otherUser = conversation.participants.find((p) => p.id !== currentUserId) || conversation.participants[0]

if (!otherUser && !isCastingRoom) return null

const formatMessageTime = (date: Date) => {
    if (isToday(date)) return format(date, "HH:mm")
    if (isYesterday(date)) return "Yesterday"
    return format(date, "MMM d")
  }

return (
    <button
      onClick={onClick}
      className="w-full p-4 flex items-start gap-3 hover:bg-muted/50 transition-colors text-left"
    >
      <div className="relative">
        <Avatar className="w-12 h-12">
          {isCastingRoom ? (
            <>
              <AvatarImage src="/placeholder.svg" />
              <AvatarFallback className="bg-violet-600 text-white text-xs">CR</AvatarFallback>
            </>
          ) : (
            <>
              <AvatarImage src={otherUser?.avatar || "/placeholder.svg"} alt={otherUser?.name} />
              <AvatarFallback>{otherUser?.name?.[0]}</AvatarFallback>
            </>
          )}
        </Avatar>
        {conversation.unreadCount > 0 && (
          <span className="absolute -top-1 -right-1 w-5 h-5 bg-foreground text-background text-xs font-medium rounded-full flex items-center justify-center">
            {conversation.unreadCount}
          </span>
        )}
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-1">
            <span className={`font-medium truncate ${conversation.unreadCount > 0 ? "" : "text-muted-foreground"}`}>
              {isCastingRoom ? (conversation as any).castingTitle || "Casting Room" : otherUser?.name || "Unknown"}
            </span>
            {isCastingRoom && <Badge variant="secondary" className="text-[9px] ml-1 shrink-0">Room</Badge>}
            {!isCastingRoom && otherUser?.verified && <BadgeCheck className="w-4 h-4 text-foreground shrink-0" />}
          </div>
          <span className="text-xs text-muted-foreground shrink-0">
            {conversation.lastMessage.id
              ? formatMessageTime(conversation.lastMessage.createdAt)
              : "—"}
          </span>
        </div>
        <p
          className={`text-sm truncate mt-0.5 ${conversation.unreadCount > 0 ? "text-foreground" : "text-muted-foreground"}`}
        >
          {conversation.lastMessage.content || "No messages yet"}
        </p>
        {conversation.type === "casting" && (
          <Badge variant="secondary" className="mt-1 text-xs">
            Casting
          </Badge>
        )}
      </div>
    </button>
  )
}

function ChatView({
  conversation,
  onBack,
  onViewProfile,
  refreshConversations,
}: {
  conversation: Conversation
  onBack: () => void
  onViewProfile?: (u: UserType) => void
  refreshConversations?: () => void
}) {
  const { user } = useAuth()
  const [message, setMessage] = useState("")
  const { messages: apiMessages, isLoading: messagesLoading, refresh: refreshMessages } = useMessages(conversation.id)

const messages: Message[] = (apiMessages ?? []).map((m: { id: string; content: string; senderId: string; createdAt: string }) => ({
    id: m.id,
    conversationId: conversation.id,
    senderId: m.senderId,
    content: m.content,
    type: "text" as const,
    read: true,
    createdAt: new Date(m.createdAt),
  }))

const otherUser = conversation.participants.find((p) => p.id !== user?.id) || conversation.participants[0]

const handleSend = async () => {
    if (!message.trim() || !user) return
    const text = message.trim()
    setMessage("")
    const res = await api.sendMessage(conversation.id, text)
    if (res.error) return
    refreshMessages()
    refreshConversations?.()
  }

const groupMessagesByDate = (msgs: Message[]) => {
    const groups: { date: string; messages: Message[] }[] = []
    let currentDate = ""

msgs.forEach((msg) => {
      const msgDate = format(msg.createdAt, "yyyy-MM-dd")
      if (msgDate !== currentDate) {
        currentDate = msgDate
        groups.push({ date: msgDate, messages: [msg] })
      } else {
        groups[groups.length - 1].messages.push(msg)
      }
    })

return groups
  }

const formatDateHeader = (dateStr: string) => {
    const date = new Date(dateStr)
    if (isToday(date)) return "Today"
    if (isYesterday(date)) return "Yesterday"
    return format(date, "MMMM d, yyyy")
  }

// Poll for new messages every 3 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      refreshMessages()
    }, 3000)
    return () => clearInterval(interval)
  }, [refreshMessages])

return (
    <div className="flex flex-col" style={{ height: "calc(100vh - 7rem)" }}>
      {/* Header */}
      <div className="flex items-center gap-3 p-4 border-b border-border shrink-0">
        <Button variant="ghost" size="icon" onClick={onBack}>
          <ArrowLeft className="w-5 h-5" />
        </Button>
        <button
          type="button"
          className="flex flex-1 items-center gap-3 min-w-0 text-left"
          onClick={() => onViewProfile?.(otherUser)}
        >
          <Avatar className="w-10 h-10 shrink-0">
            <AvatarImage src={otherUser.avatar || "/placeholder.svg"} alt={otherUser.name} />
            <AvatarFallback>{otherUser.name[0]}</AvatarFallback>
          </Avatar>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-1">
              <span className="font-medium truncate">{otherUser.name}</span>
              {otherUser.verified && <BadgeCheck className="w-4 h-4 shrink-0" />}
            </div>
            <p className="text-xs text-muted-foreground truncate capitalize">{otherUser.role}</p>
          </div>
        </button>
      </div>

{/* Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4 min-h-0">
        {messagesLoading && messages.length === 0 ? (
          <div className="flex items-center justify-center h-full text-muted-foreground text-sm">Loading messages…</div>
        ) : messages.length === 0 ? (
          <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
            No messages yet. Say hello! 👋
          </div>
        ) : (
          groupMessagesByDate(messages).map((group) => (
            <div key={group.date}>
              <div className="text-center mb-4">
                <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded-full">
                  {formatDateHeader(group.date)}
                </span>
              </div>
              <div className="space-y-2">
                {group.messages.map((msg) => (
                  <div key={msg.id} className={`flex ${msg.senderId === user?.id ? "justify-end" : "justify-start"}`}>
                    <div
                      className={`max-w-[80%] px-4 py-2 rounded-2xl ${
                        msg.senderId === user?.id
                          ? "bg-foreground text-background rounded-br-md"
                          : "bg-muted rounded-bl-md"
                      }`}
                    >
                      <p className="text-sm">{msg.content}</p>
                      <p
                        className={`text-[10px] mt-1 ${msg.senderId === user?.id ? "text-background/60" : "text-muted-foreground"}`}
                      >
                        {format(msg.createdAt, "HH:mm")}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))
        )}
      </div>

{/* Input — always visible */}
      <div className="p-3 border-t border-border shrink-0 bg-background">
        <div className="flex items-center gap-2">
          <Input
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Type a message..."
            className="flex-1 h-11"
            onKeyDown={(e) => e.key === "Enter" && handleSend()}
            autoFocus
          />
          <Button size="icon" onClick={handleSend} disabled={!message.trim()} className="h-11 w-11">
            <Send className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}

function BookingCard({ application, onOpenCastingRoom }: { application: CastingApplication; onOpenCastingRoom?: (castingId: string) => void }) {
  const statusColors: Record<string, string> = {
    accepted: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20",
    confirmed: "bg-green-500/10 text-green-600 border-green-500/20",
    shortlisted: "bg-amber-500/10 text-amber-600 border-amber-500/20",
    offered: "bg-purple-500/10 text-purple-600 border-purple-500/20",
  }

const statusLabels: Record<string, string> = {
    accepted: "Accepted",
    confirmed: "Confirmed",
    shortlisted: "Shortlisted",
    offered: "Offer Pending",
  }

return (
    <Card className="p-4 space-y-3">
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-sm truncate">
            {application.casting?.title || "Casting"}
          </h3>
          <p className="text-xs text-muted-foreground mt-0.5">
            {application.casting?.creator?.name || "Brand"}
          </p>
        </div>
        <Badge variant="outline" className={statusColors[application.status] || ""}>
          {application.status === "accepted" && <CheckCircle className="w-3 h-3 mr-1" />}
          {application.status === "shortlisted" && <Star className="w-3 h-3 mr-1" />}
          {statusLabels[application.status] || application.status}
        </Badge>
      </div>
      {application.casting?.location && (
        <p className="text-xs text-muted-foreground">
          {application.casting.location}
        </p>
      )}
      <div className="flex items-center justify-between text-xs text-muted-foreground">
        <span>Applied {formatDistanceToNow(application.submittedAt, { addSuffix: true })}</span>
        {application.casting?.pay && (
          <span className="font-medium text-foreground">
            {application.casting.pay.amount.toLocaleString()} {application.casting.pay.currency}
          </span>
        )}
      </div>
      {/* Status-specific messages */}
      {application.status === "accepted" && (
        <p className="text-xs text-amber-400 mt-1">Awaiting brand confirmation</p>
      )}
      {application.status === "confirmed" && onOpenCastingRoom && (
        <Button
          size="sm"
          className="w-full mt-2"
          onClick={() => onOpenCastingRoom(application.castingId)}
        >
          <MessageSquare className="w-4 h-4 mr-1" />
          Enter Casting Room
        </Button>
      )}
    </Card>
  )
}

function OfferCard({
  offer,
  onUpdate,
}: { offer: JobOffer; onUpdate: (id: string, updates: Partial<JobOffer>) => void }) {
  const handleAccept = () => {
    onUpdate(offer.id, { status: "accepted" })
  }

const handleDecline = () => {
    onUpdate(offer.id, { status: "declined" })
  }

return (
    <Card className="p-4 space-y-4 mb-3 border-warning/30 bg-warning/5">
      <div className="flex items-start gap-3">
        <Avatar className="w-10 h-10">
          <AvatarImage src={offer.sender.avatar || "/placeholder.svg"} alt={offer.sender.name} />
          <AvatarFallback>{offer.sender.name[0]}</AvatarFallback>
        </Avatar>
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <span className="font-medium">{offer.sender.name}</span>
            {offer.sender.verified && <BadgeCheck className="w-4 h-4" />}
          </div>
          <p className="text-xs text-muted-foreground">{formatDistanceToNow(offer.createdAt, { addSuffix: true })}</p>
        </div>
        <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
          <Sparkles className="w-3 h-3 mr-1" />
          Offer
        </Badge>
      </div>

<div>
        <h3 className="font-semibold">{offer.title}</h3>
        <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{offer.description}</p>
      </div>

<div className="grid grid-cols-2 gap-3 text-sm">
        <div>
          <p className="text-muted-foreground text-xs">Payment</p>
          <p className="font-medium">
            {offer.pay.amount.toLocaleString()} {offer.pay.currency}
          </p>
        </div>
        <div>
          <p className="text-muted-foreground text-xs">Location</p>
          <p className="font-medium">{offer.location}</p>
        </div>
        <div>
          <p className="text-muted-foreground text-xs">Dates</p>
          <p className="font-medium">
            {format(offer.dates.start, "MMM d")} - {format(offer.dates.end, "MMM d")}
          </p>
        </div>
        <div>
          <p className="text-muted-foreground text-xs">Expires</p>
          <p className="font-medium">{formatDistanceToNow(offer.expiresAt, { addSuffix: true })}</p>
        </div>
      </div>

<div className="flex gap-2 pt-2">
        <Button variant="outline" className="flex-1 bg-transparent" onClick={handleDecline}>
          <X className="w-4 h-4 mr-2" />
          Decline
        </Button>
        <Button className="flex-1" onClick={handleAccept}>
          <Check className="w-4 h-4 mr-2" />
          Accept
        </Button>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/model/job-history.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { api } from "@/lib/api-client"
import { Briefcase, MapPin, Calendar, DollarSign } from "lucide-react"
import { format } from "date-fns"

interface HistorySubmission {
  id: string
  status: string
  note: string | null
  createdAt: string
  updatedAt: string
  casting: {
    id: string
    title: string
    type: string
    status: string
    location: string | null
    startDate: string | null
    endDate: string | null
    payMin: number | null
    payMax: number | null
    creator: {
      id: string
      username: string
      name: string
      avatar: string | null
      role: string
    }
  } | null
}

const STATUS_BADGES: Record<string, string> = {
  ACCEPTED: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20",
  CONFIRMED: "bg-sky-500/10 text-sky-600 border-sky-500/20",
  DECLINED: "bg-amber-500/10 text-amber-600 border-amber-500/20",
  REJECTED: "bg-red-500/10 text-red-600 border-red-500/20",
}

const FILTER_TABS = [
  { value: "", label: "All" },
  { value: "ACCEPTED", label: "Accepted" },
  { value: "CONFIRMED", label: "Confirmed" },
  { value: "DECLINED", label: "Declined" },
  { value: "REJECTED", label: "Not Selected" },
]

export function JobHistory() {
  const [submissions, setSubmissions] = useState<HistorySubmission[]>([])
  const [total, setTotal] = useState(0)
  const [filter, setFilter] = useState("")
  const [loading, setLoading] = useState(true)

const fetchHistory = useCallback(async () => {
    setLoading(true)
    const res = await api.getJobHistory({ status: filter || undefined, limit: 50 })
    const data = res.data as { submissions?: HistorySubmission[]; total?: number } | undefined
    if (data?.submissions) {
      setSubmissions(data.submissions)
      setTotal(data.total || data.submissions.length)
    }
    setLoading(false)
  }, [filter])

useEffect(() => {
    fetchHistory()
  }, [fetchHistory])

const formatPay = (min: number | null, max: number | null) => {
    if (!min && !max) return null
    if (min && max) return `$${min.toLocaleString()} - $${max.toLocaleString()}`
    return `$${(min || max)!.toLocaleString()}`
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-semibold flex items-center gap-2">
          <Briefcase className="w-4 h-4" />
          Job History
        </h3>
        <span className="text-xs text-muted-foreground">{total} total</span>
      </div>

{/* Filter tabs */}
      <div className="flex gap-2 overflow-x-auto pb-1">
        {FILTER_TABS.map((tab) => (
          <Button
            key={tab.value}
            variant={filter === tab.value ? "default" : "outline"}
            size="sm"
            className="text-xs shrink-0"
            onClick={() => setFilter(tab.value)}
          >
            {tab.label}
          </Button>
        ))}
      </div>

{loading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <Card key={i} className="p-4 animate-pulse">
              <div className="h-4 bg-muted rounded w-3/4 mb-2" />
              <div className="h-3 bg-muted rounded w-1/2" />
            </Card>
          ))}
        </div>
      ) : submissions.length === 0 ? (
        <div className="text-center py-12 text-muted-foreground">
          <Briefcase className="w-12 h-12 mx-auto mb-3 opacity-50" />
          <p>No job history yet</p>
          <p className="text-xs mt-1">Your completed, accepted, and declined bookings will appear here.</p>
        </div>
      ) : (
        <div className="space-y-2">
          {submissions.map((sub) => (
            <Card key={sub.id} className="p-4">
              <div className="flex items-start justify-between mb-2">
                <div className="flex-1 min-w-0">
                  <p className="font-medium text-sm truncate">{sub.casting?.title || "Unknown Casting"}</p>
                  <p className="text-xs text-muted-foreground">{sub.casting?.creator?.name || "Unknown"}</p>
                </div>
                <Badge className={`text-[10px] shrink-0 ml-2 ${STATUS_BADGES[sub.status] || ""}`}>
                  {sub.status === "REJECTED" ? "Not Selected" : sub.status.charAt(0) + sub.status.slice(1).toLowerCase()}
                </Badge>
              </div>
              <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
                {sub.casting?.type && (
                  <span className="capitalize">{sub.casting.type.toLowerCase()}</span>
                )}
                {sub.casting?.location && (
                  <span className="flex items-center gap-1">
                    <MapPin className="w-3 h-3" />
                    {sub.casting.location}
                  </span>
                )}
                {sub.casting?.startDate && (
                  <span className="flex items-center gap-1">
                    <Calendar className="w-3 h-3" />
                    {format(new Date(sub.casting.startDate), "MMM d, yyyy")}
                  </span>
                )}
                {formatPay(sub.casting?.payMin || null, sub.casting?.payMax || null) && (
                  <span className="flex items-center gap-1">
                    <DollarSign className="w-3 h-3" />
                    {formatPay(sub.casting?.payMin || null, sub.casting?.payMax || null)}
                  </span>
                )}
              </div>
              <p className="text-[10px] text-muted-foreground mt-2">
                Applied {format(new Date(sub.createdAt), "MMM d, yyyy")}
                {sub.updatedAt !== sub.createdAt && ` · Updated ${format(new Date(sub.updatedAt), "MMM d, yyyy")}`}
              </p>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/model/profile-view.tsx"
"use client"

import type React from "react"
import { useState, useEffect, useCallback } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useAuth } from "@/lib/auth-context"
import { api } from "@/lib/api-client"
import { useStore } from "@/lib/store-context"
import type { User, Casting } from "@/lib/types"
import { AvailabilityCalendar } from "./availability-calendar"
import { JobHistory } from "./job-history"
import { ShareProfile } from "./share-profile"
import { ProfileAnalytics } from "@/components/analytics/profile-analytics"
import { EarningsDashboard } from "@/components/analytics/earnings-dashboard"
import { StoryHighlights } from "@/components/stories/story-highlights"
import {
  BadgeCheck,
  MapPin,
  Settings,
  Share2,
  MessageCircle,
  Grid3X3,
  Calendar,
  Edit,
  MessageSquare,
  UserPlus,
  Star,
  TrendingUp,
  Globe,
  Briefcase,
  X,
  ChevronLeft,
  ChevronRight,
  Plus,
  Send,
  CheckCircle,
  Users,
  MoreHorizontal,
  ShieldAlert,
  Ban,
  Heart,
  Trash2,
  GripVertical,
  Instagram,
  Camera,
} from "lucide-react"
import { uploadAvatar } from "@/lib/upload"
import { mockUsers } from "@/lib/mock-data"

type ProfileTab = "portfolio" | "posts" | "details" | "availability"

interface ProfileViewProps {
  user?: User
  isOwn?: boolean
  onSettingsClick?: () => void
  onMessageClick?: () => void
  onInviteToCasting?: (casting: Casting) => void
  onProfileUpdated?: () => void
  onFollowToggle?: () => void
  onViewCasting?: (casting: Casting) => void
  onViewProfile?: (user: User) => void
}

export function ProfileView({
  user: profileUser,
  isOwn = true,
  onSettingsClick,
  onMessageClick,
  onInviteToCasting,
  onProfileUpdated,
  onFollowToggle,
  onViewCasting,
  onViewProfile,
}: ProfileViewProps) {
  const { user: currentUser } = useAuth()
  const { castings } = useStore()
  const [activeTab, setActiveTab] = useState<ProfileTab>("portfolio")
  const [portfolioFilter, setPortfolioFilter] = useState<string>("all")
  const [dbPortfolio, setDbPortfolio] = useState<Array<{ id: string; url: string; type: string; meta?: any }>>([])
  const [dbPosts, setDbPosts] = useState<Array<{ id: string; imageUrl: string; caption?: string | null; createdAt: string }>>([])
  const [liveMeasurements, setLiveMeasurements] = useState<typeof user.measurements | undefined>(undefined)
  const [agencyInfo, setAgencyInfo] = useState<{ id: string; name: string; avatar?: string; location?: string } | null>(null)

// Resolve the user (prop or current auth user)
  const resolvedUserId = profileUser?.id || currentUser?.id

// Fetch portfolio + posts + measurements from DB on mount and after updates
  const fetchProfileData = useCallback(async () => {
    if (!resolvedUserId) return
    // Portfolio
    const mediaRes = await api.getMedia(resolvedUserId, "PORTFOLIO")
    const mediaData = mediaRes.data as { media?: Array<{ id: string; url: string; type: string; meta?: any }> } | undefined
    if (mediaData?.media) setDbPortfolio(mediaData.media)

// Posts
    const postsRes = await api.getPosts({ limit: 50 })
    const postsData = postsRes.data as { posts?: Array<{ id: string; userId: string; imageUrl: string; caption?: string | null; createdAt: string }> } | undefined
    if (postsData?.posts) {
      setDbPosts(postsData.posts.filter((p) => p.userId === resolvedUserId))
    }

// Refresh measurements + agency from profile API
    const profileRes = await api.getMyProfile()
    const profileData = profileRes.data as { profile?: { measurements?: any; agencyId?: string; agencyName?: string; agencyAvatar?: string; agencyLocation?: string } } | undefined
    if (profileData?.profile?.measurements) {
      setLiveMeasurements(profileData.profile.measurements)
    }
    if (profileData?.profile?.agencyId) {
      setAgencyInfo({
        id: profileData.profile.agencyId,
        name: profileData.profile.agencyName || "Agency",
        avatar: profileData.profile.agencyAvatar,
        location: profileData.profile.agencyLocation,
      })
    }
  }, [resolvedUserId])

useEffect(() => {
    fetchProfileData()
  }, [fetchProfileData])
  const [lightboxImage, setLightboxImage] = useState<string | null>(null)
  const [lightboxIndex, setLightboxIndex] = useState(0)
  const [showCreatePostSheet, setShowCreatePostSheet] = useState(false)
  const [newPostImage, setNewPostImage] = useState("")
  const [newPostCaption, setNewPostCaption] = useState("")
  const [postCreating, setPostCreating] = useState(false)
  const [showInviteSheet, setShowInviteSheet] = useState(false)
  const [showEditDetailsSheet, setShowEditDetailsSheet] = useState(false)
  const [detailsSaving, setDetailsSaving] = useState(false)
  const [detailsError, setDetailsError] = useState<string | null>(null)
  const [showAddPortfolioSheet, setShowAddPortfolioSheet] = useState(false)
  const [addPortfolioUrl, setAddPortfolioUrl] = useState("")
  const [addPortfolioSaving, setAddPortfolioSaving] = useState(false)
  const [addPortfolioError, setAddPortfolioError] = useState<string | null>(null)
  const [portfolioCategory, setPortfolioCategory] = useState<string>("all")

const [hasAppliedToAgency, setHasAppliedToAgency] = useState(false)
  const [showAgencyApplySheet, setShowAgencyApplySheet] = useState(false)
  const [agencyApplyStep, setAgencyApplyStep] = useState(1)
  const [agencyApplyNote, setAgencyApplyNote] = useState("")
  const [agencyApplyLoading, setAgencyApplyLoading] = useState(false)
  const [agencyApplyError, setAgencyApplyError] = useState<string | null>(null)

// Block/Report/Save state
  const [showMoreMenu, setShowMoreMenu] = useState(false)
  const [showReportSheet, setShowReportSheet] = useState(false)
  const [reportReason, setReportReason] = useState("")
  const [reportDetails, setReportDetails] = useState("")
  const [reportSending, setReportSending] = useState(false)
  const [reportSent, setReportSent] = useState(false)
  const [isBlocked, setIsBlocked] = useState(false)
  const [isSavedModel, setIsSavedModel] = useState(false)

// Avatar upload state
  const [avatarUrl, setAvatarUrl] = useState<string | null>(null)
  const [avatarUploading, setAvatarUploading] = useState(false)

// Portfolio management state
  const [editingPortfolio, setEditingPortfolio] = useState(false)
  const [portfolioItems, setPortfolioItems] = useState<Array<{ id: string; url: string }>>([])
  const [deletingMedia, setDeletingMedia] = useState<string | null>(null)

const user = profileUser || currentUser
  // Use live measurements (from DB fetch) if available, otherwise fall back to user prop
  const measurements = liveMeasurements || user?.measurements
  const isBrandOrAgency = currentUser?.role === "brand" || currentUser?.role === "agency"

// Check block status + track profile view for non-own profiles
  useEffect(() => {
    if (!isOwn && user?.username) {
      api.checkBlocked(user.username).then((res) => {
        const data = res.data as { blocked?: boolean } | undefined
        if (data) setIsBlocked(!!data.blocked)
      })
      // Track profile view
      api.trackProfileView(user.id, "direct")
    }
  }, [isOwn, user?.username, user?.id])

const handleBlock = async () => {
    if (!user) return
    if (isBlocked) {
      await api.unblockUser(user.username)
      setIsBlocked(false)
    } else {
      await api.blockUser(user.username)
      setIsBlocked(true)
    }
    setShowMoreMenu(false)
  }

const handleReport = async () => {
    if (!user || !reportReason) return
    setReportSending(true)
    await api.reportUser(user.username, reportReason, reportDetails || undefined)
    setReportSending(false)
    setReportSent(true)
    setTimeout(() => {
      setShowReportSheet(false)
      setReportSent(false)
      setReportReason("")
      setReportDetails("")
    }, 1500)
  }

const handleSaveModel = async () => {
    if (!user) return
    if (isSavedModel) {
      await api.unsaveModel(user.id)
      setIsSavedModel(false)
    } else {
      await api.saveModel(user.id)
      setIsSavedModel(true)
    }
  }

const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setAvatarUploading(true)
    const url = await uploadAvatar(file)
    if (url) {
      setAvatarUrl(url)
      onProfileUpdated?.()
    }
    setAvatarUploading(false)
  }

const handleDeletePortfolioItem = async (mediaId: string) => {
    setDeletingMedia(mediaId)
    await api.deleteMedia(mediaId)
    setPortfolioItems((prev) => prev.filter((p) => p.id !== mediaId))
    setDeletingMedia(null)
  }

if (!user) return null

// Get user's castings for invite
  const myCastings = castings.filter((c) => c.creatorId === currentUser?.id && c.status === "active")

// Agency-specific data
  const isAgency = user.role === "agency"
  // For agencies, try to find roster from the user object or fallback to mockUsers by username/name match
  const agencyMockUser = isAgency
    ? mockUsers.find((mu) => mu.role === "agency" && (mu.username === user.username || mu.id === user.id || mu.name === user.name))
    : null
  const rosterIds = user.roster || agencyMockUser?.roster || []
  const rosterModels = isAgency && rosterIds.length > 0
    ? mockUsers.filter((u) => rosterIds.includes(u.id))
    : []
  // Match agency castings by user ID or by the mockUser ID
  const agencyCastings = isAgency
    ? castings.filter((c) => c.creatorId === user.id || (agencyMockUser && c.creatorId === agencyMockUser.id))
    : []
  const canApplyToAgency = !isOwn && isAgency && currentUser?.role === "model"

const tabs: { id: ProfileTab; label: string; icon: React.ReactNode }[] = [
    { id: "portfolio", label: "Portfolio", icon: <Grid3X3 className="w-4 h-4" /> },
    { id: "posts", label: "Posts", icon: <Grid3X3 className="w-4 h-4" /> },
    { id: "details", label: "Details", icon: <Briefcase className="w-4 h-4" /> },
    { id: "availability", label: "Availability", icon: <Calendar className="w-4 h-4" /> },
  ]

const portfolioFilters = ["all", "runway", "editorial", "campaign", "commercial"]

const getVerificationBadge = () => {
    if (!user.verified) {
      return (
        <Badge variant="outline" className="text-muted-foreground">
          Unverified
        </Badge>
      )
    }
    if (user.verificationLevel === "luxlane") {
      return (
        <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20">
          <BadgeCheck className="w-3 h-3 mr-1" />
          Luxlane Verified
        </Badge>
      )
    }
    return (
      <Badge variant="secondary">
        <BadgeCheck className="w-3 h-3 mr-1" />
        Agency Verified
      </Badge>
    )
  }

// Use DB-fetched portfolio images, fall back to user.portfolio for static data
  const filteredPortfolio = portfolioFilter === "all"
    ? dbPortfolio
    : dbPortfolio.filter((p) => p.meta?.category === portfolioFilter)
  const allImages = filteredPortfolio.length > 0 || dbPortfolio.length > 0
    ? filteredPortfolio.map((p) => p.url)
    : (user.portfolio || [])

const handlePrevImage = () => {
    setLightboxIndex((prev) => (prev > 0 ? prev - 1 : allImages.length - 1))
    setLightboxImage(allImages[lightboxIndex > 0 ? lightboxIndex - 1 : allImages.length - 1])
  }

const handleNextImage = () => {
    setLightboxIndex((prev) => (prev < allImages.length - 1 ? prev + 1 : 0))
    setLightboxImage(allImages[lightboxIndex < allImages.length - 1 ? lightboxIndex + 1 : 0])
  }

return (
    <div className="pb-20">
      {/* Profile Header */}
      <div className="px-4 py-6">
        <div className="flex items-start justify-between mb-4">
          <div className="relative group">
            <Avatar className="w-20 h-20 ring-2 ring-border">
              <AvatarImage src={avatarUrl || user.avatar || "/placeholder.svg"} alt={user.name} />
              <AvatarFallback className="text-2xl">{user.name[0]}</AvatarFallback>
            </Avatar>
            {isOwn && (
              <>
                <label
                  htmlFor="avatar-upload"
                  className="absolute inset-0 flex items-center justify-center bg-black/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
                >
                  {avatarUploading ? (
                    <span className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  ) : (
                    <Camera className="w-5 h-5 text-white" />
                  )}
                </label>
                <input
                  id="avatar-upload"
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={handleAvatarUpload}
                  disabled={avatarUploading}
                />
              </>
            )}
          </div>
          <div className="flex gap-2">
            {!isOwn && isBrandOrAgency && user.role === "model" && (
              <Button
                variant="outline"
                size="icon"
                className={`rounded-full bg-transparent ${isSavedModel ? "text-red-500 border-red-500/30" : ""}`}
                onClick={handleSaveModel}
              >
                <Heart className={`w-4 h-4 ${isSavedModel ? "fill-current" : ""}`} />
              </Button>
            )}
            <ShareProfile username={user.username} displayName={user.name} />
            {isOwn && (
              <Button variant="outline" size="icon" className="rounded-full bg-transparent" onClick={onSettingsClick}>
                <Settings className="w-4 h-4" />
              </Button>
            )}
            {!isOwn && (
              <div className="relative">
                <Button
                  variant="outline"
                  size="icon"
                  className="rounded-full bg-transparent"
                  onClick={() => setShowMoreMenu(!showMoreMenu)}
                >
                  <MoreHorizontal className="w-4 h-4" />
                </Button>
                {showMoreMenu && (
                  <div className="absolute right-0 top-10 z-50 bg-background border border-border rounded-lg shadow-lg py-1 min-w-[160px]">
                    <button
                      className="w-full px-4 py-2.5 text-sm text-left hover:bg-muted flex items-center gap-2"
                      onClick={() => { setShowReportSheet(true); setShowMoreMenu(false) }}
                    >
                      <ShieldAlert className="w-4 h-4" />
                      Report
                    </button>
                    <button
                      className="w-full px-4 py-2.5 text-sm text-left hover:bg-muted flex items-center gap-2 text-red-500"
                      onClick={handleBlock}
                    >
                      <Ban className="w-4 h-4" />
                      {isBlocked ? "Unblock" : "Block"}
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

{/* Name + Verification */}
        <div className="space-y-2">
          <div className="flex items-center gap-2 flex-wrap">
            <h1 className="text-xl font-semibold">{user.name}</h1>
            {getVerificationBadge()}
          </div>
          <p className="text-sm text-muted-foreground">@{user.username}</p>
          {user.location && (
            <p className="text-sm text-muted-foreground flex items-center gap-1">
              <MapPin className="w-3 h-3" />
              {user.location}
            </p>
          )}
          {user.socialLinks && (
            <div className="flex items-center gap-3 mt-2">
              {user.socialLinks.instagram && (
                <a href={`https://instagram.com/${user.socialLinks.instagram}`} target="_blank" rel="noopener" className="text-muted-foreground hover:text-foreground text-sm flex items-center gap-1">
                  <Instagram className="w-4 h-4" /> @{user.socialLinks.instagram}
                </a>
              )}
              {user.socialLinks.tiktok && (
                <a href={`https://tiktok.com/@${user.socialLinks.tiktok}`} target="_blank" rel="noopener" className="text-muted-foreground hover:text-foreground text-sm flex items-center gap-1">
                  <span className="w-4 h-4 font-bold text-xs">TT</span> @{user.socialLinks.tiktok}
                </a>
              )}
            </div>
          )}
        </div>

{/* Quick Stats Row - Model Specific */}
        {user.role === "model" && (
          <div className="flex gap-2 mt-4 overflow-x-auto pb-2 -mx-4 px-4">
            {measurements?.height && (
              <Card className="flex-shrink-0 px-3 py-2 bg-muted/50">
                <p className="text-xs text-muted-foreground">Height</p>
                <p className="font-semibold text-sm">{measurements?.height}</p>
              </Card>
            )}
            {measurements && (
              <Card className="flex-shrink-0 px-3 py-2 bg-muted/50">
                <p className="text-xs text-muted-foreground">Measurements</p>
                <p className="font-semibold text-sm">
                  {measurements?.bust}/{measurements?.waist}/{measurements?.hips}
                </p>
              </Card>
            )}
            {user.experience && user.experience.length > 0 && (
              <Card className="flex-shrink-0 px-3 py-2 bg-muted/50">
                <p className="text-xs text-muted-foreground">Experience</p>
                <p className="font-semibold text-sm">{user.experience[0]}</p>
              </Card>
            )}
            {user.score && (
              <Card className="flex-shrink-0 px-3 py-2 bg-muted/50">
                <p className="text-xs text-muted-foreground flex items-center gap-1">
                  <Star className="w-3 h-3" />
                  Score
                </p>
                <p className="font-semibold text-sm flex items-center gap-1">
                  {user.score}
                  <TrendingUp className="w-3 h-3 text-emerald-500" />
                </p>
              </Card>
            )}
          </div>
        )}

{/* Social Stats */}
        <div className="flex gap-6 mt-4">
          <div>
            <p className="font-semibold">{user.followers.toLocaleString()}</p>
            <p className="text-xs text-muted-foreground">Followers</p>
          </div>
          <div>
            <p className="font-semibold">{user.following.toLocaleString()}</p>
            <p className="text-xs text-muted-foreground">Following</p>
          </div>
          {isAgency && rosterModels.length > 0 && (
            <div>
              <p className="font-semibold">{rosterModels.length}</p>
              <p className="text-xs text-muted-foreground">Talent</p>
            </div>
          )}
          {isAgency && agencyCastings.length > 0 && (
            <div>
              <p className="font-semibold">{agencyCastings.length}</p>
              <p className="text-xs text-muted-foreground">Castings</p>
            </div>
          )}
        </div>

{/* Actions */}
        {!isOwn && (
          <div className="flex gap-2 mt-4">
            <Button
              className="flex-1"
              variant={user.isFollowing ? "outline" : "default"}
              onClick={onFollowToggle}
            >
              <UserPlus className="w-4 h-4 mr-2" />
              {user.isFollowing ? "Following" : "Follow"}
            </Button>
            <Button variant="outline" className="flex-1 bg-transparent" onClick={onMessageClick}>
              <MessageSquare className="w-4 h-4 mr-2" />
              Message
            </Button>
            {isBrandOrAgency && user.role === "model" && (
              <>
                <Button variant="outline" onClick={() => setShowInviteSheet(true)}>
                  Invite
                </Button>
                {currentUser?.role === "agency" && (
                  <Button
                    variant="outline"
                    className="bg-transparent"
                    onClick={async () => {
                      const res = await api.inviteModelToAgency(user.id)
                      if (res.error) alert(res.error)
                      else alert("Invitation sent!")
                    }}
                  >
                    <UserPlus className="w-4 h-4 mr-1" />
                    Roster
                  </Button>
                )}
              </>
            )}
          </div>
        )}
        {isOwn && (
          <Button variant="outline" className="w-full mt-4 bg-transparent" onClick={() => setShowEditDetailsSheet(true)}>
            <Edit className="w-4 h-4 mr-2" />
            Edit Profile
          </Button>
        )}
      </div>

{/* Agency: Apply Button */}
      {canApplyToAgency && (
        <div className="px-4 py-3">
          {hasAppliedToAgency ? (
            <div className="flex items-center justify-center gap-2 py-3 rounded-xl bg-emerald-500/10 text-emerald-400">
              <CheckCircle className="w-5 h-5" />
              <span className="font-medium">Application Sent</span>
            </div>
          ) : (
            <Button
              onClick={() => {
                setAgencyApplyStep(1)
                setAgencyApplyNote("")
                setAgencyApplyError(null)
                setShowAgencyApplySheet(true)
              }}
              className="w-full h-12 rounded-xl font-semibold text-base"
            >
              <Send className="w-4 h-4 mr-2" />
              Apply to {user.name}
            </Button>
          )}
        </div>
      )}

{/* Agency: Talent Roster */}
      {isAgency && rosterModels.length > 0 && (
        <div className="px-4 py-4 border-b border-border">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-2">
              <Users className="w-4 h-4" />
              Talent Roster
            </h3>
            <span className="text-sm text-muted-foreground">{rosterModels.length} models</span>
          </div>
          <div className="space-y-2">
            {rosterModels.map((model) => (
              <div
                key={model.id}
                className="flex items-center gap-3 p-3 rounded-xl bg-muted/50 hover:bg-muted transition-colors cursor-pointer"
                onClick={() => onViewProfile?.(model)}
              >
                <Avatar className="w-12 h-12 ring-1 ring-border">
                  <AvatarImage src={model.avatar || "/placeholder.svg"} alt={model.name} />
                  <AvatarFallback>{model.name[0]}</AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-1">
                    <span className="font-medium text-sm">{model.name}</span>
                    {model.verified && <BadgeCheck className="w-4 h-4 text-emerald-500" />}
                  </div>
                  <p className="text-xs text-muted-foreground">{model.location}</p>
                  {model.measurements?.height && (
                    <p className="text-xs text-muted-foreground">{model.measurements.height}</p>
                  )}
                </div>
                <ChevronRight className="w-4 h-4 text-muted-foreground" />
              </div>
            ))}
          </div>
        </div>
      )}

{/* Agency: Active Castings */}
      {isAgency && agencyCastings.length > 0 && (
        <div className="px-4 py-4 border-b border-border">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-2">
              <Calendar className="w-4 h-4" />
              Active Castings
            </h3>
            <span className="text-sm text-muted-foreground">{agencyCastings.length}</span>
          </div>
          <div className="space-y-2">
            {agencyCastings.map((casting) => (
              <div
                key={casting.id}
                className="flex items-center gap-3 p-3 rounded-xl bg-muted/50 hover:bg-muted transition-colors cursor-pointer"
                onClick={() => onViewCasting?.(casting)}
              >
                <div className="w-14 h-14 rounded-lg overflow-hidden bg-muted shrink-0">
                  <img
                    src={casting.images?.[0] || "/placeholder.svg"}
                    alt={casting.title}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="font-medium text-sm truncate">{casting.title}</span>
                    <Badge variant="secondary" className="text-[10px] shrink-0">
                      {casting.type}
                    </Badge>
                  </div>
                  <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <MapPin className="w-3 h-3" />
                      {casting.location}
                    </span>
                  </div>
                  <p className="text-[11px] text-muted-foreground mt-0.5">
                    {casting.applicationsCount} applicants
                    {casting.pay.amount > 0 && ` · ${casting.pay.currency} ${casting.pay.amount.toLocaleString()}`}
                  </p>
                </div>
                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
              </div>
            ))}
          </div>
        </div>
      )}

{/* Story Highlights */}
      <div className="px-4 pb-2">
        <StoryHighlights userId={user.id} isOwn={isOwn} />
      </div>

{/* Tabs Navigation */}
      {user.role === "model" && (
        <>
          <div className="flex justify-around border-b border-border sticky top-14 bg-background z-30 px-2">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-3 px-4 flex items-center justify-center gap-2 border-b-2 transition-colors ${
                  activeTab === tab.id
                    ? "border-foreground text-foreground"
                    : "border-transparent text-muted-foreground"
                }`}
              >
                {tab.icon}
                <span className="text-sm font-medium">{tab.label}</span>
              </button>
            ))}
          </div>

{/* Tab Content */}
          <AnimatePresence mode="wait">
            {activeTab === "portfolio" && (
              <motion.div key="portfolio" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                {/* Portfolio Filters */}
                <div className="px-4 py-3 flex gap-2 overflow-x-auto">
                  {portfolioFilters.map((filter) => (
                    <Button
                      key={filter}
                      variant={portfolioFilter === filter ? "default" : "outline"}
                      size="sm"
                      className="flex-shrink-0 capitalize"
                      onClick={() => setPortfolioFilter(filter)}
                    >
                      {filter}
                    </Button>
                  ))}
                </div>

{/* Portfolio Edit Toggle */}
                {isOwn && user.role === "model" && allImages.length > 0 && (
                  <div className="flex justify-end px-2 mb-2">
                    <Button
                      variant={editingPortfolio ? "default" : "ghost"}
                      size="sm"
                      className="text-xs"
                      onClick={async () => {
                        if (!editingPortfolio) {
                          // Fetch media assets with IDs for editing
                          const res = await api.getMedia(user.id, "PORTFOLIO")
                          const data = res.data as { assets?: Array<{ id: string; url: string; sortOrder?: number }> } | undefined
                          if (data?.assets) {
                            setPortfolioItems(data.assets.map((a) => ({ id: a.id, url: a.url })))
                          }
                        }
                        setEditingPortfolio(!editingPortfolio)
                      }}
                    >
                      {editingPortfolio ? "Done" : <><Edit className="w-3 h-3 mr-1" /> Manage</>}
                    </Button>
                  </div>
                )}

{/* Portfolio Grid */}
                <div className="relative">
                  {/* Floating add button */}
                  {isOwn && user.role === "model" && (
                    <button
                      onClick={() => setShowAddPortfolioSheet(true)}
                      className="absolute top-2 right-2 z-10 w-10 h-10 rounded-full bg-foreground text-background flex items-center justify-center shadow-lg hover:opacity-90 transition-opacity"
                    >
                      <Plus className="w-5 h-5" />
                    </button>
                  )}
                <div className="grid grid-cols-3 gap-0.5 p-0.5">
                  {editingPortfolio ? (
                    // Edit mode: show portfolio items with delete buttons
                    portfolioItems.map((item, i) => (
                      <motion.div
                        key={item.id}
                        initial={{ opacity: 0, scale: 0.9 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: i * 0.03 }}
                        className="aspect-[3/4] bg-muted relative group overflow-hidden"
                      >
                        <img
                          src={item.url || "/placeholder.svg"}
                          alt={`Portfolio ${i + 1}`}
                          className="w-full h-full object-cover opacity-75"
                        />
                        <button
                          className="absolute top-1 right-1 w-7 h-7 rounded-full bg-red-500 text-white flex items-center justify-center shadow-lg hover:bg-red-600"
                          onClick={() => handleDeletePortfolioItem(item.id)}
                          disabled={deletingMedia === item.id}
                        >
                          {deletingMedia === item.id ? (
                            <span className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" />
                          ) : (
                            <Trash2 className="w-3.5 h-3.5" />
                          )}
                        </button>
                        <div className="absolute bottom-1 left-1 w-6 h-6 rounded bg-black/50 text-white flex items-center justify-center text-xs font-bold">
                          {i + 1}
                        </div>
                      </motion.div>
                    ))
                  ) : (
                    // Normal view mode
                    allImages.map((img, i) => (
                      <motion.button
                        key={i}
                        initial={{ opacity: 0, scale: 0.9 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: i * 0.03 }}
                        className="aspect-[3/4] bg-muted relative group overflow-hidden"
                        onClick={() => {
                          setLightboxImage(img)
                          setLightboxIndex(i)
                        }}
                      >
                        <img
                          src={img || "/placeholder.svg"}
                          alt={`Portfolio ${i + 1}`}
                          className="w-full h-full object-cover transition-transform group-hover:scale-105"
                        />
                      </motion.button>
                    ))
                  )}
                  {allImages.length === 0 && !editingPortfolio && (
                    <div className="col-span-3 py-12 text-center text-muted-foreground">
                      {isOwn ? "Tap + to add your first photo" : "No portfolio images yet"}
                    </div>
                  )}
                </div>
                </div>
              </motion.div>
            )}

{activeTab === "posts" && (
              <motion.div key="posts" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="relative">
                {/* Floating add post button - same style as portfolio */}
                {isOwn && (
                  <button
                    onClick={() => setShowCreatePostSheet(true)}
                    className="absolute top-2 right-2 z-10 w-10 h-10 rounded-full bg-foreground text-background flex items-center justify-center shadow-lg hover:opacity-90 transition-opacity"
                  >
                    <Plus className="w-5 h-5" />
                  </button>
                )}
                {(dbPosts.length > 0 || (user.posts && user.posts.length > 0)) ? (
                  <div className="grid grid-cols-3 gap-0.5 p-0.5">
                    {(dbPosts.length > 0 ? dbPosts : user.posts || []).map((post) => (
                      <button
                        key={post.id}
                        className="aspect-square bg-muted overflow-hidden relative group"
                        onClick={() => {
                          setLightboxImage(post.imageUrl)
                          setLightboxIndex(0)
                        }}
                      >
                        <img
                          src={post.imageUrl || "/placeholder.svg"}
                          alt={post.caption ?? "Post"}
                          className="w-full h-full object-cover transition-transform group-hover:scale-105"
                        />
                        {/* Hover overlay with like/comment counts */}
                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-4 text-white text-sm font-medium">
                          <span className="flex items-center gap-1"><Heart className="w-4 h-4" /> {(post as any).likes ?? 0}</span>
                          <span className="flex items-center gap-1"><MessageCircle className="w-4 h-4" /> {(post as any).comments ?? 0}</span>
                        </div>
                      </button>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12 text-muted-foreground px-4">
                    <Grid3X3 className="w-10 h-10 mx-auto mb-3 opacity-40" />
                    <p>No posts yet</p>
                    <p className="text-xs mt-1">Share your first moment</p>
                  </div>
                )}
              </motion.div>
            )}

{activeTab === "details" && (
              <motion.div
                key="details"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="p-4 space-y-4"
              >
                {isOwn && user.role === "model" && (
                  <div className="flex justify-end">
                    <Button variant="outline" size="sm" onClick={() => setShowEditDetailsSheet(true)}>
                      <Edit className="w-4 h-4 mr-2" />
                      Edit details
                    </Button>
                  </div>
                )}

{/* Human Silhouette with Measurements */}
                <div className="relative flex justify-center py-4">
                  {/* SVG Silhouette */}
                  <div className="relative" style={{ width: 160, height: 340 }}>
                    <svg viewBox="0 0 160 340" className="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">
                      {/* Head */}
                      <circle cx="80" cy="30" r="22" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Neck */}
                      <line x1="80" y1="52" x2="80" y2="65" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Shoulders */}
                      <line x1="40" y1="75" x2="120" y2="75" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Torso */}
                      <path d="M 40 75 L 45 140 L 55 160 L 105 160 L 115 140 L 120 75" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Waist line */}
                      <line x1="50" y1="130" x2="110" y2="130" stroke="currentColor" strokeWidth="0.5" strokeDasharray="3 3" className="text-muted-foreground/20" />
                      {/* Hips */}
                      <path d="M 55 160 L 50 170 L 120 170 L 105 160" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Left leg */}
                      <path d="M 55 170 L 50 260 L 48 310" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Right leg */}
                      <path d="M 105 170 L 110 260 L 112 310" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Left arm */}
                      <path d="M 40 75 L 25 130 L 20 160" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Right arm */}
                      <path d="M 120 75 L 135 130 L 140 160" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      {/* Feet */}
                      <line x1="42" y1="310" x2="55" y2="310" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                      <line x1="106" y1="310" x2="118" y2="310" stroke="currentColor" strokeWidth="1.5" className="text-muted-foreground/40" />
                    </svg>

{/* Measurement labels positioned around the figure */}
                    {/* Hair — top left */}
                    <div className="absolute -left-20 top-2 text-right w-20">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Hair</p>
                      <p className="text-xs font-semibold">{measurements?.hairColor || "—"}</p>
                    </div>

{/* Eyes — top right */}
                    <div className="absolute -right-20 top-2 text-left w-20">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Eyes</p>
                      <p className="text-xs font-semibold">{measurements?.eyeColor || "—"}</p>
                    </div>

{/* Height — left, upper */}
                    <div className="absolute -left-20 top-[75px] text-right w-20">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Height</p>
                      <p className="text-sm font-bold text-foreground">{measurements?.height || "—"}</p>
                    </div>

{/* Bust — right of chest */}
                    <div className="absolute -right-20 top-[90px] text-left w-20">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Bust</p>
                      <p className="text-xs font-semibold">{measurements?.bust || "—"}</p>
                    </div>

{/* Waist — left of waist */}
                    <div className="absolute -left-20 top-[130px] text-right w-20">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Waist</p>
                      <p className="text-xs font-semibold">{measurements?.waist || "—"}</p>
                    </div>

{/* Hips — right of hips */}
                    <div className="absolute -right-20 top-[165px] text-left w-20">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Hips</p>
                      <p className="text-xs font-semibold">{measurements?.hips || "—"}</p>
                    </div>

{/* Dress Size — left, lower */}
                    <div className="absolute -left-20 top-[200px] text-right w-20">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Dress</p>
                      <p className="text-xs font-semibold">{measurements?.dressSize || "—"}</p>
                    </div>

{/* Inseam/Leg — right, lower */}
                    <div className="absolute -right-20 top-[240px] text-left w-20">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Skin</p>
                      <p className="text-xs font-semibold">{user.skinTone || "—"}</p>
                    </div>

{/* Shoe Size — bottom */}
                    <div className="absolute left-1/2 -translate-x-1/2 bottom-0 text-center">
                      <p className="text-[9px] text-muted-foreground uppercase tracking-wider">Shoes</p>
                      <p className="text-xs font-semibold">{measurements?.shoeSize || "—"}</p>
                    </div>
                  </div>
                </div>

{/* Languages */}
                {user.languages && user.languages.length > 0 && (
                  <Card className="p-4">
                    <h3 className="font-semibold mb-3 flex items-center gap-2">
                      <Globe className="w-4 h-4" />
                      Languages
                    </h3>
                    <div className="flex flex-wrap gap-2">
                      {user.languages.map((lang, i) => (
                        <Badge key={i} variant="secondary">
                          {lang}
                        </Badge>
                      ))}
                    </div>
                  </Card>
                )}

{/* Experience Tags */}
                {user.experience && user.experience.length > 0 && (
                  <Card className="p-4">
                    <h3 className="font-semibold mb-3">Experience</h3>
                    <div className="flex flex-wrap gap-2">
                      {user.experience.map((exp, i) => (
                        <Badge key={i} variant="outline">
                          {exp}
                        </Badge>
                      ))}
                    </div>
                  </Card>
                )}

{/* Agency — show from DB agencyInfo or static user data */}
                {(agencyInfo || (user.agencyId && user.agencyName)) && (
                  <Card className="p-4">
                    <h3 className="font-semibold mb-3">Represented By</h3>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <Avatar className="w-10 h-10">
                          <AvatarImage src={agencyInfo?.avatar || user.agencyAvatar || "/placeholder.svg"} />
                          <AvatarFallback>{(agencyInfo?.name || user.agencyName)?.[0] || "A"}</AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="font-medium">{agencyInfo?.name || user.agencyName}</p>
                          <p className="text-sm text-muted-foreground">{agencyInfo?.location || user.agencyLocation || "Agency"}</p>
                        </div>
                      </div>
                      {/* Leave agency button for own profile */}
                      {isOwn && (
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-xs text-red-400"
                          onClick={async () => {
                            if (!confirm("Leave this agency? You can reapply later.")) return
                            // Call leave agency API (model removes themselves)
                            const res = await api.updateModelProfile({ agencyId: null })
                            if (!res.error) {
                              setAgencyInfo(null)
                              fetchProfileData()
                            }
                          }}
                        >
                          Leave
                        </Button>
                      )}
                    </div>
                  </Card>
                )}
              </motion.div>
            )}

{activeTab === "availability" && (
              <motion.div
                key="availability"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="p-4 space-y-4"
              >
                {/* Availability Status */}
                <Card className="p-4">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-semibold">Current Status</h3>
                    <Badge
                      className={
                        user.availabilityStatus === "available"
                          ? "bg-emerald-500/10 text-emerald-600"
                          : user.availabilityStatus === "hold"
                            ? "bg-amber-500/10 text-amber-600"
                            : user.availabilityStatus === "booked"
                              ? "bg-red-500/10 text-red-600"
                              : "bg-muted text-muted-foreground"
                      }
                    >
                      {user.availabilityStatus === "available"
                        ? "Available"
                        : user.availabilityStatus === "hold"
                          ? "On Hold"
                          : user.availabilityStatus === "booked"
                            ? "Booked"
                            : "—"}
                    </Badge>
                  </div>
                  {isOwn && user.role === "model" && (
                    <div className="flex gap-2">
                      <Button
                        variant={user.availabilityStatus === "available" ? "default" : "outline"}
                        size="sm"
                        className="flex-1"
                        onClick={async () => {
                          const res = await api.updateModelProfile({ availability: "AVAILABLE" })
                          if (!res.error) onProfileUpdated?.()
                        }}
                      >
                        Available
                      </Button>
                      <Button
                        variant={user.availabilityStatus === "hold" ? "default" : "outline"}
                        size="sm"
                        className="flex-1"
                        onClick={async () => {
                          const res = await api.updateModelProfile({ availability: "HOLD" })
                          if (!res.error) onProfileUpdated?.()
                        }}
                      >
                        On Hold
                      </Button>
                      <Button
                        variant={user.availabilityStatus === "booked" ? "default" : "outline"}
                        size="sm"
                        className="flex-1"
                        onClick={async () => {
                          const res = await api.updateModelProfile({ availability: "BOOKED" })
                          if (!res.error) onProfileUpdated?.()
                        }}
                      >
                        Booked
                      </Button>
                    </div>
                  )}
                </Card>

{/* Full Calendar */}
                <AvailabilityCalendar userId={user.id} isOwn={isOwn} />

{/* Job History — only for own profile */}
                {isOwn && user.role === "model" && <JobHistory />}
              </motion.div>
            )}

{/* Analytics tab — own profile only */}
          </AnimatePresence>
        </>
      )}

{/* Lightbox */}
      <AnimatePresence>
        {lightboxImage && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
            onClick={() => setLightboxImage(null)}
          >
            <Button
              variant="ghost"
              size="icon"
              className="absolute top-4 right-4 text-white hover:bg-white/10"
              onClick={() => setLightboxImage(null)}
            >
              <X className="w-6 h-6" />
            </Button>

<Button
              variant="ghost"
              size="icon"
              className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10"
              onClick={(e) => {
                e.stopPropagation()
                handlePrevImage()
              }}
            >
              <ChevronLeft className="w-8 h-8" />
            </Button>

<motion.img
              key={lightboxImage}
              initial={{ scale: 0.9, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.9, opacity: 0 }}
              src={lightboxImage}
              alt="Portfolio"
              className="max-h-[90vh] max-w-[90vw] object-contain"
              onClick={(e) => e.stopPropagation()}
            />

<Button
              variant="ghost"
              size="icon"
              className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10"
              onClick={(e) => {
                e.stopPropagation()
                handleNextImage()
              }}
            >
              <ChevronRight className="w-8 h-8" />
            </Button>

<div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/70 text-sm">
              {lightboxIndex + 1} / {allImages.length}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

{/* Invite to Casting Sheet */}
      <Sheet open={showInviteSheet} onOpenChange={setShowInviteSheet}>
        <SheetContent side="bottom" className="h-[70vh]">
          <SheetHeader>
            <SheetTitle>Invite to Casting</SheetTitle>
          </SheetHeader>
          <div className="mt-4 space-y-3">
            {myCastings.length > 0 ? (
              myCastings.map((casting) => (
                <Card
                  key={casting.id}
                  className="p-4 cursor-pointer hover:bg-muted/50 transition-colors"
                  onClick={async () => {
                    const res = await api.inviteModelToCasting(casting.id, user.id)
                    if (res.error) {
                      alert(res.error)
                    } else {
                      setShowInviteSheet(false)
                    }
                  }}
                >
                  <h4 className="font-medium">{casting.title}</h4>
                  <p className="text-sm text-muted-foreground capitalize">{casting.type}</p>
                  <p className="text-xs text-muted-foreground">{casting.location}</p>
                </Card>
              ))
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                <p>No active castings</p>
                <p className="text-sm">Create a casting first to invite models</p>
              </div>
            )}
          </div>
        </SheetContent>
      </Sheet>

{/* Add Portfolio Photo Sheet */}
      <Sheet open={showAddPortfolioSheet} onOpenChange={setShowAddPortfolioSheet}>
        <SheetContent side="bottom" className="h-auto max-h-[70vh] rounded-t-2xl">
          <SheetHeader>
            <SheetTitle>Add portfolio photo</SheetTitle>
          </SheetHeader>
          <div className="mt-4 space-y-4">
            {addPortfolioError && (
              <p className="text-sm text-destructive bg-destructive/10 p-2 rounded">{addPortfolioError}</p>
            )}

{/* Category selector */}
            <div>
              <Label className="text-sm font-medium mb-2 block">Category</Label>
              <div className="flex gap-2 flex-wrap">
                {["runway", "editorial", "campaign", "commercial"].map((cat) => (
                  <button
                    key={cat}
                    type="button"
                    onClick={() => setPortfolioCategory(cat)}
                    className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors capitalize ${
                      portfolioCategory === cat
                        ? "bg-foreground text-background"
                        : "bg-muted text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    {cat}
                  </button>
                ))}
              </div>
            </div>

{/* Upload button */}
            <div>
              <label className="flex items-center justify-center w-full h-32 border-2 border-dashed border-muted-foreground/30 rounded-xl cursor-pointer hover:border-muted-foreground/50 transition-colors">
                <div className="text-center">
                  {addPortfolioSaving ? (
                    <>
                      <div className="w-8 h-8 mx-auto border-2 border-muted-foreground border-t-foreground rounded-full animate-spin" />
                      <p className="text-xs text-muted-foreground mt-2">Uploading...</p>
                    </>
                  ) : (
                    <>
                      <Camera className="w-8 h-8 mx-auto text-muted-foreground" />
                      <p className="text-sm text-muted-foreground mt-2">Tap to upload photo</p>
                      <p className="text-[10px] text-muted-foreground mt-0.5">JPG, PNG up to 10MB</p>
                    </>
                  )}
                </div>
                <input
                  type="file"
                  accept="image/*"
                  className="hidden"
                  disabled={addPortfolioSaving}
                  onChange={async (e) => {
                    const file = e.target.files?.[0]
                    if (!file) return
                    setAddPortfolioSaving(true)
                    setAddPortfolioError(null)
                    const formData = new FormData()
                    formData.append("file", file)
                    formData.append("type", "portfolio")
                    try {
                      const uploadRes = await fetch("/api/media/upload", { method: "POST", credentials: "include", body: formData })
                      if (uploadRes.ok) {
                        const data = await uploadRes.json()
                        if (data.url) {
                          await api.confirmMedia({ url: data.url, type: "PORTFOLIO", meta: { category: portfolioCategory } })
                          setShowAddPortfolioSheet(false)
                          setPortfolioCategory("all")
                          fetchProfileData()
                          onProfileUpdated?.()
                        }
                      } else {
                        setAddPortfolioError("Upload failed. Try again.")
                      }
                    } catch {
                      setAddPortfolioError("Something went wrong.")
                    }
                    setAddPortfolioSaving(false)
                  }}
                />
              </label>
            </div>

<Button variant="outline" className="w-full" onClick={() => setShowAddPortfolioSheet(false)}>
              Cancel
            </Button>
          </div>
        </SheetContent>
      </Sheet>

{/* Create Post Sheet */}
      <Sheet open={showCreatePostSheet} onOpenChange={setShowCreatePostSheet}>
        <SheetContent side="bottom" className="h-[60vh] rounded-t-2xl">
          <SheetHeader>
            <SheetTitle>Create Post</SheetTitle>
          </SheetHeader>
          <div className="mt-4 space-y-4">
            <label className="flex items-center justify-center w-full h-40 border-2 border-dashed border-muted-foreground/30 rounded-xl cursor-pointer hover:border-muted-foreground/50 transition-colors overflow-hidden">
              {newPostImage ? (
                <img src={newPostImage} alt="Preview" className="w-full h-full object-cover" />
              ) : (
                <div className="text-center">
                  <Camera className="w-10 h-10 mx-auto text-muted-foreground" />
                  <p className="text-sm text-muted-foreground mt-2">Tap to upload photo</p>
                </div>
              )}
              <input
                type="file"
                accept="image/*"
                className="hidden"
                onChange={async (e) => {
                  const file = e.target.files?.[0]
                  if (!file) return
                  const formData = new FormData()
                  formData.append("file", file)
                  formData.append("type", "post")
                  const res = await fetch("/api/media/upload", { method: "POST", credentials: "include", body: formData })
                  if (res.ok) {
                    const data = await res.json()
                    setNewPostImage(data.url || "")
                  }
                }}
              />
            </label>
            <Input
              placeholder="Write a caption..."
              value={newPostCaption}
              onChange={(e) => setNewPostCaption(e.target.value)}
              maxLength={500}
            />
            <Button
              className="w-full h-12"
              disabled={!newPostImage.trim() || postCreating}
              onClick={async () => {
                setPostCreating(true)
                const res = await api.createPost({ imageUrl: newPostImage.trim(), caption: newPostCaption.trim() || undefined })
                setPostCreating(false)
                if (!res.error) {
                  setShowCreatePostSheet(false)
                  setNewPostImage("")
                  setNewPostCaption("")
                  fetchProfileData()
                }
              }}
            >
              {postCreating ? "Posting..." : "Post"}
            </Button>
          </div>
        </SheetContent>
      </Sheet>

{/* Report User Sheet */}
      <Sheet open={showReportSheet} onOpenChange={setShowReportSheet}>
        <SheetContent side="bottom" className="h-auto max-h-[70vh] rounded-t-2xl">
          <SheetHeader>
            <SheetTitle>Report {user.name}</SheetTitle>
          </SheetHeader>
          {reportSent ? (
            <div className="flex flex-col items-center py-8 gap-3">
              <CheckCircle className="w-12 h-12 text-emerald-500" />
              <p className="font-medium">Report submitted</p>
              <p className="text-sm text-muted-foreground">We'll review this report shortly.</p>
            </div>
          ) : (
            <div className="mt-4 space-y-4">
              <div className="space-y-2">
                <Label>Reason</Label>
                <div className="flex flex-wrap gap-2">
                  {["spam", "harassment", "inappropriate", "fake", "other"].map((r) => (
                    <Button
                      key={r}
                      type="button"
                      variant={reportReason === r ? "default" : "outline"}
                      size="sm"
                      onClick={() => setReportReason(r)}
                      className="capitalize"
                    >
                      {r}
                    </Button>
                  ))}
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="reportDetails">Details (optional)</Label>
                <Input
                  id="reportDetails"
                  placeholder="Tell us more about the issue..."
                  value={reportDetails}
                  onChange={(e) => setReportDetails(e.target.value)}
                />
              </div>
              <div className="flex gap-2">
                <Button onClick={handleReport} disabled={!reportReason || reportSending}>
                  {reportSending ? "Sending..." : "Submit report"}
                </Button>
                <Button variant="outline" onClick={() => setShowReportSheet(false)}>
                  Cancel
                </Button>
              </div>
            </div>
          )}
        </SheetContent>
      </Sheet>

{/* Edit Details Sheet */}
      <EditDetailsSheet
        user={user}
        open={showEditDetailsSheet}
        onOpenChange={setShowEditDetailsSheet}
        saving={detailsSaving}
        setSaving={setDetailsSaving}
        error={detailsError}
        setError={setDetailsError}
        onSuccess={() => {
          setShowEditDetailsSheet(false)
          fetchProfileData() // This refreshes measurements, portfolio, and posts
          onProfileUpdated?.()
        }}
      />

{/* Agency Application Sheet */}
      <Sheet open={showAgencyApplySheet} onOpenChange={setShowAgencyApplySheet}>
        <SheetContent side="bottom" className="h-[85vh] rounded-t-2xl overflow-y-auto">
          <SheetHeader>
            <SheetTitle>
              {agencyApplyStep === 1 && "Review Your Profile"}
              {agencyApplyStep === 2 && "Cover Letter"}
              {agencyApplyStep === 3 && "Submit Application"}
            </SheetTitle>
          </SheetHeader>

{/* Step indicators */}
          <div className="flex gap-1 mt-4 mb-6">
            {[1, 2, 3].map((s) => (
              <div
                key={s}
                className={`flex-1 h-1 rounded-full transition-colors ${s <= agencyApplyStep ? "bg-foreground" : "bg-muted"}`}
              />
            ))}
          </div>

<div className="space-y-6">
            {/* Step 1: Profile Review */}
            {agencyApplyStep === 1 && (
              <>
                <p className="text-sm text-muted-foreground">
                  Your profile will be sent to {user.name}. Make sure it's up to date.
                </p>
                <Card className="p-4 space-y-3">
                  <div className="flex items-center gap-3">
                    <Avatar className="w-14 h-14">
                      <AvatarImage src={currentUser?.avatar || "/placeholder.svg"} />
                      <AvatarFallback>{currentUser?.name?.[0]}</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-semibold">{currentUser?.name}</p>
                      <p className="text-sm text-muted-foreground">@{currentUser?.username}</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3 pt-2 border-t border-border">
                    <div>
                      <p className="text-[10px] uppercase text-muted-foreground">Location</p>
                      <p className="text-sm font-medium">{currentUser?.location || "Not set"}</p>
                    </div>
                    <div>
                      <p className="text-[10px] uppercase text-muted-foreground">Height</p>
                      <p className="text-sm font-medium">{currentUser?.measurements?.height || "Not set"}</p>
                    </div>
                  </div>
                </Card>
                <Button className="w-full" onClick={() => setAgencyApplyStep(2)}>Continue</Button>
              </>
            )}

{/* Step 2: Cover Note */}
            {agencyApplyStep === 2 && (
              <>
                <p className="text-sm text-muted-foreground">
                  Tell {user.name} why you'd be a great fit for their roster.
                </p>
                <textarea
                  value={agencyApplyNote}
                  onChange={(e) => setAgencyApplyNote(e.target.value)}
                  placeholder="I'm passionate about high fashion and believe your agency aligns perfectly with my career goals..."
                  className="w-full min-h-[120px] rounded-xl border border-border bg-transparent p-3 text-sm"
                />
                <div className="flex gap-2">
                  <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setAgencyApplyStep(1)}>Back</Button>
                  <Button className="flex-1" onClick={() => setAgencyApplyStep(3)}>Continue</Button>
                </div>
              </>
            )}

{/* Step 3: Summary + Submit */}
            {agencyApplyStep === 3 && (
              <>
                <Card className="p-4">
                  <h4 className="font-medium text-sm mb-2">Application Summary</h4>
                  <div className="space-y-1 text-sm text-muted-foreground">
                    <p>📋 Profile info included</p>
                    <p>🖼 {currentUser?.portfolio?.length || 0} portfolio photos</p>
                    {agencyApplyNote.trim() && <p>💬 Cover letter included</p>}
                  </div>
                </Card>

<p className="text-sm text-muted-foreground">
                  Applying to <span className="font-medium text-foreground">{user.name}</span>
                </p>

{agencyApplyError && (
                  <p className="text-sm text-red-500 text-center">{agencyApplyError}</p>
                )}

<div className="flex gap-2">
                  <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setAgencyApplyStep(2)}>Back</Button>
                  <Button
                    className="flex-1"
                    disabled={agencyApplyLoading}
                    onClick={async () => {
                      setAgencyApplyLoading(true)
                      setAgencyApplyError(null)
                      const res = await api.applyToAgency(user.id, agencyApplyNote.trim() || undefined)
                      setAgencyApplyLoading(false)
                      if (res.error) {
                        setAgencyApplyError(res.error)
                        return
                      }
                      setShowAgencyApplySheet(false)
                      setHasAppliedToAgency(true)
                    }}
                  >
                    {agencyApplyLoading ? "Submitting…" : "Submit Application"}
                  </Button>
                </div>
              </>
            )}
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}

function EditDetailsSheet({
  user,
  open,
  onOpenChange,
  saving,
  setSaving,
  error,
  setError,
  onSuccess,
}: {
  user: User
  open: boolean
  onOpenChange: (open: boolean) => void
  saving: boolean
  setSaving: (v: boolean) => void
  error: string | null
  setError: (v: string | null) => void
  onSuccess: () => void
}) {
  const parseNum = (s: string | undefined): number | undefined => {
    if (s == null || s === "") return undefined
    const n = parseInt(s, 10)
    return Number.isNaN(n) ? undefined : n
  }
  const [heightCm, setHeightCm] = useState("")
  const [bustCm, setBustCm] = useState("")
  const [waistCm, setWaistCm] = useState("")
  const [hipsCm, setHipsCm] = useState("")
  const [shoeSize, setShoeSize] = useState("")
  const [dressSize, setDressSize] = useState("")
  const [hair, setHair] = useState("")
  const [eyes, setEyes] = useState("")
  const [skinTone, setSkinTone] = useState("")
  const [languagesStr, setLanguagesStr] = useState("")
  const [experienceStr, setExperienceStr] = useState("")

useEffect(() => {
    if (!open) return
    setHeightCm(measurements?.heightCm != null ? String(measurements?.heightCm) : "")
    setBustCm(
      measurements?.bust != null && measurements?.bust !== ""
        ? String(measurements?.bust.replace(/\s*cm\s*/i, ""))
        : "",
    )
    setWaistCm(
      measurements?.waist != null && measurements?.waist !== ""
        ? String(measurements?.waist.replace(/\s*cm\s*/i, ""))
        : "",
    )
    setHipsCm(
      measurements?.hips != null && measurements?.hips !== ""
        ? String(measurements?.hips.replace(/\s*cm\s*/i, ""))
        : "",
    )
    setShoeSize(measurements?.shoeSize ?? "")
    setDressSize(measurements?.dressSize ?? "")
    setHair(measurements?.hairColor ?? "")
    setEyes(measurements?.eyeColor ?? "")
    setSkinTone(user.skinTone ?? "")
    setLanguagesStr(Array.isArray(user.languages) ? user.languages.join(", ") : "")
    setExperienceStr(Array.isArray(user.experience) ? user.experience.join(", ") : "")
  }, [open, user])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    setSaving(true)
    const h = parseNum(heightCm)
    const b = parseNum(bustCm)
    const w = parseNum(waistCm)
    const hi = parseNum(hipsCm)
    const langs = languagesStr
      .split(/[,;]/)
      .map((s) => s.trim())
      .filter(Boolean)
    const exp = experienceStr
      .split(/[,;]/)
      .map((s) => s.trim())
      .filter(Boolean)
    const res = await api.updateModelProfile({
      ...(h != null && { heightCm: h }),
      ...(b != null && { bustCm: b }),
      ...(w != null && { waistCm: w }),
      ...(hi != null && { hipsCm: hi }),
      ...(shoeSize.trim() && { shoeSize: shoeSize.trim() }),
      ...(hair.trim() && { hair: hair.trim() }),
      ...(eyes.trim() && { eyes: eyes.trim() }),
      ...(langs.length > 0 && { languages: langs }),
      details: {
        ...(dressSize.trim() && { dressSize: dressSize.trim() }),
        ...(skinTone.trim() && { skinTone: skinTone.trim() }),
        ...(exp.length > 0 && { experience: exp }),
      },
    })
    setSaving(false)
    if (res.error) {
      setError(
        res.error.toLowerCase().includes("not authenticated") || res.error.toLowerCase().includes("authenticated")
          ? "Your session may have expired. Please log in again."
          : res.error,
      )
      return
    }
    onSuccess()
  }

return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="bottom" className="h-[85vh] overflow-y-auto">
        <SheetHeader>
          <SheetTitle>Edit details</SheetTitle>
        </SheetHeader>
        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
          {error && (
            <p className="text-sm text-destructive bg-destructive/10 p-2 rounded">{error}</p>
          )}
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="heightCm">Height (cm)</Label>
              <Input
                id="heightCm"
                type="number"
                min={120}
                max={220}
                value={heightCm}
                onChange={(e) => setHeightCm(e.target.value)}
                placeholder="175"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="bustCm">Bust (cm)</Label>
              <Input
                id="bustCm"
                type="number"
                min={50}
                max={200}
                value={bustCm}
                onChange={(e) => setBustCm(e.target.value)}
                placeholder="86"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="waistCm">Waist (cm)</Label>
              <Input
                id="waistCm"
                type="number"
                min={40}
                max={150}
                value={waistCm}
                onChange={(e) => setWaistCm(e.target.value)}
                placeholder="64"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="hipsCm">Hips (cm)</Label>
              <Input
                id="hipsCm"
                type="number"
                min={50}
                max={200}
                value={hipsCm}
                onChange={(e) => setHipsCm(e.target.value)}
                placeholder="90"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="shoeSize">Shoe size</Label>
              <Input
                id="shoeSize"
                value={shoeSize}
                onChange={(e) => setShoeSize(e.target.value)}
                placeholder="EU 39"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="dressSize">Dress size</Label>
              <Input
                id="dressSize"
                value={dressSize}
                onChange={(e) => setDressSize(e.target.value)}
                placeholder="S / 36"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="hair">Hair</Label>
              <Input
                id="hair"
                value={hair}
                onChange={(e) => setHair(e.target.value)}
                placeholder="Brown"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="eyes">Eyes</Label>
              <Input
                id="eyes"
                value={eyes}
                onChange={(e) => setEyes(e.target.value)}
                placeholder="Brown"
              />
            </div>
            <div className="space-y-2 col-span-2">
              <Label htmlFor="skinTone">Skin tone</Label>
              <Input
                id="skinTone"
                value={skinTone}
                onChange={(e) => setSkinTone(e.target.value)}
                placeholder="Light / Medium"
              />
            </div>
            <div className="space-y-2 col-span-2">
              <Label htmlFor="languages">Languages (comma-separated)</Label>
              <Input
                id="languages"
                value={languagesStr}
                onChange={(e) => setLanguagesStr(e.target.value)}
                placeholder="English, French, Italian"
              />
            </div>
            <div className="space-y-2 col-span-2">
              <Label htmlFor="experience">Experience (comma-separated)</Label>
              <Input
                id="experience"
                value={experienceStr}
                onChange={(e) => setExperienceStr(e.target.value)}
                placeholder="Runway, Editorial, Campaign"
              />
            </div>
          </div>
          <div className="flex gap-2 pt-4">
            <Button type="submit" disabled={saving}>
              {saving ? "Saving…" : "Save"}
            </Button>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
          </div>
        </form>
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="components/model/share-profile.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { Share2, Copy, Check, Link2 } from "lucide-react"

interface ShareProfileProps {
  username: string
  displayName: string
}

export function ShareProfile({ username, displayName }: ShareProfileProps) {
  const [open, setOpen] = useState(false)
  const [copied, setCopied] = useState(false)

const profileUrl = typeof window !== "undefined"
    ? `${window.location.origin}/u/${username}`
    : `/u/${username}`

const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(profileUrl)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch {
      // Fallback for older browsers
      const input = document.createElement("input")
      input.value = profileUrl
      document.body.appendChild(input)
      input.select()
      document.execCommand("copy")
      document.body.removeChild(input)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

const handleNativeShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: `${displayName} on LuxLane`,
          text: `Check out ${displayName}'s profile on LuxLane`,
          url: profileUrl,
        })
      } catch {
        // User cancelled share
      }
    } else {
      setOpen(true)
    }
  }

return (
    <>
      <Button
        variant="outline"
        size="sm"
        className="h-8 text-xs gap-1"
        onClick={handleNativeShare}
      >
        <Share2 className="w-3.5 h-3.5" />
        Share
      </Button>

<Sheet open={open} onOpenChange={setOpen}>
        <SheetContent side="bottom" className="rounded-t-2xl">
          <SheetHeader>
            <SheetTitle>Share Profile</SheetTitle>
          </SheetHeader>
          <div className="py-4 space-y-4">
            <div className="flex items-center gap-2 bg-muted rounded-lg p-3">
              <Link2 className="w-4 h-4 text-muted-foreground shrink-0" />
              <span className="text-sm truncate flex-1">{profileUrl}</span>
              <Button
                variant="ghost"
                size="sm"
                className="h-8 shrink-0"
                onClick={handleCopy}
              >
                {copied ? (
                  <Check className="w-4 h-4 text-emerald-500" />
                ) : (
                  <Copy className="w-4 h-4" />
                )}
              </Button>
            </div>
            <Button className="w-full" onClick={handleCopy}>
              {copied ? "Copied!" : "Copy Profile Link"}
            </Button>
          </div>
        </SheetContent>
      </Sheet>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/models/models-browse.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { api } from "@/lib/api-client"
import type { User } from "@/lib/types"
import {
  Search,
  SlidersHorizontal,
  BadgeCheck,
  MapPin,
  Shield,
  Scan,
  GitCompare,
  X,
  Check,
  TrendingUp,
} from "lucide-react"

interface ModelsBrowseProps {
  onViewProfile: (user: User) => void
  onInviteToCasting?: (user: User) => void
  onMessage?: (user: User) => void
  onCompare?: (models: [User, User]) => void
}

export function ModelsBrowse({ onViewProfile, onInviteToCasting, onMessage, onCompare }: ModelsBrowseProps) {
  const [search, setSearch] = useState("")
  const [showFilters, setShowFilters] = useState(false)
  const [filters, setFilters] = useState({
    location: "",
    minHeight: "",
    maxHeight: "",
    hairColor: "",
    verified: false,
    hasDigitalTwin: false,
    verificationLevel: "any" as "any" | "agency_verified" | "luxlane_verified",
  })
  const [compareMode, setCompareMode] = useState(false)
  const [selectedForCompare, setSelectedForCompare] = useState<User[]>([])
  const [models, setModels] = useState<User[]>([])
  const [savedModels, setSavedModels] = useState<User[]>([])
  const [viewMode, setViewMode] = useState<"all" | "saved">("all")
  const [loading, setLoading] = useState(true)

const fetchSavedModels = useCallback(async () => {
    const res = await api.getSavedModels()
    const data = res.data as { savedModels?: any[] } | undefined
    if (data?.savedModels) {
      setSavedModels(data.savedModels.map((s: any) => ({
        id: s.model?.id || s.modelId,
        name: s.model?.displayName || s.model?.username || "Model",
        username: s.model?.username || "",
        email: "",
        role: "model" as const,
        avatar: s.model?.avatarUrl || "/placeholder.svg",
        verified: false,
        verificationLevel: "unverified" as const,
        bio: s.model?.bio || "",
        location: s.model?.location || "",
        followers: 0, following: 0,
        createdAt: new Date(),
      })))
    }
  }, [])

const fetchModels = useCallback(async () => {
    setLoading(true)
    const res = await api.getModels({ unsigned: true, limit: 50 })
    const data = res.data as { models?: any[] } | undefined
    if (data?.models) {
      setModels(data.models.map((m: any) => ({
        id: m.id,
        name: m.displayName || m.username,
        username: m.username,
        email: "",
        role: "model" as const,
        avatar: m.avatarUrl || "/placeholder.svg",
        verified: m.verified || false,
        verificationLevel: m.verificationStatus?.toLowerCase()?.includes("luxlane") ? "luxlane_verified" as const : m.verificationStatus?.toLowerCase()?.includes("agency") ? "agency_verified" as const : "unverified" as const,
        bio: m.bio || "",
        location: m.location || "",
        followers: 0,
        following: 0,
        createdAt: new Date(m.createdAt),
        measurements: m.height ? { height: m.height, bust: m.bust, waist: m.waist, hips: m.hips, hairColor: m.hairColor, eyeColor: m.eyeColor, heightCm: parseInt(m.height) || 0 } : undefined,
      })))
    }
    setLoading(false)
  }, [])

useEffect(() => { fetchModels(); fetchSavedModels() }, [fetchModels, fetchSavedModels])

const filteredModels = models.filter((model) => {
    if (search) {
      const searchLower = search.toLowerCase()
      if (!model.name.toLowerCase().includes(searchLower) && !model.location.toLowerCase().includes(searchLower)) {
        return false
      }
    }
    if (filters.verified && !model.verified) return false
    if (filters.location && !model.location.toLowerCase().includes(filters.location.toLowerCase())) return false
    if (filters.hasDigitalTwin && model.digitalTwin?.status !== "complete") return false
    if (filters.verificationLevel !== "any" && model.verificationLevel !== filters.verificationLevel) return false
    return true
  })

const sortedModels = [...filteredModels].sort(
    (a, b) => (b.metrics?.luxlaneScore || 0) - (a.metrics?.luxlaneScore || 0),
  )

const handleModelClick = (model: User) => {
    if (compareMode) {
      if (selectedForCompare.find((m) => m.id === model.id)) {
        setSelectedForCompare(selectedForCompare.filter((m) => m.id !== model.id))
      } else if (selectedForCompare.length < 2) {
        setSelectedForCompare([...selectedForCompare, model])
      }
    } else {
      onViewProfile(model)
    }
  }

const handleCompare = () => {
    if (selectedForCompare.length === 2 && onCompare) {
      onCompare([selectedForCompare[0], selectedForCompare[1]])
      setCompareMode(false)
      setSelectedForCompare([])
    }
  }

const getVerificationBadge = (level: string) => {
    switch (level) {
      case "luxlane_verified":
        return (
          <Badge className="absolute top-2 right-2 bg-emerald-500 text-white text-[9px] h-5">
            <Shield className="w-2.5 h-2.5 mr-0.5" />
            Luxlane
          </Badge>
        )
      case "agency_verified":
        return (
          <Badge className="absolute top-2 right-2 bg-sky-500 text-white text-[9px] h-5">
            <BadgeCheck className="w-2.5 h-2.5 mr-0.5" />
            Agency
          </Badge>
        )
      default:
        return null
    }
  }

return (
    <div className="pb-20">
      {/* Search & Filter */}
      <div className="px-4 py-3 border-b border-border sticky top-14 bg-background z-30">
        <div className="flex gap-2">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search models..."
              className="pl-9 h-10"
            />
          </div>
          <Button
            variant={compareMode ? "default" : "outline"}
            size="icon"
            className={`h-10 w-10 shrink-0 ${!compareMode ? "bg-transparent" : ""}`}
            onClick={() => {
              setCompareMode(!compareMode)
              setSelectedForCompare([])
            }}
          >
            <GitCompare className="w-4 h-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="h-10 w-10 shrink-0 bg-transparent"
            onClick={() => setShowFilters(true)}
          >
            <SlidersHorizontal className="w-4 h-4" />
          </Button>
        </div>

{compareMode && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            className="mt-3 p-3 bg-muted rounded-lg"
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Compare Mode</p>
                <p className="text-xs text-muted-foreground">Select 2 models to compare</p>
              </div>
              <div className="flex items-center gap-2">
                <Badge variant="secondary">{selectedForCompare.length}/2</Badge>
                <Button size="sm" onClick={handleCompare} disabled={selectedForCompare.length !== 2}>
                  Compare
                </Button>
              </div>
            </div>
            {selectedForCompare.length > 0 && (
              <div className="flex gap-2 mt-2">
                {selectedForCompare.map((model) => (
                  <Badge key={model.id} variant="outline" className="gap-1">
                    {model.name}
                    <X
                      className="w-3 h-3 cursor-pointer"
                      onClick={(e) => {
                        e.stopPropagation()
                        setSelectedForCompare(selectedForCompare.filter((m) => m.id !== model.id))
                      }}
                    />
                  </Badge>
                ))}
              </div>
            )}
          </motion.div>
        )}
      </div>

{/* All / Saved toggle */}
      <div className="flex gap-2 px-4 pt-3">
        <button
          onClick={() => setViewMode("all")}
          className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${viewMode === "all" ? "bg-foreground text-background" : "bg-muted text-muted-foreground"}`}
        >
          All
        </button>
        <button
          onClick={() => setViewMode("saved")}
          className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${viewMode === "saved" ? "bg-foreground text-background" : "bg-muted text-muted-foreground"}`}
        >
          Saved {savedModels.length > 0 && `(${savedModels.length})`}
        </button>
      </div>

{/* Results */}
      <div className="p-4">
        <p className="text-sm text-muted-foreground mb-4">
          {viewMode === "saved" ? `${savedModels.length} saved models` : `${sortedModels.length} models found`}
        </p>
        <div className="grid grid-cols-2 gap-3">
          {(viewMode === "saved" ? savedModels : sortedModels).map((model, index) => {
            const isSelected = selectedForCompare.find((m) => m.id === model.id)
            return (
              <motion.div
                key={model.id}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.03 }}
              >
                <Card
                  className={`overflow-hidden cursor-pointer transition-all ${
                    compareMode
                      ? isSelected
                        ? "ring-2 ring-foreground"
                        : "hover:ring-1 hover:ring-foreground/50"
                      : "hover:bg-muted/30"
                  }`}
                  onClick={() => handleModelClick(model)}
                >
                  <div className="aspect-[3/4] bg-muted relative">
                    <img
                      src={model.avatar || "/placeholder.svg"}
                      alt={model.name}
                      className="w-full h-full object-cover"
                    />
                    {getVerificationBadge(model.verificationLevel)}
                    {model.digitalTwin?.status === "complete" && (
                      <Badge className="absolute top-2 left-2 bg-violet-500 text-white text-[9px] h-5">
                        <Scan className="w-2.5 h-2.5 mr-0.5" />
                        Twin
                      </Badge>
                    )}
                    {compareMode && isSelected && (
                      <div className="absolute inset-0 bg-foreground/20 flex items-center justify-center">
                        <div className="w-10 h-10 rounded-full bg-foreground flex items-center justify-center">
                          <Check className="w-6 h-6 text-background" />
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="p-3">
                    <h3 className="font-medium text-sm truncate">{model.name}</h3>
                    <div className="flex items-center gap-1 mt-1 text-xs text-muted-foreground">
                      <MapPin className="w-3 h-3" />
                      {model.location.split(",")[0]}
                    </div>
                    {model.measurements && (
                      <div className="flex flex-wrap gap-1 mt-2">
                        <Badge variant="secondary" className="text-[10px] h-5">
                          {model.measurements.height}
                        </Badge>
                        <Badge variant="secondary" className="text-[10px] h-5">
                          {model.measurements.hairColor}
                        </Badge>
                      </div>
                    )}
                    {model.metrics && (
                      <div className="flex items-center justify-between mt-2">
                        <div className="flex items-center gap-1">
                          {model.metrics.trend === "up" && <TrendingUp className="w-3 h-3 text-emerald-500" />}
                          <span className="text-[10px] text-muted-foreground">#{model.metrics.rank}</span>
                        </div>
                        <span className="text-xs font-semibold">{model.metrics.luxlaneScore}</span>
                      </div>
                    )}
                  </div>
                </Card>
              </motion.div>
            )
          })}
        </div>
      </div>

{/* Filters Sheet */}
      <Sheet open={showFilters} onOpenChange={setShowFilters}>
        <SheetContent side="bottom" className="h-[80vh] rounded-t-xl">
          <SheetHeader className="text-left">
            <SheetTitle>Filters</SheetTitle>
          </SheetHeader>
          <div className="py-4 space-y-4">
            <div>
              <label className="text-sm font-medium mb-2 block">Location</label>
              <Input
                value={filters.location}
                onChange={(e) => setFilters({ ...filters, location: e.target.value })}
                placeholder="e.g. Paris, New York"
                className="h-11"
              />
            </div>

<div>
              <label className="text-sm font-medium mb-2 block">Verification Level</label>
              <div className="flex gap-2">
                {[
                  { value: "any", label: "Any" },
                  { value: "agency_verified", label: "Agency" },
                  { value: "luxlane_verified", label: "Luxlane" },
                ].map((option) => (
                  <Button
                    key={option.value}
                    variant={filters.verificationLevel === option.value ? "default" : "outline"}
                    size="sm"
                    className={filters.verificationLevel !== option.value ? "bg-transparent" : ""}
                    onClick={() =>
                      setFilters({
                        ...filters,
                        verificationLevel: option.value as typeof filters.verificationLevel,
                      })
                    }
                  >
                    {option.label}
                  </Button>
                ))}
              </div>
            </div>

<div className="flex items-center justify-between">
              <div>
                <label className="text-sm font-medium">Digital Twin Available</label>
                <p className="text-xs text-muted-foreground">Only show models with 3D twin</p>
              </div>
              <Button
                variant={filters.hasDigitalTwin ? "default" : "outline"}
                size="sm"
                className={!filters.hasDigitalTwin ? "bg-transparent" : ""}
                onClick={() => setFilters({ ...filters, hasDigitalTwin: !filters.hasDigitalTwin })}
              >
                {filters.hasDigitalTwin ? "Yes" : "No"}
              </Button>
            </div>

<div className="flex items-center justify-between">
              <label className="text-sm font-medium">Verified Only</label>
              <Button
                variant={filters.verified ? "default" : "outline"}
                size="sm"
                className={!filters.verified ? "bg-transparent" : ""}
                onClick={() => setFilters({ ...filters, verified: !filters.verified })}
              >
                {filters.verified ? "Yes" : "No"}
              </Button>
            </div>

<div className="pt-4 flex gap-2">
              <Button
                variant="outline"
                className="flex-1 bg-transparent"
                onClick={() => {
                  setFilters({
                    location: "",
                    minHeight: "",
                    maxHeight: "",
                    hairColor: "",
                    verified: false,
                    hasDigitalTwin: false,
                    verificationLevel: "any",
                  })
                }}
              >
                Clear
              </Button>
              <Button className="flex-1" onClick={() => setShowFilters(false)}>
                Apply
              </Button>
            </div>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/models/roster-view.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { motion } from "framer-motion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/lib/auth-context"
import { api, type AgencyRosterItem } from "@/lib/api-client"
import type { User } from "@/lib/types"
import { Search, Plus, BadgeCheck, MapPin, ChevronRight, Users } from "lucide-react"

interface RosterViewProps {
  onViewProfile: (user: User) => void
  onSubmitToCasting?: (user: User) => void
  onNavigateToScout?: () => void
}

export function RosterView({ onViewProfile, onSubmitToCasting, onNavigateToScout }: RosterViewProps) {
  const { user } = useAuth()
  const [search, setSearch] = useState("")
  const [roster, setRoster] = useState<AgencyRosterItem[]>([])
  const [loading, setLoading] = useState(true)

const fetchRoster = useCallback(async () => {
    const res = await api.getAgencyRoster()
    const data = res.data as { roster?: AgencyRosterItem[] } | undefined
    if (data?.roster) {
      setRoster(data.roster)
    }
    setLoading(false)
  }, [])

useEffect(() => {
    fetchRoster()
  }, [fetchRoster])

const filteredModels = roster.filter((model) => {
    if (!search) return true
    const searchLower = search.toLowerCase()
    return (
      model.displayName.toLowerCase().includes(searchLower) ||
      model.username.toLowerCase().includes(searchLower) ||
      (model.location || "").toLowerCase().includes(searchLower)
    )
  })

// Convert roster item to User shape for onViewProfile
  const rosterItemToUser = (item: AgencyRosterItem): User => ({
    id: item.id,
    name: item.displayName,
    username: item.username,
    avatar: item.avatarUrl || "/placeholder.svg",
    role: "model",
    email: item.email,
    verified: item.verificationStatus !== "UNVERIFIED",
    verificationLevel: (item.verificationStatus?.toLowerCase() || "unverified") as any,
    bio: item.bio || "",
    location: item.location || "",
    followers: 0,
    following: 0,
    createdAt: new Date(),
  })

return (
    <div className="pb-20">
      {/* Search & Add */}
      <div className="px-4 py-3 border-b border-border sticky top-14 bg-background z-30">
        <div className="flex gap-2">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search roster..."
              className="pl-9 h-10"
            />
          </div>
          <Button size="icon" className="h-10 w-10 shrink-0" onClick={onNavigateToScout}>
            <Plus className="w-4 h-4" />
          </Button>
        </div>
      </div>

{/* Stats */}
      <div className="px-4 py-3 border-b border-border">
        <p className="text-sm text-muted-foreground">{roster.length} models in your roster</p>
      </div>

{/* Roster List */}
      <div className="p-4 space-y-3">
        {loading ? (
          <div className="text-center py-12 text-muted-foreground">Loading roster...</div>
        ) : filteredModels.length > 0 ? (
          filteredModels.map((model, index) => (
            <motion.div
              key={model.id}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.03 }}
            >
              <Card
                className="p-4 cursor-pointer hover:bg-muted/30 transition-colors"
                onClick={() => onViewProfile(rosterItemToUser(model))}
              >
                <div className="flex items-center gap-3">
                  <Avatar className="w-14 h-14">
                    <AvatarImage src={model.avatarUrl || "/placeholder.svg"} alt={model.displayName} />
                    <AvatarFallback>{model.displayName[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="font-medium truncate">{model.displayName}</span>
                      {model.verificationStatus !== "UNVERIFIED" && (
                        <BadgeCheck className="w-4 h-4 text-foreground shrink-0" />
                      )}
                    </div>
                    <div className="flex items-center gap-1 mt-0.5 text-sm text-muted-foreground">
                      <MapPin className="w-3 h-3" />
                      {model.location || "No location"}
                    </div>
                    <div className="flex items-center gap-2 mt-1">
                      <Badge variant="secondary" className="text-xs">Score: {model.luxlaneScore}</Badge>
                      <Badge variant="secondary" className="text-xs capitalize">{model.availability || "available"}</Badge>
                    </div>
                  </div>
                  <ChevronRight className="w-5 h-5 text-muted-foreground shrink-0" />
                </div>
              </Card>
            </motion.div>
          ))
        ) : (
          <div className="text-center py-12 text-muted-foreground">
            <Users className="w-12 h-12 mx-auto mb-3 opacity-50" />
            <p>No models in your roster yet</p>
            <p className="text-sm mt-1">Go to Scout to find and invite models</p>
            {onNavigateToScout && (
              <Button className="mt-4" onClick={onNavigateToScout}>
                <Search className="w-4 h-4 mr-2" /> Scout Models
              </Button>
            )}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/onboarding/auth-screen.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Eye, EyeOff, Mail, Lock, User, AtSign, ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { LuxlaneLogo } from "@/components/ui/luxlane-logo"
import { useAuth } from "@/lib/auth-context"
import type { UserRole } from "@/lib/types"

interface AuthScreenProps {
  onSuccess: () => void
}

type AuthMode = "choice" | "login" | "signup" | "role"

const roleOptions: { value: UserRole; label: string; description: string }[] = [
  { value: "model", label: "Model", description: "Showcase your portfolio and get booked" },
  { value: "brand", label: "Brand", description: "Find talent for campaigns and shows" },
  { value: "agency", label: "Agency", description: "Manage and promote your roster" },
  { value: "client", label: "Client", description: "Discover and book top talent" },
]

export function AuthScreen({ onSuccess }: AuthScreenProps) {
  const { login, signup, isLoading } = useAuth()
  const [mode, setMode] = useState<AuthMode>("choice")
  const [showPassword, setShowPassword] = useState(false)
  const [selectedRole, setSelectedRole] = useState<UserRole>("model")

const [formData, setFormData] = useState({
    email: "",
    password: "",
    name: "",
    username: "",
  })
  const [error, setError] = useState("")

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

if (!formData.email || !formData.password) {
      setError("Please fill in all fields")
      return
    }

const result = await login(formData.email, formData.password)
    if (result.success) {
      onSuccess()
    } else {
      setError(result.error ?? "Invalid credentials")
    }
  }

const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")

if (!formData.email || !formData.password || !formData.name || !formData.username) {
      setError("Please fill in all fields")
      return
    }

const success = await signup({
      email: formData.email,
      password: formData.password,
      name: formData.name,
      username: formData.username,
      role: selectedRole,
    })

if (success) {
      onSuccess()
    } else {
      setError("Signup failed")
    }
  }

const handleRoleSelect = () => {
    setMode("signup")
  }

return (
    <div className="fixed inset-0 flex flex-col bg-background">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-5">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
            backgroundSize: "24px 24px",
          }}
        />
      </div>

<div className="relative z-10 flex flex-1 flex-col px-6 py-8">
        {/* Header */}
        <div className="flex items-center justify-between">
          {mode !== "choice" ? (
            <button
              onClick={() => setMode(mode === "signup" ? "role" : "choice")}
              className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
            >
              <ArrowLeft className="h-5 w-5" />
            </button>
          ) : (
            <div />
          )}
          <LuxlaneLogo size="sm" />
          <div className="w-10" />
        </div>

{/* Content */}
        <div className="flex flex-1 flex-col justify-center">
          <AnimatePresence mode="wait">
            {mode === "choice" && (
              <motion.div
                key="choice"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                className="space-y-8"
              >
                <div className="text-center">
                  <h1 className="font-serif text-3xl font-light tracking-wide">Welcome to</h1>
                  <h2 className="font-serif text-3xl font-light tracking-wide text-gold mt-1">Luxlane</h2>
                  <p className="mt-4 text-muted-foreground">The exclusive network for fashion professionals</p>
                </div>

<div className="space-y-4">
                  <Button
                    onClick={() => setMode("role")}
                    className="w-full h-14 bg-gold text-primary-foreground hover:bg-gold/90 rounded-full text-base font-medium"
                  >
                    Create Account
                  </Button>
                  <Button
                    onClick={() => setMode("login")}
                    variant="outline"
                    className="w-full h-14 border-border/50 hover:bg-secondary rounded-full text-base font-medium"
                  >
                    Sign In
                  </Button>
                </div>

<p className="text-center text-xs text-muted-foreground">
                  By continuing, you agree to our <span className="text-gold">Terms of Service</span> and{" "}
                  <span className="text-gold">Privacy Policy</span>
                </p>
              </motion.div>
            )}

{mode === "role" && (
              <motion.div
                key="role"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                className="space-y-6"
              >
                <div>
                  <h1 className="font-serif text-2xl font-light tracking-wide">I am a...</h1>
                  <p className="mt-2 text-sm text-muted-foreground">Select your role to personalize your experience</p>
                </div>

<div className="space-y-3">
                  {roleOptions.map((role) => (
                    <button
                      key={role.value}
                      onClick={() => setSelectedRole(role.value)}
                      className={`w-full p-4 rounded-xl text-left transition-all ${
                        selectedRole === role.value
                          ? "bg-gold/10 border border-gold"
                          : "bg-secondary/50 border border-transparent hover:bg-secondary"
                      }`}
                    >
                      <div className="font-medium">{role.label}</div>
                      <div className="text-sm text-muted-foreground mt-1">{role.description}</div>
                    </button>
                  ))}
                </div>

<Button
                  onClick={handleRoleSelect}
                  className="w-full h-14 bg-gold text-primary-foreground hover:bg-gold/90 rounded-full text-base font-medium"
                >
                  Continue
                </Button>
              </motion.div>
            )}

{mode === "login" && (
              <motion.div
                key="login"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                className="space-y-6"
              >
                <div>
                  <h1 className="font-serif text-2xl font-light tracking-wide">Welcome back</h1>
                  <p className="mt-2 text-sm text-muted-foreground">Sign in to your account</p>
                </div>

<form onSubmit={handleLogin} className="space-y-4">
                  <div className="space-y-4">
                    <div className="relative">
                      <Mail className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                      <Input
                        type="email"
                        placeholder="Email"
                        value={formData.email}
                        onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
                        className="h-14 pl-12 bg-secondary/50 border-0 rounded-xl text-base"
                      />
                    </div>
                    <div className="relative">
                      <Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                      <Input
                        type={showPassword ? "text" : "password"}
                        placeholder="Password"
                        value={formData.password}
                        onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
                        className="h-14 pl-12 pr-12 bg-secondary/50 border-0 rounded-xl text-base"
                      />
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                      >
                        {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                      </button>
                    </div>
                  </div>

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

<button type="button" className="text-sm text-gold hover:underline">
                    Forgot password?
                  </button>

{mode === "signup" && (
              <motion.div
                key="signup"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                className="space-y-6"
              >
                <div>
                  <h1 className="font-serif text-2xl font-light tracking-wide">Create your account</h1>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Joining as a <span className="text-gold capitalize">{selectedRole}</span>
                  </p>
                </div>

<form onSubmit={handleSignup} className="space-y-4">
                  <div className="space-y-4">
                    <div className="relative">
                      <User className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                      <Input
                        type="text"
                        placeholder="Full Name"
                        value={formData.name}
                        onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
                        className="h-14 pl-12 bg-secondary/50 border-0 rounded-xl text-base"
                      />
                    </div>
                    <div className="relative">
                      <AtSign className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                      <Input
                        type="text"
                        placeholder="Username"
                        value={formData.username}
                        onChange={(e) =>
                          setFormData((prev) => ({
                            ...prev,
                            username: e.target.value.toLowerCase().replace(/\s/g, ""),
                          }))
                        }
                        className="h-14 pl-12 bg-secondary/50 border-0 rounded-xl text-base"
                      />
                    </div>
                    <div className="relative">
                      <Mail className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                      <Input
                        type="email"
                        placeholder="Email"
                        value={formData.email}
                        onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
                        className="h-14 pl-12 bg-secondary/50 border-0 rounded-xl text-base"
                      />
                    </div>
                    <div className="relative">
                      <Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                      <Input
                        type={showPassword ? "text" : "password"}
                        placeholder="Password"
                        value={formData.password}
                        onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
                        className="h-14 pl-12 pr-12 bg-secondary/50 border-0 rounded-xl text-base"
                      />
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                      >
                        {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                      </button>
                    </div>
                  </div>

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

<Button
                    type="submit"
                    disabled={isLoading}
                    className="w-full h-14 bg-gold text-primary-foreground hover:bg-gold/90 rounded-full text-base font-medium"
                  >
                    {isLoading ? "Creating account..." : "Create Account"}
                  </Button>
                </form>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/onboarding/onboarding-flow.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { LuxlaneLogo } from "@/components/ui/luxlane-logo"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { useAuth } from "@/lib/auth-context"
import { api } from "@/lib/api-client"
import type { UserRole } from "@/lib/types"
import { ArrowRight, Camera, Briefcase, Building2, User, Check } from "lucide-react"

type Step = "welcome" | "role" | "auth" | "profile" | "complete"

interface ProfileData {
  location: string
  bio: string
  height: string
  bust: string
  waist: string
  hips: string
  shoeSize: string
  hairColor: string
  eyeColor: string
  languages: string
  experienceTags: string
  instagram: string
  tiktok: string
  companyName: string
  website: string
  industry: string
}

const emptyProfileData: ProfileData = {
  location: "",
  bio: "",
  height: "",
  bust: "",
  waist: "",
  hips: "",
  shoeSize: "",
  hairColor: "",
  eyeColor: "",
  languages: "",
  experienceTags: "",
  instagram: "",
  tiktok: "",
  companyName: "",
  website: "",
  industry: "",
}

const hairColors = ["Black", "Brown", "Blonde", "Red", "Auburn", "Gray", "White", "Other"]
const eyeColors = ["Brown", "Blue", "Green", "Hazel", "Gray", "Amber", "Other"]
const industries = ["Fashion", "Beauty", "Tech", "Entertainment", "Sports", "Retail", "Hospitality", "Other"]

const roles: { value: UserRole; label: string; description: string; icon: React.ReactNode }[] = [
  {
    value: "model",
    label: "Model",
    description: "Find castings and job opportunities",
    icon: <Camera className="w-5 h-5" />,
  },
  {
    value: "brand",
    label: "Brand",
    description: "Ongoing casting & talent management",
    icon: <Briefcase className="w-5 h-5" />,
  },
  {
    value: "agency",
    label: "Agency",
    description: "Manage talent and castings",
    icon: <Building2 className="w-5 h-5" />,
  },
  { value: "client", label: "Client", description: "One-time projects & events", icon: <User className="w-5 h-5" /> },
]

export function OnboardingFlow({ onComplete }: { onComplete: () => void }) {
  const [step, setStep] = useState<Step>("welcome")
  const [selectedRole, setSelectedRole] = useState<UserRole | null>(null)
  const [isLogin, setIsLogin] = useState(true)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [name, setName] = useState("")
  const [authError, setAuthError] = useState("")
  const [profileData, setProfileData] = useState<ProfileData>(emptyProfileData)
  const [profileSubmitting, setProfileSubmitting] = useState(false)
  const { login, signup, isLoading } = useAuth()

const updateProfile = (field: keyof ProfileData, value: string) => {
    setProfileData((prev) => ({ ...prev, [field]: value }))
  }

const handleAuth = async () => {
    setAuthError("")
    if (isLogin) {
      const result = await login(email, password)
      if (result.success) {
        onComplete()
      } else {
        setAuthError(result.error ?? "Invalid credentials")
      }
    } else {
      if (!selectedRole) return
      const success = await signup({
        email,
        password,
        name,
        username: name.toLowerCase().replace(/\s+/g, ""),
        role: selectedRole,
      })
      if (success) {
        setStep("profile")
      } else {
        setAuthError("Signup failed")
      }
    }
  }

const handleProfileSubmit = async () => {
    setProfileSubmitting(true)
    try {
      const payload: Record<string, unknown> = {
        displayName: name,
        bio: profileData.bio || undefined,
        location: profileData.location || undefined,
      }

if (selectedRole === "model") {
        payload.modelProfile = {
          heightCm: profileData.height ? parseInt(profileData.height) : undefined,
          bustCm: profileData.bust ? parseInt(profileData.bust) : undefined,
          waistCm: profileData.waist ? parseInt(profileData.waist) : undefined,
          hipsCm: profileData.hips ? parseInt(profileData.hips) : undefined,
          shoeSize: profileData.shoeSize || undefined,
          eyeColor: profileData.eyeColor || undefined,
          hairColor: profileData.hairColor || undefined,
          languages: profileData.languages
            ? profileData.languages.split(",").map((s) => s.trim()).filter(Boolean)
            : undefined,
          experienceTags: profileData.experienceTags
            ? profileData.experienceTags.split(",").map((s) => s.trim()).filter(Boolean)
            : undefined,
          socialLinks: {
            instagram: profileData.instagram || undefined,
            tiktok: profileData.tiktok || undefined,
          },
        }
      } else if (selectedRole === "brand") {
        payload.brandProfile = {
          brandName: profileData.companyName || undefined,
          website: profileData.website || undefined,
        }
      } else if (selectedRole === "agency") {
        payload.agencyProfile = {
          agencyName: profileData.companyName || undefined,
          website: profileData.website || undefined,
        }
      } else if (selectedRole === "client") {
        payload.clientProfile = {
          clientName: profileData.companyName || undefined,
          website: profileData.website || undefined,
          industry: profileData.industry || undefined,
        }
      }

await api.completeOnboarding(payload)
      setStep("complete")
      setTimeout(onComplete, 1500)
    } catch {
      // Silently proceed on error — profile can be completed later
      setStep("complete")
      setTimeout(onComplete, 1500)
    } finally {
      setProfileSubmitting(false)
    }
  }

const renderModelProfileForm = () => (
    <div className="space-y-6">
      {/* Location */}
      <div className="space-y-2">
        <Label htmlFor="profile-location">Location</Label>
        <Input
          id="profile-location"
          value={profileData.location}
          onChange={(e) => updateProfile("location", e.target.value)}
          placeholder="e.g. Paris, France"
          className="h-12"
        />
      </div>

{/* Bio */}
      <div className="space-y-2">
        <Label htmlFor="profile-bio">Bio</Label>
        <Textarea
          id="profile-bio"
          value={profileData.bio}
          onChange={(e) => updateProfile("bio", e.target.value)}
          placeholder="Tell us about yourself..."
          rows={3}
        />
      </div>

{/* Measurements */}
      <div className="space-y-3">
        <Label className="text-sm font-medium">Measurements</Label>
        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1">
            <Label htmlFor="height" className="text-xs text-muted-foreground">Height (cm)</Label>
            <Input
              id="height"
              type="number"
              value={profileData.height}
              onChange={(e) => updateProfile("height", e.target.value)}
              placeholder="175"
              className="h-10"
            />
          </div>
          <div className="space-y-1">
            <Label htmlFor="bust" className="text-xs text-muted-foreground">Bust (cm)</Label>
            <Input
              id="bust"
              type="number"
              value={profileData.bust}
              onChange={(e) => updateProfile("bust", e.target.value)}
              placeholder="86"
              className="h-10"
            />
          </div>
          <div className="space-y-1">
            <Label htmlFor="waist" className="text-xs text-muted-foreground">Waist (cm)</Label>
            <Input
              id="waist"
              type="number"
              value={profileData.waist}
              onChange={(e) => updateProfile("waist", e.target.value)}
              placeholder="61"
              className="h-10"
            />
          </div>
          <div className="space-y-1">
            <Label htmlFor="hips" className="text-xs text-muted-foreground">Hips (cm)</Label>
            <Input
              id="hips"
              type="number"
              value={profileData.hips}
              onChange={(e) => updateProfile("hips", e.target.value)}
              placeholder="89"
              className="h-10"
            />
          </div>
        </div>
        <div className="space-y-1">
          <Label htmlFor="shoeSize" className="text-xs text-muted-foreground">Shoe Size</Label>
          <Input
            id="shoeSize"
            value={profileData.shoeSize}
            onChange={(e) => updateProfile("shoeSize", e.target.value)}
            placeholder="e.g. EU 39"
            className="h-10"
          />
        </div>
      </div>

{/* Appearance */}
      <div className="space-y-3">
        <Label className="text-sm font-medium">Appearance</Label>
        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1">
            <Label htmlFor="hairColor" className="text-xs text-muted-foreground">Hair Color</Label>
            <Select value={profileData.hairColor} onValueChange={(v) => updateProfile("hairColor", v)}>
              <SelectTrigger id="hairColor" className="h-10">
                <SelectValue placeholder="Select" />
              </SelectTrigger>
              <SelectContent>
                {hairColors.map((c) => (
                  <SelectItem key={c} value={c}>{c}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1">
            <Label htmlFor="eyeColor" className="text-xs text-muted-foreground">Eye Color</Label>
            <Select value={profileData.eyeColor} onValueChange={(v) => updateProfile("eyeColor", v)}>
              <SelectTrigger id="eyeColor" className="h-10">
                <SelectValue placeholder="Select" />
              </SelectTrigger>
              <SelectContent>
                {eyeColors.map((c) => (
                  <SelectItem key={c} value={c}>{c}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

{/* Languages */}
      <div className="space-y-2">
        <Label htmlFor="languages">Languages</Label>
        <Input
          id="languages"
          value={profileData.languages}
          onChange={(e) => updateProfile("languages", e.target.value)}
          placeholder="English, French, Spanish"
          className="h-12"
        />
        <p className="text-xs text-muted-foreground">Comma-separated</p>
      </div>

{/* Experience Tags */}
      <div className="space-y-2">
        <Label htmlFor="experienceTags">Experience</Label>
        <Input
          id="experienceTags"
          value={profileData.experienceTags}
          onChange={(e) => updateProfile("experienceTags", e.target.value)}
          placeholder="runway, editorial, commercial"
          className="h-12"
        />
        <p className="text-xs text-muted-foreground">Comma-separated tags</p>
      </div>

{/* Social Links */}
      <div className="space-y-3">
        <Label className="text-sm font-medium">Social Links</Label>
        <div className="space-y-3">
          <div className="space-y-1">
            <Label htmlFor="instagram" className="text-xs text-muted-foreground">Instagram</Label>
            <div className="relative">
              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm">@</span>
              <Input
                id="instagram"
                value={profileData.instagram}
                onChange={(e) => updateProfile("instagram", e.target.value)}
                placeholder="username"
                className="h-10 pl-7"
              />
            </div>
          </div>
          <div className="space-y-1">
            <Label htmlFor="tiktok" className="text-xs text-muted-foreground">TikTok</Label>
            <div className="relative">
              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm">@</span>
              <Input
                id="tiktok"
                value={profileData.tiktok}
                onChange={(e) => updateProfile("tiktok", e.target.value)}
                placeholder="username"
                className="h-10 pl-7"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )

const renderBrandProfileForm = () => (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="companyName">Company / Brand Name</Label>
        <Input
          id="companyName"
          value={profileData.companyName}
          onChange={(e) => updateProfile("companyName", e.target.value)}
          placeholder="Your brand name"
          className="h-12"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="website">Website</Label>
        <Input
          id="website"
          value={profileData.website}
          onChange={(e) => updateProfile("website", e.target.value)}
          placeholder="https://yourbrand.com"
          className="h-12"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="profile-location">Location</Label>
        <Input
          id="profile-location"
          value={profileData.location}
          onChange={(e) => updateProfile("location", e.target.value)}
          placeholder="e.g. New York, NY"
          className="h-12"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="profile-bio">Bio / Description</Label>
        <Textarea
          id="profile-bio"
          value={profileData.bio}
          onChange={(e) => updateProfile("bio", e.target.value)}
          placeholder="Tell us about your brand..."
          rows={3}
        />
      </div>
    </div>
  )

const renderAgencyProfileForm = () => (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="companyName">Agency Name</Label>
        <Input
          id="companyName"
          value={profileData.companyName}
          onChange={(e) => updateProfile("companyName", e.target.value)}
          placeholder="Your agency name"
          className="h-12"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="website">Website</Label>
        <Input
          id="website"
          value={profileData.website}
          onChange={(e) => updateProfile("website", e.target.value)}
          placeholder="https://youragency.com"
          className="h-12"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="profile-location">Location</Label>
        <Input
          id="profile-location"
          value={profileData.location}
          onChange={(e) => updateProfile("location", e.target.value)}
          placeholder="e.g. London, UK"
          className="h-12"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="profile-bio">Bio / Description</Label>
        <Textarea
          id="profile-bio"
          value={profileData.bio}
          onChange={(e) => updateProfile("bio", e.target.value)}
          placeholder="Tell us about your agency..."
          rows={3}
        />
      </div>
    </div>
  )

const renderClientProfileForm = () => (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="companyName">Company Name</Label>
        <Input
          id="companyName"
          value={profileData.companyName}
          onChange={(e) => updateProfile("companyName", e.target.value)}
          placeholder="Your company name"
          className="h-12"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="industry">Industry</Label>
        <Select value={profileData.industry} onValueChange={(v) => updateProfile("industry", v)}>
          <SelectTrigger id="industry" className="h-12">
            <SelectValue placeholder="Select your industry" />
          </SelectTrigger>
          <SelectContent>
            {industries.map((ind) => (
              <SelectItem key={ind} value={ind}>{ind}</SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label htmlFor="website">Website</Label>
        <Input
          id="website"
          value={profileData.website}
          onChange={(e) => updateProfile("website", e.target.value)}
          placeholder="https://yourcompany.com"
          className="h-12"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="profile-location">Location</Label>
        <Input
          id="profile-location"
          value={profileData.location}
          onChange={(e) => updateProfile("location", e.target.value)}
          placeholder="e.g. Los Angeles, CA"
          className="h-12"
        />
      </div>
    </div>
  )

const profileTitle: Record<UserRole, string> = {
    model: "Build your model profile",
    brand: "Set up your brand",
    agency: "Set up your agency",
    client: "Tell us about your company",
  }

return (
    <div className="min-h-screen bg-background flex flex-col">
      <AnimatePresence mode="wait">
        {step === "welcome" && (
          <motion.div
            key="welcome"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="flex-1 flex flex-col items-center justify-center px-6 py-12"
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="text-center space-y-6 max-w-sm"
            >
              <LuxlaneLogo size="lg" />
              <div className="space-y-2">
                <h1 className="text-2xl font-semibold tracking-tight">The Fashion Casting Network</h1>
                <p className="text-muted-foreground">
                  Connect with top brands, agencies, and talent. Your next opportunity starts here.
                </p>
              </div>
              <div className="pt-8 space-y-3">
                <Button
                  onClick={() => {
                    setIsLogin(false)
                    setStep("role")
                  }}
                  className="w-full h-12"
                  size="lg"
                >
                  Get Started
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
                <Button
                  variant="ghost"
                  onClick={() => {
                    setIsLogin(true)
                    setStep("auth")
                  }}
                  className="w-full h-12"
                  size="lg"
                >
                  I already have an account
                </Button>
              </div>
            </motion.div>
          </motion.div>
        )}

{step === "role" && (
          <motion.div
            key="role"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="flex-1 flex flex-col px-6 py-12"
          >
            <button onClick={() => setStep("welcome")} className="text-sm text-muted-foreground mb-8">
              Back
            </button>
            <div className="space-y-2 mb-8">
              <h1 className="text-2xl font-semibold tracking-tight">How will you use Luxlane?</h1>
              <p className="text-muted-foreground">Select your primary role</p>
            </div>
            <div className="space-y-3 flex-1">
              {roles.map((role) => (
                <button
                  key={role.value}
                  onClick={() => setSelectedRole(role.value)}
                  className={`w-full p-4 rounded-xl border text-left transition-all flex items-start gap-4 ${
                    selectedRole === role.value
                      ? "border-foreground bg-secondary"
                      : "border-border hover:border-foreground/50"
                  }`}
                >
                  <div
                    className={`p-2 rounded-lg ${selectedRole === role.value ? "bg-foreground text-background" : "bg-muted"}`}
                  >
                    {role.icon}
                  </div>
                  <div className="flex-1">
                    <div className="font-medium">{role.label}</div>
                    <div className="text-sm text-muted-foreground">{role.description}</div>
                  </div>
                  {selectedRole === role.value && <Check className="w-5 h-5 mt-1" />}
                </button>
              ))}
            </div>
            <Button onClick={() => setStep("auth")} disabled={!selectedRole} className="w-full h-12 mt-6" size="lg">
              Continue
              <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
          </motion.div>
        )}

{step === "auth" && (
          <motion.div
            key="auth"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="flex-1 flex flex-col px-6 py-12"
          >
            <button
              onClick={() => setStep(isLogin ? "welcome" : "role")}
              className="text-sm text-muted-foreground mb-8"
            >
              Back
            </button>
            <div className="space-y-2 mb-8">
              <h1 className="text-2xl font-semibold tracking-tight">
                {isLogin ? "Welcome back" : "Create your account"}
              </h1>
              <p className="text-muted-foreground">
                {isLogin ? "Enter your credentials to continue" : "Enter your details to get started"}
              </p>
            </div>
            <div className="space-y-4 flex-1">
              {!isLogin && (
                <div className="space-y-2">
                  <Label htmlFor="name">Full Name</Label>
                  <Input
                    id="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="Enter your name"
                    className="h-12"
                  />
                </div>
              )}
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Enter your email"
                  className="h-12"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input
                  id="password"
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Enter your password"
                  className="h-12"
                />
              </div>
              {authError && (
                <p className="text-sm text-destructive" role="alert">
                  {authError}
                </p>
              )}
            </div>
            <div className="space-y-4 mt-6">
              <Button
                onClick={handleAuth}
                disabled={isLoading || !email || !password || (!isLogin && !name)}
                className="w-full h-12"
                size="lg"
              >
                {isLoading ? "Please wait..." : isLogin ? "Sign In" : "Create Account"}
              </Button>
              <p className="text-center text-sm text-muted-foreground">
                {isLogin ? "Don't have an account?" : "Already have an account?"}{" "}
                <button
                  onClick={() => {
                    setIsLogin(!isLogin)
                    if (!isLogin) {
                      setStep("welcome")
                    }
                  }}
                  className="text-foreground font-medium"
                >
                  {isLogin ? "Sign up" : "Sign in"}
                </button>
              </p>
              {!isLogin && (
                <p className="text-center text-xs text-muted-foreground mt-4">
                  By signing up, you agree to our{" "}
                  <a href="/terms" className="underline">Terms of Service</a>{" "}
                  and{" "}
                  <a href="/privacy" className="underline">Privacy Policy</a>
                </p>
              )}
            </div>
          </motion.div>
        )}

{step === "profile" && selectedRole && (
          <motion.div
            key="profile"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="flex-1 flex flex-col px-6 py-12"
          >
            <button onClick={() => setStep("auth")} className="text-sm text-muted-foreground mb-8">
              Back
            </button>
            <div className="space-y-2 mb-8">
              <h1 className="text-2xl font-semibold tracking-tight">{profileTitle[selectedRole]}</h1>
              <p className="text-muted-foreground">
                Add details to help others find and connect with you
              </p>
            </div>

<div className="flex-1 overflow-y-auto pb-4">
              {selectedRole === "model" && renderModelProfileForm()}
              {selectedRole === "brand" && renderBrandProfileForm()}
              {selectedRole === "agency" && renderAgencyProfileForm()}
              {selectedRole === "client" && renderClientProfileForm()}
            </div>

<div className="space-y-3 mt-6 pt-4 border-t">
              <Button
                onClick={handleProfileSubmit}
                disabled={profileSubmitting}
                className="w-full h-12"
                size="lg"
              >
                {profileSubmitting ? "Saving..." : "Complete Profile"}
              </Button>
              <button
                onClick={() => {
                  setStep("complete")
                  setTimeout(onComplete, 1500)
                }}
                className="w-full text-center text-sm text-muted-foreground hover:text-foreground transition-colors py-2"
              >
                Skip for now
              </button>
            </div>
          </motion.div>
        )}

{step === "complete" && (
          <motion.div
            key="complete"
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="flex-1 flex flex-col items-center justify-center px-6 py-12"
          >
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ type: "spring", delay: 0.2 }}
              className="w-16 h-16 rounded-full bg-foreground flex items-center justify-center mb-6"
            >
              <Check className="w-8 h-8 text-background" />
            </motion.div>
            <h1 className="text-2xl font-semibold tracking-tight">You're all set</h1>
            <p className="text-muted-foreground mt-2">Welcome to Luxlane</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/onboarding/splash-screen.tsx"
"use client"

import { useEffect, useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { LuxlaneLogo } from "@/components/ui/luxlane-logo"

interface SplashScreenProps {
  onComplete: () => void
}

export function SplashScreen({ onComplete }: SplashScreenProps) {
  const [phase, setPhase] = useState<"logo" | "tagline" | "exit">("logo")

useEffect(() => {
    const timer1 = setTimeout(() => setPhase("tagline"), 1200)
    const timer2 = setTimeout(() => setPhase("exit"), 2800)
    const timer3 = setTimeout(onComplete, 3400)

return () => {
      clearTimeout(timer1)
      clearTimeout(timer2)
      clearTimeout(timer3)
    }
  }, [onComplete])

return (
    <AnimatePresence>
      {phase !== "exit" && (
        <motion.div
          initial={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.6 }}
          className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-background"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
          >
            <LuxlaneLogo size="lg" />
          </motion.div>

<AnimatePresence>
            {phase === "tagline" && (
              <motion.p
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.5 }}
                className="mt-6 text-sm tracking-[0.2em] text-muted-foreground uppercase"
              >
                Where Luxury Meets Exclusivity
              </motion.p>
            )}
          </AnimatePresence>

<motion.div
            initial={{ scaleX: 0 }}
            animate={{ scaleX: 1 }}
            transition={{ duration: 2.5, ease: "easeInOut" }}
            className="absolute bottom-24 left-1/2 -translate-x-1/2 h-[1px] w-32 bg-gradient-to-r from-transparent via-gold to-transparent origin-center"
          />
        </motion.div>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="components/onboarding/welcome-slides.tsx"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { LuxlaneLogo } from "@/components/ui/luxlane-logo"

interface WelcomeSlidesProps {
  onComplete: () => void
}

const slides = [
  {
    image: "/placeholder.svg?height=600&width=400",
    title: "Discover",
    subtitle: "Elite Talent",
    description: "Connect with the world's most sought-after models, brands, and industry professionals.",
  },
  {
    image: "/placeholder.svg?height=600&width=400",
    title: "Exclusive",
    subtitle: "Opportunities",
    description: "Access private castings, premium bookings, and invitation-only industry events.",
  },
  {
    image: "/placeholder.svg?height=600&width=400",
    title: "Elevate",
    subtitle: "Your Career",
    description: "Build your portfolio, grow your network, and unlock your full potential.",
  },
]

export function WelcomeSlides({ onComplete }: WelcomeSlidesProps) {
  const [currentSlide, setCurrentSlide] = useState(0)

const nextSlide = () => {
    if (currentSlide < slides.length - 1) {
      setCurrentSlide((prev) => prev + 1)
    } else {
      onComplete()
    }
  }

const slide = slides[currentSlide]

return (
    <div className="fixed inset-0 flex flex-col bg-background">
      {/* Background Image */}
      <div className="absolute inset-0">
        <AnimatePresence mode="wait">
          <motion.div
            key={currentSlide}
            initial={{ opacity: 0, scale: 1.1 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.6 }}
            className="absolute inset-0"
          >
            <img src={slide.image || "/placeholder.svg"} alt="" className="h-full w-full object-cover" />
            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
          </motion.div>
        </AnimatePresence>
      </div>

{/* Content */}
      <div className="relative z-10 flex flex-1 flex-col justify-end px-6 pb-12 pt-6">
        {/* Logo */}
        <div className="absolute top-6 left-6">
          <LuxlaneLogo size="sm" />
        </div>

{/* Skip Button */}
        <button
          onClick={onComplete}
          className="absolute top-6 right-6 text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          Skip
        </button>

{/* Slide Content */}
        <AnimatePresence mode="wait">
          <motion.div
            key={currentSlide}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.4 }}
            className="mb-8"
          >
            <h2 className="font-serif text-4xl font-light tracking-wide text-foreground">{slide.title}</h2>
            <h3 className="font-serif text-4xl font-light tracking-wide text-gold mt-1">{slide.subtitle}</h3>
            <p className="mt-4 text-base text-muted-foreground leading-relaxed max-w-xs">{slide.description}</p>
          </motion.div>
        </AnimatePresence>

{/* Progress Dots */}
        <div className="flex items-center gap-2 mb-6">
          {slides.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`h-1 rounded-full transition-all duration-300 ${
                index === currentSlide ? "w-8 bg-gold" : "w-1 bg-muted-foreground/30"
              }`}
            />
          ))}
        </div>

{/* CTA Button */}
        <Button
          onClick={nextSlide}
          className="w-full h-14 bg-gold text-primary-foreground hover:bg-gold/90 rounded-full text-base font-medium tracking-wide"
        >
          {currentSlide === slides.length - 1 ? "Get Started" : "Continue"}
          <ChevronRight className="ml-2 h-5 w-5" />
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/agency-castings.tsx"
"use client"

import { ChevronRight, MapPin, Calendar } from "lucide-react"
import type { Casting } from "@/lib/types"

interface AgencyCastingsProps {
  castings: Casting[]
  onViewCasting?: (casting: Casting) => void
}

const typeLabels: Record<string, string> = {
  runway: "Runway",
  campaign: "Campaign",
  editorial: "Editorial",
  commercial: "Commercial",
  event: "Event",
  fitting: "Fitting",
}

export function AgencyCastings({ castings, onViewCasting }: AgencyCastingsProps) {
  return (
    <div className="px-4 py-4 border-b border-border/30">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Active Castings</h3>
        <span className="text-sm text-muted-foreground">{castings.length}</span>
      </div>

<div className="space-y-2">
        {castings.map((casting) => (
          <button
            key={casting.id}
            onClick={() => onViewCasting?.(casting)}
            className="w-full flex items-center gap-3 p-3 rounded-xl bg-secondary/50 hover:bg-secondary transition-colors text-left"
          >
            <div className="w-14 h-14 rounded-lg overflow-hidden bg-zinc-800 shrink-0">
              <img
                src={casting.images?.[0] || "/placeholder.svg"}
                alt={casting.title}
                className="w-full h-full object-cover"
              />
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <span className="font-medium text-sm truncate">{casting.title}</span>
                <span className="shrink-0 rounded bg-zinc-700/80 px-1.5 py-0.5 text-[10px] font-medium text-zinc-300">
                  {typeLabels[casting.type] || casting.type}
                </span>
              </div>
              <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
                <span className="flex items-center gap-1">
                  <MapPin className="w-3 h-3" />
                  {casting.location}
                </span>
                <span className="flex items-center gap-1">
                  <Calendar className="w-3 h-3" />
                  {casting.dates.start.toLocaleDateString("en-US", { month: "short", day: "numeric" })}
                </span>
              </div>
              <div className="flex items-center gap-2 mt-1 text-[11px] text-muted-foreground">
                <span>{casting.applicationsCount} applicants</span>
                {casting.pay.amount > 0 && (
                  <>
                    <span>·</span>
                    <span>
                      {casting.pay.currency} {casting.pay.amount.toLocaleString()}
                    </span>
                  </>
                )}
              </div>
            </div>
            <ChevronRight className="h-5 w-5 text-muted-foreground shrink-0" />
          </button>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/agency-roster.tsx"
"use client"

import { BadgeCheck, ChevronRight } from "lucide-react"
import type { User } from "@/lib/types"
import { cn } from "@/lib/utils"

interface AgencyRosterProps {
  roster: User[]
  onModelClick: (userId: string) => void
}

export function AgencyRoster({ roster, onModelClick }: AgencyRosterProps) {
  return (
    <div className="px-4 py-4 border-b border-border/30">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Talent Roster</h3>
        <button className="text-sm text-gold flex items-center gap-1">
          View All <ChevronRight className="h-4 w-4" />
        </button>
      </div>

<div className="space-y-3">
        {roster.map((model) => (
          <button
            key={model.id}
            onClick={() => onModelClick(model.id)}
            className="w-full flex items-center gap-3 p-3 rounded-xl bg-secondary/50 hover:bg-secondary transition-colors"
          >
            <div
              className={cn(
                "w-12 h-12 rounded-full p-[2px]",
                model.verified ? "bg-gradient-to-br from-gold to-gold-muted" : "bg-border",
              )}
            >
              <div className="w-full h-full rounded-full overflow-hidden bg-background">
                <img src={model.avatar || "/placeholder.svg"} alt={model.name} className="w-full h-full object-cover" />
              </div>
            </div>
            <div className="flex-1 text-left">
              <div className="flex items-center gap-1">
                <span className="font-medium">{model.name}</span>
                {model.verified && <BadgeCheck className="h-4 w-4 text-gold fill-gold/20" />}
              </div>
              <span className="text-sm text-muted-foreground">{model.location}</span>
            </div>
            <ChevronRight className="h-5 w-5 text-muted-foreground" />
          </button>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/model-comp-card.tsx"
"use client"

import { Ruler, Eye, Scissors } from "lucide-react"
import type { ModelMeasurements } from "@/lib/types"

interface ModelCompCardProps {
  measurements: ModelMeasurements
  portfolio?: string[]
}

export function ModelCompCard({ measurements, portfolio }: ModelCompCardProps) {
  return (
    <div className="px-4 py-4 border-b border-border/30">
      {/* Measurements */}
      <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">Measurements</h3>
      <div className="grid grid-cols-2 gap-3">
        <div className="p-3 rounded-xl bg-secondary/50">
          <div className="flex items-center gap-2 mb-1">
            <Ruler className="h-4 w-4 text-gold" />
            <span className="text-xs text-muted-foreground">Height</span>
          </div>
          <span className="font-medium">{measurements.height}</span>
        </div>
        <div className="p-3 rounded-xl bg-secondary/50">
          <div className="flex items-center gap-2 mb-1">
            <Scissors className="h-4 w-4 text-gold" />
            <span className="text-xs text-muted-foreground">Bust</span>
          </div>
          <span className="font-medium">{measurements.bust}</span>
        </div>
        <div className="p-3 rounded-xl bg-secondary/50">
          <div className="flex items-center gap-2 mb-1">
            <Scissors className="h-4 w-4 text-gold" />
            <span className="text-xs text-muted-foreground">Waist</span>
          </div>
          <span className="font-medium">{measurements.waist}</span>
        </div>
        <div className="p-3 rounded-xl bg-secondary/50">
          <div className="flex items-center gap-2 mb-1">
            <Scissors className="h-4 w-4 text-gold" />
            <span className="text-xs text-muted-foreground">Hips</span>
          </div>
          <span className="font-medium">{measurements.hips}</span>
        </div>
        <div className="p-3 rounded-xl bg-secondary/50">
          <div className="flex items-center gap-2 mb-1">
            <Eye className="h-4 w-4 text-gold" />
            <span className="text-xs text-muted-foreground">Eyes</span>
          </div>
          <span className="font-medium">{measurements.eyeColor}</span>
        </div>
        <div className="p-3 rounded-xl bg-secondary/50">
          <div className="flex items-center gap-2 mb-1">
            <span className="h-4 w-4 text-gold text-sm">💇</span>
            <span className="text-xs text-muted-foreground">Hair</span>
          </div>
          <span className="font-medium">{measurements.hairColor}</span>
        </div>
      </div>

{/* Portfolio Preview */}
      {portfolio && portfolio.length > 0 && (
        <div className="mt-6">
          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">Portfolio</h3>
          <div className="flex gap-2 overflow-x-auto scrollbar-hide">
            {portfolio.map((image, index) => (
              <div key={index} className="flex-shrink-0 w-28 h-36 rounded-xl overflow-hidden">
                <img
                  src={image || "/placeholder.svg"}
                  alt={`Portfolio ${index + 1}`}
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-grid.tsx"
"use client"

import { Heart, MessageCircle } from "lucide-react"
import type { Post } from "@/lib/types"
import { formatNumber } from "@/lib/format"

interface ProfileGridProps {
  posts: Post[]
  onPostClick: (postId: string) => void
}

export function ProfileGrid({ posts, onPostClick }: ProfileGridProps) {
  if (posts.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-16 px-6">
        <div className="w-16 h-16 rounded-full bg-secondary/50 flex items-center justify-center mb-4">
          <svg className="w-8 h-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
            />
          </svg>
        </div>
        <h3 className="font-serif text-lg">No Posts Yet</h3>
        <p className="text-sm text-muted-foreground mt-1">Posts will appear here</p>
      </div>
    )
  }

return (
    <div className="grid grid-cols-3 gap-[2px]">
      {posts.map((post) => (
        <button
          key={post.id}
          onClick={() => onPostClick(post.id)}
          className="relative aspect-square overflow-hidden group"
        >
          <img
            src={post.media[0] || "/placeholder.svg"}
            alt=""
            className="w-full h-full object-cover group-hover:opacity-75 transition-opacity"
          />
          <div className="absolute inset-0 bg-background/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-4">
            <div className="flex items-center gap-1 text-foreground">
              <Heart className="h-5 w-5 fill-current" />
              <span className="font-semibold">{formatNumber(post.likes)}</span>
            </div>
            <div className="flex items-center gap-1 text-foreground">
              <MessageCircle className="h-5 w-5 fill-current" />
              <span className="font-semibold">{formatNumber(post.comments)}</span>
            </div>
          </div>
          {post.media.length > 1 && (
            <div className="absolute top-2 right-2">
              <svg className="w-4 h-4 text-foreground drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24">
                <path d="M4 6h2v2H4V6zm0 5h2v2H4v-2zm0 5h2v2H4v-2zm16-8V6H8v14h14v-2h-2V8h2z" />
              </svg>
            </div>
          )}
        </button>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-header.tsx"
"use client"

import { ArrowLeft, Settings, MoreHorizontal, BadgeCheck, ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import type { User } from "@/lib/types"
import { formatNumber } from "@/lib/format"
import { cn } from "@/lib/utils"

interface ProfileHeaderProps {
  user: User
  isOwnProfile: boolean
  isFollowing: boolean
  onBack: () => void
  onSettings: () => void
  onFollow: () => void
  onMessage: () => void
  onBook?: () => void
}

export function ProfileHeader({
  user,
  isOwnProfile,
  isFollowing,
  onBack,
  onSettings,
  onFollow,
  onMessage,
  onBook,
}: ProfileHeaderProps) {
  const getTierBadge = () => {
    if (user.tier === "black")
      return <span className="px-2 py-0.5 bg-foreground text-background text-[10px] font-bold rounded">BLACK</span>
    if (user.tier === "elite")
      return <span className="px-2 py-0.5 bg-gold text-primary-foreground text-[10px] font-bold rounded">ELITE</span>
    return null
  }

return (
    <div className="relative">
      {/* Cover Image */}
      <div className="h-32 bg-gradient-to-br from-charcoal to-charcoal-light" />

{/* Navigation */}
      <div className="absolute top-0 left-0 right-0 flex items-center justify-between p-4">
        <button
          onClick={onBack}
          className="w-10 h-10 rounded-full bg-background/20 backdrop-blur-sm flex items-center justify-center"
        >
          <ArrowLeft className="h-5 w-5" />
        </button>
        {isOwnProfile ? (
          <button
            onClick={onSettings}
            className="w-10 h-10 rounded-full bg-background/20 backdrop-blur-sm flex items-center justify-center"
          >
            <Settings className="h-5 w-5" />
          </button>
        ) : (
          <button className="w-10 h-10 rounded-full bg-background/20 backdrop-blur-sm flex items-center justify-center">
            <MoreHorizontal className="h-5 w-5" />
          </button>
        )}
      </div>

{/* Profile Info */}
      <div className="px-4 -mt-12">
        {/* Avatar */}
        <div
          className={cn(
            "w-24 h-24 rounded-full p-[3px] bg-background",
            user.verified ? "ring-2 ring-gold ring-offset-2 ring-offset-background" : "",
          )}
        >
          <img
            src={user.avatar || "/placeholder.svg"}
            alt={user.name}
            className="w-full h-full rounded-full object-cover"
          />
        </div>

{/* Name & Badge */}
        <div className="mt-3 flex items-center gap-2">
          <h1 className="font-serif text-xl font-medium">{user.name}</h1>
          {user.verified && <BadgeCheck className="h-5 w-5 text-gold fill-gold/20" />}
          {getTierBadge()}
        </div>

{/* Username & Role */}
        <div className="flex items-center gap-2 mt-1">
          <span className="text-muted-foreground">@{user.username}</span>
          <span className="text-xs text-muted-foreground px-2 py-0.5 bg-secondary rounded-full capitalize">
            {user.role}
          </span>
        </div>

{/* Bio */}
        <p className="mt-3 text-sm leading-relaxed">{user.bio}</p>

{/* Website */}
        {user.website && (
          <a
            href={user.website}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-2 inline-flex items-center gap-1 text-sm text-gold hover:underline"
          >
            {user.website.replace(/^https?:\/\//, "")}
            <ExternalLink className="h-3 w-3" />
          </a>
        )}

{/* Stats */}
        <div className="flex items-center gap-6 mt-4">
          <button className="text-center">
            <div className="font-semibold">{formatNumber(user.followers)}</div>
            <div className="text-xs text-muted-foreground">Followers</div>
          </button>
          <button className="text-center">
            <div className="font-semibold">{formatNumber(user.following)}</div>
            <div className="text-xs text-muted-foreground">Following</div>
          </button>
          {user.role === "agency" && user.roster && (
            <div className="text-center">
              <div className="font-semibold">{user.roster.length}</div>
              <div className="text-xs text-muted-foreground">Talent</div>
            </div>
          )}
        </div>

{/* Action Buttons */}
        <div className="flex gap-3 mt-4 pb-4">
          {isOwnProfile ? (
            <Button
              variant="outline"
              className="flex-1 h-11 rounded-full border-border/50 bg-transparent hover:bg-secondary"
            >
              Edit Profile
            </Button>
          ) : (
            <>
              <Button
                onClick={onFollow}
                className={cn(
                  "flex-1 h-11 rounded-full",
                  isFollowing
                    ? "bg-transparent border border-border/50 text-foreground hover:bg-secondary"
                    : "bg-gold text-primary-foreground hover:bg-gold/90",
                )}
              >
                {isFollowing ? "Following" : "Follow"}
              </Button>
              <Button
                onClick={onMessage}
                variant="outline"
                className="flex-1 h-11 rounded-full border-border/50 bg-transparent hover:bg-secondary"
              >
                Message
              </Button>
              {(user.role === "model" || user.role === "agency") && onBook && (
                <Button
                  onClick={onBook}
                  className="h-11 px-6 rounded-full bg-gold text-primary-foreground hover:bg-gold/90"
                >
                  Book
                </Button>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-tabs.tsx"
"use client"

import { Grid3X3, Bookmark, Briefcase, Calendar } from "lucide-react"
import { cn } from "@/lib/utils"

export type ProfileTab = "posts" | "saved" | "portfolio" | "bookings"

interface ProfileTabsProps {
  activeTab: ProfileTab
  onTabChange: (tab: ProfileTab) => void
  isOwnProfile: boolean
  userRole: string
}

export function ProfileTabs({ activeTab, onTabChange, isOwnProfile, userRole }: ProfileTabsProps) {
  const tabs: { id: ProfileTab; icon: typeof Grid3X3; label: string; showFor?: string[] }[] = [
    { id: "posts", icon: Grid3X3, label: "Posts" },
    { id: "portfolio", icon: Briefcase, label: "Portfolio", showFor: ["model", "brand", "agency"] },
    { id: "bookings", icon: Calendar, label: "Bookings", showFor: ["model", "client"] },
    { id: "saved", icon: Bookmark, label: "Saved" },
  ]

const visibleTabs = tabs.filter((tab) => {
    if (tab.id === "saved" && !isOwnProfile) return false
    if (tab.showFor && !tab.showFor.includes(userRole)) return false
    return true
  })

return (
    <div className="flex border-b border-border/30">
      {visibleTabs.map((tab) => {
        const Icon = tab.icon
        const isActive = activeTab === tab.id

return (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={cn(
              "flex-1 flex items-center justify-center gap-2 py-3 border-b-2 transition-colors min-h-[44px]",
              isActive
                ? "border-gold text-foreground"
                : "border-transparent text-muted-foreground hover:text-foreground",
            )}
          >
            <Icon className="h-5 w-5" />
            <span className="text-sm font-medium hidden sm:inline">{tab.label}</span>
          </button>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-view.tsx"
"use client"

import { useState } from "react"
import { ProfileHeader } from "./profile-header"
import { ProfileTabs, type ProfileTab } from "./profile-tabs"
import { ProfileGrid } from "./profile-grid"
import { ModelCompCard } from "./model-comp-card"
import { AgencyRoster } from "./agency-roster"
import { AgencyCastings } from "./agency-castings"
import { mockPosts, mockUsers, getCurrentUser } from "@/lib/mock-data"
import { useStore } from "@/lib/store-context"
import { useAuth } from "@/lib/auth-context"
import { Button } from "@/components/ui/button"
import { Send, CheckCircle, Loader2 } from "lucide-react"
import { api } from "@/lib/api-client"

interface ProfileViewProps {
  userId?: string
  onBack: () => void
  onSettings: () => void
  onMessage: (userId: string) => void
  onBook?: (userId: string) => void
  onProfileClick: (userId: string) => void
  onViewCasting?: (casting: import("@/lib/types").Casting) => void
}

export function ProfileView({ userId, onBack, onSettings, onMessage, onBook, onProfileClick, onViewCasting }: ProfileViewProps) {
  const currentUser = getCurrentUser()
  const { user: authUser } = useAuth()
  const { getCastingsForCreator } = useStore()
  const profileUser = userId ? mockUsers.find((u) => u.id === userId) || currentUser : currentUser
  const isOwnProfile = profileUser.id === currentUser.id

const [isFollowing, setIsFollowing] = useState(false)
  const [activeTab, setActiveTab] = useState<ProfileTab>("posts")
  const [hasApplied, setHasApplied] = useState(false)
  const [applyLoading, setApplyLoading] = useState(false)

const userPosts = mockPosts.filter((p) => p.userId === profileUser.id)
  const savedPosts = mockPosts.filter((p) => p.bookmarked)

// Get roster models for agencies
  const rosterModels =
    profileUser.role === "agency" && profileUser.roster
      ? mockUsers.filter((u) => profileUser.roster?.includes(u.id))
      : []

// Get agency castings from store
  const agencyCastings = profileUser.role === "agency" ? getCastingsForCreator(profileUser.id) : []

// Show apply button if current user is a model viewing an agency profile
  const canApplyToAgency =
    !isOwnProfile &&
    profileUser.role === "agency" &&
    (authUser?.role === "model" || currentUser.role === "model")

return (
    <div className="min-h-screen pb-20">
      <ProfileHeader
        user={profileUser}
        isOwnProfile={isOwnProfile}
        isFollowing={isFollowing}
        onBack={onBack}
        onSettings={onSettings}
        onFollow={() => setIsFollowing(!isFollowing)}
        onMessage={() => onMessage(profileUser.id)}
        onBook={onBook ? () => onBook(profileUser.id) : undefined}
      />

{/* Model Comp Card */}
      {profileUser.role === "model" && profileUser.measurements && (
        <ModelCompCard measurements={profileUser.measurements} portfolio={profileUser.portfolio} />
      )}

{/* Apply to Agency Button */}
      {canApplyToAgency && (
        <div className="px-4 py-3 border-b border-border/30">
          {hasApplied ? (
            <div className="flex items-center justify-center gap-2 py-3 rounded-xl bg-emerald-500/10 text-emerald-400">
              <CheckCircle className="w-5 h-5" />
              <span className="font-medium">Application Sent</span>
            </div>
          ) : (
            <Button
              onClick={async () => {
                setApplyLoading(true)
                const res = await api.applyToAgency(profileUser.id)
                setApplyLoading(false)
                if (!res.error) setHasApplied(true)
              }}
              disabled={applyLoading}
              className="w-full h-12 rounded-xl bg-white text-black hover:bg-zinc-200 font-semibold text-base"
            >
              {applyLoading ? (
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              ) : (
                <Send className="w-4 h-4 mr-2" />
              )}
              Apply to {profileUser.name}
            </Button>
          )}
        </div>
      )}

{/* Agency Roster */}
      {profileUser.role === "agency" && rosterModels.length > 0 && (
        <AgencyRoster roster={rosterModels} onModelClick={onProfileClick} />
      )}

{/* Agency Castings */}
      {profileUser.role === "agency" && agencyCastings.length > 0 && (
        <AgencyCastings castings={agencyCastings} onViewCasting={onViewCasting} />
      )}

{activeTab === "posts" && <ProfileGrid posts={userPosts} onPostClick={() => {}} />}

{activeTab === "saved" && isOwnProfile && <ProfileGrid posts={savedPosts} onPostClick={() => {}} />}

{activeTab === "portfolio" && profileUser.role === "model" && profileUser.portfolio && (
        <ProfileGrid
          posts={profileUser.portfolio.map((img, i) => ({
            id: `portfolio-${i}`,
            userId: profileUser.id,
            user: profileUser,
            type: "photo" as const,
            media: [img],
            caption: "",
            likes: 0,
            comments: 0,
            bookmarked: false,
            liked: false,
            createdAt: new Date(),
            tags: [],
          }))}
          onPostClick={() => {}}
        />
      )}

{activeTab === "bookings" && (
        <div className="flex flex-col items-center justify-center py-16 px-6">
          <div className="w-16 h-16 rounded-full bg-secondary/50 flex items-center justify-center mb-4">
            <svg className="w-8 h-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
          </div>
          <h3 className="font-serif text-lg">Bookings</h3>
          <p className="text-sm text-muted-foreground mt-1">Manage your bookings in the marketplace</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/scoreboard/my-rank-card.tsx"
"use client"

import { motion } from "framer-motion"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { TrendingUp, Trophy, ChevronRight } from "lucide-react"
import type { User } from "@/lib/types"

interface MyRankCardProps {
  user: User
  onViewScoreboard: () => void
}

export function MyRankCard({ user, onViewScoreboard }: MyRankCardProps) {
  if (!user.metrics) return null

const getTierLabel = (tier: string) => {
    const labels: Record<string, string> = {
      top10: "Top 10",
      top50: "Top 50",
      top100: "Top 100",
      top500: "Top 500",
      rising: "Rising Star",
      new: "New",
    }
    return labels[tier] || tier
  }

const getTierColor = (tier: string) => {
    const colors: Record<string, string> = {
      top10: "from-amber-500 to-orange-500",
      top50: "from-slate-400 to-slate-500",
      top100: "from-amber-700 to-amber-800",
      rising: "from-emerald-500 to-teal-500",
    }
    return colors[tier] || "from-muted to-muted"
  }

return (
    <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }}>
      <Card
        className={`p-4 cursor-pointer hover:shadow-md transition-shadow bg-gradient-to-br ${getTierColor(user.metrics.rankTier)}`}
        onClick={onViewScoreboard}
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
              <Trophy className="w-5 h-5 text-white" />
            </div>
            <div>
              <p className="text-xs text-white/80">Your Rank</p>
              <div className="flex items-center gap-2">
                <span className="text-2xl font-bold text-white">#{user.metrics.rank}</span>
                <Badge className="bg-white/20 text-white border-0 text-[10px]">
                  {getTierLabel(user.metrics.rankTier)}
                </Badge>
              </div>
            </div>
          </div>

<div className="text-right">
            <div className="flex items-center gap-1 justify-end">
              {user.metrics.trend === "up" && <TrendingUp className="w-4 h-4 text-white" />}
              {user.metrics.trend === "down" && <TrendingUp className="w-4 h-4 text-white rotate-180" />}
              <span className="text-lg font-bold text-white">{user.metrics.luxlaneScore}</span>
            </div>
            <p className="text-[10px] text-white/70">Luxlane Score</p>
          </div>

<ChevronRight className="w-5 h-5 text-white/60 shrink-0 ml-2" />
        </div>
      </Card>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/scoreboard/scoreboard-view.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ArrowLeft, Trophy, TrendingUp, Star, Bookmark, Shirt, ImageIcon, ChevronRight } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { useAuth } from "@/lib/auth-context"
import { getModels } from "@/lib/mock-data"
import type { User } from "@/lib/types"

interface ScoreboardViewProps {
  onBack: () => void
  onViewProfile: (user: User) => void
}

export function ScoreboardView({ onBack, onViewProfile }: ScoreboardViewProps) {
  const { user } = useAuth()
  const [activeTab, setActiveTab] = useState<ScoreboardTab>("top")

const tabs: { id: ScoreboardTab; label: string; icon: React.ReactNode }[] = [
    { id: "top", label: "Top Models", icon: <Trophy className="w-4 h-4" /> },
    { id: "rising", label: "Rising", icon: <TrendingUp className="w-4 h-4" /> },
    { id: "booked", label: "Most Booked", icon: <Star className="w-4 h-4" /> },
    { id: "shortlisted", label: "Most Shortlisted", icon: <Bookmark className="w-4 h-4" /> },
    { id: "runway", label: "Best Runway", icon: <Shirt className="w-4 h-4" /> },
    { id: "editorial", label: "Best Editorial", icon: <ImageIcon className="w-4 h-4" /> },
  ]

// Get models for each tab
  const getModelsForTab = (): User[] => {
    const allModels = getModels()
    switch (activeTab) {
      case "top":
        return allModels.sort((a, b) => (b.metrics?.luxlaneScore || 0) - (a.metrics?.luxlaneScore || 0))
      case "rising":
        return allModels
          .filter((m) => m.metrics?.trend === "up")
          .sort((a, b) => (b.metrics?.trendChange || 0) - (a.metrics?.trendChange || 0))
      case "booked":
        return allModels.sort((a, b) => (b.metrics?.components.bookings || 0) - (a.metrics?.components.bookings || 0))
      case "shortlisted":
        return allModels.sort(
          (a, b) => (b.metrics?.components.shortlists || 0) - (a.metrics?.components.shortlists || 0),
        )
      case "runway":
        return allModels.filter((m) => m.tags?.includes("runway"))
      case "editorial":
        return allModels.filter((m) => m.tags?.includes("editorial"))
      default:
        return allModels
    }
  }

const models = getModelsForTab()

const getTierBadge = (tier: string) => {
    const tierStyles: Record<string, string> = {
      top10: "bg-gradient-to-r from-amber-500 to-orange-500 text-white",
      top50: "bg-gradient-to-r from-slate-400 to-slate-500 text-white",
      top100: "bg-gradient-to-r from-amber-700 to-amber-800 text-white",
      top500: "bg-muted text-muted-foreground",
      rising: "bg-gradient-to-r from-emerald-500 to-teal-500 text-white",
      new: "bg-muted text-muted-foreground",
    }

const tierLabels: Record<string, string> = {
      top10: "Top 10",
      top50: "Top 50",
      top100: "Top 100",
      top500: "Top 500",
      rising: "Rising",
      new: "New",
    }

return <Badge className={`text-[10px] ${tierStyles[tier] || ""}`}>{tierLabels[tier]}</Badge>
  }

// My Rank card for models
  const currentModel = user?.role === "model" ? user : null

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 flex items-center h-14 px-4 border-b border-border bg-background z-10">
        <Button variant="ghost" size="icon" onClick={onBack}>
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <h1 className="ml-2 font-semibold">Scoreboard</h1>
      </header>

{/* My Rank Card (for models) */}
      {currentModel && currentModel.metrics && (
        <div className="p-4">
          <Card className="p-4 bg-gradient-to-br from-muted/50 to-muted">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-muted-foreground">Your Rank</p>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-3xl font-bold">#{currentModel.metrics.rank}</span>
                  {getTierBadge(currentModel.metrics.rankTier)}
                </div>
              </div>
              <div className="text-right">
                <p className="text-xs text-muted-foreground">Luxlane Score</p>
                <p className="text-2xl font-bold">{currentModel.metrics.luxlaneScore}</p>
              </div>
            </div>

<div className="mt-3 pt-3 border-t border-border">
              <div className="flex items-center gap-2">
                {currentModel.metrics.trend === "up" ? (
                  <TrendingUp className="w-4 h-4 text-emerald-500" />
                ) : currentModel.metrics.trend === "down" ? (
                  <TrendingUp className="w-4 h-4 text-red-500 rotate-180" />
                ) : (
                  <div className="w-4 h-4 rounded-full bg-muted" />
                )}
                <span className="text-sm">
                  {currentModel.metrics.trend === "up" && `+${currentModel.metrics.trendChange} this month`}
                  {currentModel.metrics.trend === "down" && `-${currentModel.metrics.trendChange} this month`}
                  {currentModel.metrics.trend === "stable" && "Stable ranking"}
                </span>
              </div>
              <p className="text-xs text-muted-foreground mt-2">
                Need 2 more shortlists to reach {currentModel.metrics.rankTier === "top50" ? "Top 10" : "next tier"}
              </p>
            </div>
          </Card>
        </div>
      )}

{/* Tabs */}
      <div className="flex gap-2 overflow-x-auto px-4 py-2 no-scrollbar border-b border-border">
        {tabs.map((tab) => (
          <Button
            key={tab.id}
            variant={activeTab === tab.id ? "default" : "outline"}
            size="sm"
            onClick={() => setActiveTab(tab.id)}
            className="shrink-0 h-8 gap-1.5"
          >
            {tab.icon}
            {tab.label}
          </Button>
        ))}
      </div>

{/* Models List */}
      <AnimatePresence mode="wait">
        <motion.div
          key={activeTab}
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -10 }}
          className="p-4"
        >
          <div className="space-y-2">
            {models.map((model, index) => (
              <motion.div
                key={model.id}
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.03 }}
              >
                <Card
                  className="p-3 flex items-center gap-3 cursor-pointer hover:bg-muted/30 transition-colors"
                  onClick={() => onViewProfile(model)}
                >
                  {/* Rank */}
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0 ${
                      index < 3 ? "bg-gradient-to-br from-amber-500 to-orange-500 text-white" : "bg-muted"
                    }`}
                  >
                    {index + 1}
                  </div>

{/* Avatar */}
                  <Avatar className="w-10 h-10 shrink-0">
                    <AvatarImage src={model.avatar || "/placeholder.svg"} alt={model.name} />
                    <AvatarFallback>{model.name[0]}</AvatarFallback>
                  </Avatar>

{/* Info */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-1.5">
                      <span className="font-medium text-sm truncate">{model.name}</span>
                      {model.metrics && getTierBadge(model.metrics.rankTier)}
                    </div>
                    <div className="flex items-center gap-2 mt-0.5">
                      {model.metrics?.achievements.slice(0, 2).map((ach, i) => (
                        <Badge key={i} variant="secondary" className="text-[9px] h-4">
                          {ach}
                        </Badge>
                      ))}
                    </div>
                  </div>

{/* Score */}
                  <div className="text-right shrink-0">
                    <p className="text-lg font-bold">{model.metrics?.luxlaneScore || 0}</p>
                    <div className="flex items-center gap-0.5 justify-end">
                      {model.metrics?.trend === "up" && <TrendingUp className="w-3 h-3 text-emerald-500" />}
                      {model.metrics?.trend === "down" && <TrendingUp className="w-3 h-3 text-red-500 rotate-180" />}
                      <span
                        className={`text-[10px] ${
                          model.metrics?.trend === "up"
                            ? "text-emerald-500"
                            : model.metrics?.trend === "down"
                              ? "text-red-500"
                              : "text-muted-foreground"
                        }`}
                      >
                        {model.metrics?.trend === "up" && `+${model.metrics.trendChange}`}
                        {model.metrics?.trend === "down" && `-${model.metrics.trendChange}`}
                      </span>
                    </div>
                  </div>

<ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
                </Card>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/settings/membership-card.tsx"
"use client"

import { Check, Crown, Star, Sparkles } from "lucide-react"
import type { MembershipTier } from "@/lib/types"
import { cn } from "@/lib/utils"

interface MembershipCardProps {
  tier: MembershipTier
  isCurrentTier: boolean
  onSelect: () => void
}

const tierConfig = {
  free: {
    name: "Free",
    price: 0,
    icon: Star,
    color: "text-muted-foreground",
    bgColor: "bg-secondary/50",
    borderColor: "border-border/50",
    features: ["Basic profile", "Browse feed", "Send 5 messages/day", "Standard visibility"],
  },
  elite: {
    name: "Elite",
    price: 49,
    icon: Crown,
    color: "text-gold",
    bgColor: "bg-gold/10",
    borderColor: "border-gold/50",
    features: [
      "Verified badge",
      "Priority in search",
      "Unlimited messaging",
      "Analytics dashboard",
      "Direct booking requests",
    ],
  },
  black: {
    name: "Black",
    price: 199,
    icon: Sparkles,
    color: "text-foreground",
    bgColor: "bg-foreground/5",
    borderColor: "border-foreground/50",
    features: [
      "Everything in Elite",
      "Exclusive events access",
      "Priority support",
      "Featured profile placement",
      "Early access to new features",
      "White-glove concierge",
    ],
  },
}

export function MembershipCard({ tier, isCurrentTier, onSelect }: MembershipCardProps) {
  const config = tierConfig[tier]
  const Icon = config.icon

return (
    <button
      onClick={onSelect}
      disabled={isCurrentTier}
      className={cn(
        "w-full p-5 rounded-2xl border text-left transition-all relative overflow-hidden",
        config.bgColor,
        config.borderColor,
        isCurrentTier ? "ring-2 ring-gold" : "hover:scale-[1.02]",
      )}
    >
      {isCurrentTier && (
        <div className="absolute top-3 right-3 px-2 py-1 bg-gold text-primary-foreground text-[10px] font-bold rounded">
          CURRENT
        </div>
      )}

{tier === "black" && (
        <div className="absolute inset-0 opacity-10">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage: `radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0)`,
              backgroundSize: "16px 16px",
            }}
          />
        </div>
      )}

<div className="relative">
        <div className="flex items-center gap-3 mb-4">
          <div className={cn("w-10 h-10 rounded-xl flex items-center justify-center", config.bgColor)}>
            <Icon className={cn("h-5 w-5", config.color)} />
          </div>
          <div>
            <h3 className={cn("font-serif text-xl font-medium", config.color)}>{config.name}</h3>
            <p className="text-sm text-muted-foreground">
              {config.price === 0 ? "Free forever" : `$${config.price}/month`}
            </p>
          </div>
        </div>

<ul className="space-y-2">
          {config.features.map((feature, index) => (
            <li key={index} className="flex items-center gap-2 text-sm">
              <Check className={cn("h-4 w-4 flex-shrink-0", config.color)} />
              <span>{feature}</span>
            </li>
          ))}
        </ul>
      </div>
    </button>
  )
}
[V0_FILE]typescriptreact:file="components/settings/settings-view.tsx"
"use client"

import { useState, useEffect } from "react"
import {
  ArrowLeft,
  User,
  Bell,
  Shield,
  HelpCircle,
  LogOut,
  ChevronRight,
  Moon,
  Sun,
  Monitor,
  RefreshCw,
  Sparkles,
  Database,
  BadgeCheck,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { useAuth } from "@/lib/auth-context"
import { useTheme } from "@/lib/theme-context"
import { useStore } from "@/lib/store-context"
import { useSettings } from "@/lib/hooks/use-settings"
import type { UserRole, VerificationLevel } from "@/lib/types"
import { ModerationDashboard } from "@/components/admin/moderation-dashboard"

interface SettingsViewProps {
  onBack: () => void
  onOpenVerification?: () => void
}

export function SettingsView({ onBack, onOpenVerification }: SettingsViewProps) {
  const { user, logout, updateUser } = useAuth()
  const { theme, setTheme } = useTheme()
  const { settings: apiSettings, updateSettings } = useSettings()
  const { getCastings, getActiveCastings, getApplications, reseed } = useStore()
  const [section, setSection] = useState<SettingsSection>("main")
  const [notifications, setNotifications] = useState({
    castingAlerts: true,
    messageAlerts: true,
    offerAlerts: true,
    emailDigest: false,
  })

// Sync theme and notifications from API when settings load
  useEffect(() => {
    if (!apiSettings) return
    if (apiSettings.darkMode !== undefined) {
      setTheme(apiSettings.darkMode ? "dark" : "light")
    }
    const push = apiSettings.pushNotifs ?? apiSettings.notifications?.push ?? true
    const email = apiSettings.emailNotifs ?? apiSettings.notifications?.email ?? false
    setNotifications((prev) => ({
      ...prev,
      castingAlerts: push,
      messageAlerts: push,
      offerAlerts: push,
      emailDigest: email,
    }))
  }, [apiSettings?.userId])

const handleThemeChange = (value: "light" | "dark" | "system") => {
    setTheme(value)
    updateSettings({ darkMode: value === "dark" }).catch(() => {})
  }

const handleNotificationToggle = (key: string, value: boolean) => {
    setNotifications((prev) => ({ ...prev, [key]: value }))
    if (key === "emailDigest") {
      updateSettings({ emailNotifs: value }).catch(() => {})
    } else {
      updateSettings({ pushNotifs: value }).catch(() => {})
    }
  }

const handleLogout = () => {
    logout()
    onBack()
  }

const handleRoleSwitch = (role: UserRole) => {
    updateUser({ role })
  }

const handleVerificationSwitch = (level: VerificationLevel) => {
    updateUser({
      verificationLevel: level,
      verified: level !== "unverified",
    })
  }

const simulateBooking = () => {
    if (!user?.metrics) return
    updateUser({
      metrics: {
        ...user.metrics,
        luxlaneScore: Math.min(100, user.metrics.luxlaneScore + 5),
        components: {
          ...user.metrics.components,
          bookings: user.metrics.components.bookings + 1,
        },
        trend: "up" as const,
        trendChange: user.metrics.trendChange + 2,
      },
    })
  }

const simulateShortlist = () => {
    if (!user?.metrics) return
    updateUser({
      metrics: {
        ...user.metrics,
        luxlaneScore: Math.min(100, user.metrics.luxlaneScore + 2),
        components: {
          ...user.metrics.components,
          shortlists: user.metrics.components.shortlists + 1,
        },
        trend: "up" as const,
        trendChange: user.metrics.trendChange + 1,
      },
    })
  }

const roles: { value: UserRole; label: string }[] = [
    { value: "model", label: "Model" },
    { value: "agency", label: "Agency" },
    { value: "brand", label: "Brand" },
    { value: "client", label: "Client" },
  ]

const verificationLevels: { value: VerificationLevel; label: string }[] = [
    { value: "unverified", label: "Unverified" },
    { value: "agency_verified", label: "Agency" },
    { value: "luxlane_verified", label: "Luxlane" },
  ]

const menuItems = [
    { id: "account" as const, icon: User, label: "Account", description: "Profile and preferences" },
    { id: "notifications" as const, icon: Bell, label: "Notifications", description: "Alerts and updates" },
    { id: "privacy" as const, icon: Shield, label: "Privacy", description: "Visibility and data" },
    { id: "help" as const, icon: HelpCircle, label: "Help", description: "Support and feedback" },
  ]

const themeOptions = [
    { value: "light" as const, label: "Light", icon: Sun },
    { value: "dark" as const, label: "Dark", icon: Moon },
    { value: "system" as const, label: "System", icon: Monitor },
  ]

const allCastings = getCastings()
  const activeCastings = getActiveCastings()
  const allApplications = getApplications()

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 flex items-center h-14 px-4 border-b border-border bg-background z-10">
        <Button variant="ghost" size="icon" onClick={section === "main" ? onBack : () => setSection("main")}>
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <h1 className="ml-2 font-semibold">
          {section === "main" && "Settings"}
          {section === "account" && "Account"}
          {section === "notifications" && "Notifications"}
          {section === "privacy" && "Privacy"}
          {section === "help" && "Help"}
          {section === "dev" && "Dev Panel"}
          {section === "moderation" && "Moderation"}
        </h1>
      </header>

{section === "main" && (
        <div className="p-4">
          {/* User Info */}
          <div className="flex items-center gap-3 p-4 rounded-xl bg-muted/50 mb-6">
            <img
              src={user?.avatar || "/placeholder.svg"}
              alt={user?.name}
              className="w-12 h-12 rounded-full object-cover"
            />
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <h2 className="font-medium">{user?.name || "User"}</h2>
                {user?.verified && <BadgeCheck className="w-4 h-4" />}
              </div>
              <p className="text-sm text-muted-foreground">@{user?.username || "username"}</p>
            </div>
            <Badge variant="secondary" className="capitalize">
              {user?.role}
            </Badge>
          </div>

{/* Verification (Model only) */}
          {user?.role === "model" && (
            <div className="space-y-2 mb-6">
              <button
                onClick={onOpenVerification}
                className="w-full flex items-center gap-3 p-3 rounded-lg hover:bg-muted/50 transition-colors"
              >
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center ${
                    user.verificationLevel === "luxlane_verified" ? "bg-emerald-500/10" : "bg-muted"
                  }`}
                >
                  <Shield
                    className={`w-5 h-5 ${
                      user.verificationLevel === "luxlane_verified" ? "text-emerald-500" : "text-muted-foreground"
                    }`}
                  />
                </div>
                <div className="flex-1 text-left">
                  <div className="font-medium text-sm">Verification</div>
                  <div className="text-xs text-muted-foreground capitalize">
                    {user.verificationLevel === "luxlane_verified"
                      ? "Luxlane Verified"
                      : user.verificationLevel === "agency_verified"
                        ? "Agency Verified"
                        : "Get verified"}
                  </div>
                </div>
                <ChevronRight className="h-4 w-4 text-muted-foreground" />
              </button>

</div>
          )}

{/* Menu */}
          <div className="space-y-1">
            {menuItems.map((item) => {
              const Icon = item.icon
              return (
                <button
                  key={item.id}
                  onClick={() => setSection(item.id)}
                  className="w-full flex items-center gap-3 p-3 rounded-lg hover:bg-muted/50 transition-colors"
                >
                  <Icon className="h-5 w-5 text-muted-foreground" />
                  <div className="flex-1 text-left">
                    <div className="font-medium text-sm">{item.label}</div>
                    <div className="text-xs text-muted-foreground">{item.description}</div>
                  </div>
                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
                </button>
              )
            })}
          </div>

{/* Moderation (brand/agency only) */}
          {(user?.role === "brand" || user?.role === "agency") && (
            <div className="mt-6">
              <button
                onClick={() => setSection("moderation")}
                className="w-full flex items-center gap-3 p-3 rounded-lg hover:bg-muted/50 transition-colors"
              >
                <Shield className="h-5 w-5 text-muted-foreground" />
                <div className="flex-1 text-left">
                  <div className="font-medium text-sm">Moderation</div>
                  <div className="text-xs text-muted-foreground">Review user reports</div>
                </div>
                <ChevronRight className="h-4 w-4 text-muted-foreground" />
              </button>
            </div>
          )}

{/* Appearance */}
          <div className="mt-8">
            <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3 px-1">Appearance</h3>
            <div className="flex gap-2">
              {themeOptions.map((option) => {
                const Icon = option.icon
                return (
                <button
                  key={option.value}
                  onClick={() => handleThemeChange(option.value)}
                  className={`flex-1 flex flex-col items-center gap-2 p-3 rounded-lg border transition-colors ${
                    theme === option.value ? "border-foreground bg-muted/50" : "border-border hover:bg-muted/30"
                  }`}
                >
                    <Icon className="h-5 w-5" />
                    <span className="text-xs">{option.label}</span>
                  </button>
                )
              })}
            </div>
          </div>

{/* Dev Panel Button */}
          <button
            onClick={() => setSection("dev")}
            className="w-full flex items-center gap-3 p-3 rounded-lg mt-8 border border-dashed border-amber-500/50 hover:bg-amber-500/5 transition-colors"
          >
            <Database className="h-5 w-5 text-amber-500" />
            <div className="flex-1 text-left">
              <div className="font-medium text-sm">Dev Panel</div>
              <div className="text-xs text-muted-foreground">Testing & simulation tools</div>
            </div>
            <Badge className="bg-amber-500/10 text-amber-600 border-0">DEV</Badge>
          </button>

{/* Logout */}
          <Button onClick={handleLogout} variant="outline" className="w-full mt-6 h-11 bg-transparent">
            <LogOut className="mr-2 h-4 w-4" />
            Sign Out
          </Button>

<p className="text-center text-xs text-muted-foreground mt-6">Luxlane v2.0.0</p>
        </div>
      )}

{/* Dev Panel */}
      {section === "dev" && (
        <div className="p-4 space-y-6">
          {/* Account Info */}
          <div>
            <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3 px-1 flex items-center gap-2">
              <Shield className="w-3 h-3" />
              Account Info
            </h3>
            <Card className="p-4 space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Role</span>
                <span className="font-medium capitalize">{user?.role}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Verification</span>
                <span className="font-medium capitalize">{user?.verificationLevel?.replace("_", " ") || "Unverified"}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Username</span>
                <span className="font-medium">@{user?.username}</span>
              </div>
            </Card>
            <p className="text-xs text-muted-foreground mt-2 px-1">
              Role and verification are set at account creation and cannot be changed.
            </p>
          </div>

<div>
            <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3 px-1 flex items-center gap-2">
              <Database className="w-3 h-3" />
              Store Debug
            </h3>
            <Card className="p-4">
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Total Castings</span>
                  <span className="font-medium">{allCastings.length}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Active Castings</span>
                  <span className="font-medium text-emerald-500">{activeCastings.length}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Total Applications</span>
                  <span className="font-medium">{allApplications.length}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Current Role</span>
                  <span className="font-medium capitalize">{user?.role}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Current User ID</span>
                  <span className="font-medium font-mono text-xs">{user?.id}</span>
                </div>
              </div>

{/* First 5 castings table */}
              <div className="mt-4 pt-4 border-t border-border">
                <p className="text-xs font-medium text-muted-foreground mb-2">First 5 Castings</p>
                <div className="space-y-1.5 text-xs">
                  {allCastings.slice(0, 5).map((c) => (
                    <div key={c.id} className="flex items-center gap-2 p-2 bg-muted/50 rounded">
                      <span className="font-mono text-muted-foreground">{c.id}</span>
                      <Badge
                        variant="outline"
                        className={c.status === "active" ? "bg-emerald-500/10 text-emerald-600" : ""}
                      >
                        {c.status}
                      </Badge>
                      <span className="truncate flex-1">{c.title}</span>
                    </div>
                  ))}
                </div>
              </div>
            </Card>

{/* Reseed Button */}
            <Button variant="outline" className="w-full mt-3 bg-transparent border-dashed" onClick={reseed}>
              <RefreshCw className="w-4 h-4 mr-2" />
              Reseed Data
            </Button>
          </div>

{/* Current State */}
          {user?.metrics && (
            <Card className="p-4">
              <h3 className="font-semibold text-sm mb-3">User Metrics</h3>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Verification</span>
                  <span className="font-medium capitalize">{user.verificationLevel.replace("_", " ")}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Luxlane Score</span>
                  <span className="font-medium">{user.metrics.luxlaneScore}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Rank</span>
                  <span className="font-medium">#{user.metrics.rank}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Bookings</span>
                  <span className="font-medium">{user.metrics.components.bookings}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Shortlists</span>
                  <span className="font-medium">{user.metrics.components.shortlists}</span>
                </div>
              </div>
            </Card>
          )}
        </div>
      )}

{/* Other sections remain the same */}
      {section === "account" && (
        <div className="p-4 space-y-1">
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Edit Profile</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </button>
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Change Email</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </button>
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Change Password</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </button>
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50 text-destructive">
            <span className="text-sm">Delete Account</span>
            <ChevronRight className="h-4 w-4" />
          </button>
        </div>
      )}

{section === "notifications" && (
        <div className="p-4 space-y-4">
          {Object.entries(notifications).map(([key, value]) => {
            const labels: Record<string, { title: string; desc: string }> = {
              castingAlerts: { title: "Casting Alerts", desc: "New castings matching your profile" },
              messageAlerts: { title: "Messages", desc: "New messages from brands & agencies" },
              offerAlerts: { title: "Job Offers", desc: "When you receive an offer" },
              emailDigest: { title: "Email Digest", desc: "Weekly summary of activity" },
            }
            return (
              <div key={key} className="flex items-center justify-between py-2">
                <div>
                  <p className="text-sm font-medium">{labels[key].title}</p>
                  <p className="text-xs text-muted-foreground">{labels[key].desc}</p>
                </div>
                <Switch
                  checked={value}
                  onCheckedChange={(checked) => handleNotificationToggle(key, checked)}
                />
              </div>
            )
          })}
        </div>
      )}

{section === "privacy" && (
        <div className="p-4 space-y-1">
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Profile Visibility</span>
            <div className="flex items-center gap-2 text-muted-foreground">
              <span className="text-xs">Public</span>
              <ChevronRight className="h-4 w-4" />
            </div>
          </button>
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Blocked Accounts</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </button>
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Download My Data</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </button>
        </div>
      )}

{section === "help" && (
        <div className="p-4 space-y-1">
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">FAQ</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </button>
          <button className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Contact Support</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </button>
          <a href="/terms" className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Terms of Service</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </a>
          <a href="/privacy" className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-muted/50">
            <span className="text-sm">Privacy Policy</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </a>
        </div>
      )}

{section === "moderation" && <ModerationDashboard />}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/stories/create-story-sheet.tsx"
"use client"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet"
import { api } from "@/lib/api-client"
import {
  Camera,
  ImageIcon,
  Video,
  X,
  Send,
  Type,
  Loader2,
  ArrowLeft,
} from "lucide-react"

interface CreateStorySheetProps {
  open: boolean
  onClose: () => void
  onCreated: () => void
}

type StoryStep = "pick" | "preview" | "posting"

export function CreateStorySheet({ open, onClose, onCreated }: CreateStorySheetProps) {
  const [step, setStep] = useState<StoryStep>("pick")
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
  const [mediaType, setMediaType] = useState<"IMAGE" | "VIDEO">("IMAGE")
  const [caption, setCaption] = useState("")
  const [showCaption, setShowCaption] = useState(false)
  const [posting, setPosting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const cameraInputRef = useRef<HTMLInputElement>(null)

const reset = () => {
    setStep("pick")
    setSelectedFile(null)
    setPreviewUrl(null)
    setCaption("")
    setShowCaption(false)
    setPosting(false)
    setError(null)
    setMediaType("IMAGE")
  }

const handleClose = () => {
    reset()
    onClose()
  }

const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

// Validate file type
    const isImage = file.type.startsWith("image/")
    const isVideo = file.type.startsWith("video/")
    if (!isImage && !isVideo) {
      setError("Please select an image or video file")
      return
    }

// Validate file size (50MB max for video, 10MB for image)
    const maxSize = isVideo ? 50 * 1024 * 1024 : 10 * 1024 * 1024
    if (file.size > maxSize) {
      setError(`File too large. Max ${isVideo ? "50MB" : "10MB"}`)
      return
    }

setError(null)
    setSelectedFile(file)
    setMediaType(isVideo ? "VIDEO" : "IMAGE")
    setPreviewUrl(URL.createObjectURL(file))
    setStep("preview")
  }

const handlePost = async () => {
    if (!selectedFile) return
    setPosting(true)
    setError(null)

try {
      // Upload the file
      const formData = new FormData()
      formData.append("file", selectedFile)
      formData.append("type", "story")

const uploadRes = await fetch("/api/media/upload", {
        method: "POST",
        credentials: "include",
        body: formData,
      })

let mediaUrl: string

if (uploadRes.ok) {
        const uploadData = await uploadRes.json()
        mediaUrl = uploadData.url
      } else {
        // If upload fails, store locally as data URL
        const reader = new FileReader()
        mediaUrl = await new Promise<string>((resolve) => {
          reader.onload = () => resolve(reader.result as string)
          reader.readAsDataURL(selectedFile)
        })
      }

// Create the story
      const res = await api.createStory({
        mediaUrl,
        mediaType: mediaType,
        caption: caption.trim() || undefined,
      })

if (res.error) {
        setError("Failed to post story. Try again.")
        setPosting(false)
        return
      }

setPosting(false)
      handleClose()
      onCreated()
    } catch {
      setError("Something went wrong. Try again.")
      setPosting(false)
    }
  }

return (
    <Sheet open={open} onOpenChange={(v) => !v && handleClose()}>
      <SheetContent side="bottom" className="h-[100dvh] p-0 rounded-none border-0 bg-black">
        <SheetHeader className="sr-only">
          <SheetTitle>Create Story</SheetTitle>
          <SheetDescription>Upload a photo or video to share as a story</SheetDescription>
        </SheetHeader>
        {/* Hidden file inputs */}
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*,video/*"
          className="hidden"
          onChange={handleFileSelect}
        />
        <input
          ref={cameraInputRef}
          type="file"
          accept="image/*,video/*"
          capture="environment"
          className="hidden"
          onChange={handleFileSelect}
        />

{step === "pick" && (
          <div className="flex flex-col h-full">
            {/* Header */}
            <div className="flex items-center justify-between p-4">
              <button type="button" onClick={handleClose}>
                <X className="w-6 h-6 text-white" />
              </button>
              <h2 className="text-white font-semibold text-lg">New Story</h2>
              <div className="w-6" />
            </div>

{/* Media picker options */}
            <div className="flex-1 flex flex-col items-center justify-center gap-6 px-8">
              <p className="text-zinc-400 text-sm text-center mb-4">
                Share a moment with your followers
              </p>

{/* Camera */}
              <button
                type="button"
                onClick={() => cameraInputRef.current?.click()}
                className="w-full flex items-center gap-4 p-5 rounded-2xl bg-zinc-900 hover:bg-zinc-800 transition-colors"
              >
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
                  <Camera className="w-7 h-7 text-white" />
                </div>
                <div className="text-left">
                  <p className="text-white font-medium">Take Photo or Video</p>
                  <p className="text-zinc-400 text-sm">Use your camera</p>
                </div>
              </button>

{/* Gallery - Photo */}
              <button
                type="button"
                onClick={() => {
                  if (fileInputRef.current) {
                    fileInputRef.current.accept = "image/*"
                    fileInputRef.current.click()
                  }
                }}
                className="w-full flex items-center gap-4 p-5 rounded-2xl bg-zinc-900 hover:bg-zinc-800 transition-colors"
              >
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
                  <ImageIcon className="w-7 h-7 text-white" />
                </div>
                <div className="text-left">
                  <p className="text-white font-medium">Choose Photo</p>
                  <p className="text-zinc-400 text-sm">Select from gallery</p>
                </div>
              </button>

{/* Gallery - Video */}
              <button
                type="button"
                onClick={() => {
                  if (fileInputRef.current) {
                    fileInputRef.current.accept = "video/*"
                    fileInputRef.current.click()
                  }
                }}
                className="w-full flex items-center gap-4 p-5 rounded-2xl bg-zinc-900 hover:bg-zinc-800 transition-colors"
              >
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
                  <Video className="w-7 h-7 text-white" />
                </div>
                <div className="text-left">
                  <p className="text-white font-medium">Choose Video</p>
                  <p className="text-zinc-400 text-sm">Select from gallery</p>
                </div>
              </button>

{error && (
                <p className="text-red-400 text-sm text-center">{error}</p>
              )}
            </div>
          </div>
        )}

{step === "preview" && previewUrl && (
          <div className="flex flex-col h-full">
            {/* Header */}
            <div className="flex items-center justify-between p-4 absolute top-0 left-0 right-0 z-10">
              <button type="button" onClick={() => { setStep("pick"); setPreviewUrl(null); setSelectedFile(null) }}>
                <ArrowLeft className="w-6 h-6 text-white drop-shadow-lg" />
              </button>
              <div className="flex items-center gap-3">
                <button
                  type="button"
                  onClick={() => setShowCaption(!showCaption)}
                  className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors ${showCaption ? "bg-white text-black" : "bg-black/40 text-white backdrop-blur-sm"}`}
                >
                  <Type className="w-5 h-5" />
                </button>
              </div>
            </div>

{/* Media preview */}
            <div className="flex-1 flex items-center justify-center bg-black relative">
              {mediaType === "IMAGE" ? (
                <img
                  src={previewUrl}
                  alt="Story preview"
                  className="max-w-full max-h-full object-contain"
                />
              ) : (
                <video
                  src={previewUrl}
                  className="max-w-full max-h-full object-contain"
                  controls
                  autoPlay
                  muted
                  loop
                />
              )}

{/* Caption overlay */}
              {showCaption && (
                <div className="absolute bottom-24 left-4 right-4">
                  <Input
                    value={caption}
                    onChange={(e) => setCaption(e.target.value)}
                    placeholder="Add a caption..."
                    className="bg-black/60 backdrop-blur-md border-white/20 text-white placeholder:text-white/50 rounded-full px-4 h-12"
                    maxLength={200}
                    autoFocus
                  />
                </div>
              )}
            </div>

{/* Bottom action bar */}
            <div className="p-4 pb-8 flex items-center gap-3">
              <Input
                value={caption}
                onChange={(e) => setCaption(e.target.value)}
                placeholder="Add a caption..."
                className="flex-1 bg-zinc-900 border-zinc-700 text-white placeholder:text-zinc-500 rounded-full px-4 h-12"
                maxLength={200}
                onKeyDown={(e) => e.key === "Enter" && handlePost()}
              />
              <Button
                onClick={handlePost}
                disabled={posting}
                className="h-12 w-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 p-0"
              >
                {posting ? (
                  <Loader2 className="w-5 h-5 animate-spin" />
                ) : (
                  <Send className="w-5 h-5" />
                )}
              </Button>
            </div>

{error && (
              <p className="text-red-400 text-sm text-center pb-4">{error}</p>
            )}
          </div>
        )}
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="components/stories/story-bar.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Plus } from "lucide-react"
import { api } from "@/lib/api-client"

interface StoryUser {
  userId: string
  username: string
  name: string
  avatar: string | null
  isOwn: boolean
  hasUnviewed: boolean
  stories: {
    id: string
    mediaUrl: string
    mediaType: string
    caption: string | null
    viewCount: number
    viewed: boolean
    createdAt: string
    expiresAt: string
  }[]
}

interface StoryBarProps {
  onViewStories: (user: StoryUser) => void
  onCreateStory: () => void
}

export function StoryBar({ onViewStories, onCreateStory }: StoryBarProps) {
  const [feed, setFeed] = useState<StoryUser[]>([])
  const [loading, setLoading] = useState(true)

const fetchStories = useCallback(async () => {
    const res = await api.getStoryFeed()
    const data = res.data as { feed?: StoryUser[] } | undefined
    if (data?.feed) {
      setFeed(data.feed)
    }
    setLoading(false)
  }, [])

useEffect(() => {
    fetchStories()
  }, [fetchStories])

if (loading) {
    return (
      <div className="flex gap-3 px-4 py-3 overflow-x-auto no-scrollbar">
        {[1, 2, 3, 4, 5].map((i) => (
          <div key={i} className="flex flex-col items-center gap-1 shrink-0">
            <div className="w-16 h-16 rounded-full bg-muted animate-pulse" />
            <div className="w-10 h-2 bg-muted rounded animate-pulse" />
          </div>
        ))}
      </div>
    )
  }

const hasOwnStory = feed.some((u) => u.isOwn)

return (
    <div className="flex gap-3 px-4 py-3 overflow-x-auto no-scrollbar">
      {/* Add story button (shown if user has no active story) */}
      {!hasOwnStory && (
        <button
          type="button"
          className="flex flex-col items-center gap-1 shrink-0"
          onClick={onCreateStory}
        >
          <div className="w-16 h-16 rounded-full bg-muted/50 border-2 border-dashed border-muted-foreground/30 flex items-center justify-center">
            <Plus className="w-6 h-6 text-muted-foreground" />
          </div>
          <span className="text-[10px] text-muted-foreground">Your story</span>
        </button>
      )}

{/* Story avatars */}
      {feed.map((user) => (
        <button
          key={user.userId}
          type="button"
          className="flex flex-col items-center gap-1 shrink-0"
          onClick={() => onViewStories(user)}
        >
          <div
            className={`w-16 h-16 rounded-full p-[2px] ${
              user.hasUnviewed
                ? "bg-gradient-to-tr from-amber-500 via-pink-500 to-purple-500"
                : "bg-muted-foreground/30"
            }`}
          >
            <div className="w-full h-full rounded-full bg-background p-[2px]">
              <Avatar className="w-full h-full">
                <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
                <AvatarFallback className="text-xs">{user.name[0]}</AvatarFallback>
              </Avatar>
            </div>
          </div>
          <span className="text-[10px] text-muted-foreground truncate max-w-[64px]">
            {user.isOwn ? "Your story" : user.username}
          </span>
        </button>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/stories/story-highlights.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import { Plus } from "lucide-react"

interface HighlightItem {
  id: string
  title: string
  coverUrl: string | null
  storyCount: number
}

interface StoryHighlightsProps {
  userId: string
  isOwn: boolean
  onViewHighlight?: (highlight: HighlightItem) => void
  onCreateHighlight?: () => void
}

export function StoryHighlights({ userId, isOwn, onViewHighlight, onCreateHighlight }: StoryHighlightsProps) {
  const [highlights, setHighlights] = useState<HighlightItem[]>([])

const fetchHighlights = useCallback(async () => {
    const res = await fetch(`/api/highlights?userId=${userId}`, { credentials: "include" })
    if (res.ok) {
      const data = await res.json()
      if (data.highlights) setHighlights(data.highlights)
    }
  }, [userId])

useEffect(() => {
    fetchHighlights()
  }, [fetchHighlights])

if (highlights.length === 0 && !isOwn) return null

return (
    <div className="flex gap-3 overflow-x-auto no-scrollbar py-2">
      {isOwn && (
        <button
          type="button"
          className="flex flex-col items-center gap-1 shrink-0"
          onClick={onCreateHighlight}
        >
          <div className="w-16 h-16 rounded-full bg-muted/50 border border-dashed border-muted-foreground/30 flex items-center justify-center">
            <Plus className="w-5 h-5 text-muted-foreground" />
          </div>
          <span className="text-[10px] text-muted-foreground">New</span>
        </button>
      )}
      {highlights.map((h) => (
        <button
          key={h.id}
          type="button"
          className="flex flex-col items-center gap-1 shrink-0"
          onClick={() => onViewHighlight?.(h)}
        >
          <div className="w-16 h-16 rounded-full border border-muted-foreground/30 overflow-hidden bg-muted">
            {h.coverUrl ? (
              <img src={h.coverUrl} alt={h.title} className="w-full h-full object-cover" />
            ) : (
              <div className="w-full h-full flex items-center justify-center text-lg font-bold text-muted-foreground">
                {h.title[0]}
              </div>
            )}
          </div>
          <span className="text-[10px] text-muted-foreground truncate max-w-[64px]">{h.title}</span>
        </button>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/stories/story-viewer.tsx"
"use client"

import { useState, useEffect, useCallback, useRef } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { X, ChevronLeft, ChevronRight, Eye, Pause, Play } from "lucide-react"
import { formatDistanceToNow } from "date-fns"
import { api } from "@/lib/api-client"

interface StoryItem {
  id: string
  mediaUrl: string
  mediaType: string
  caption: string | null
  viewCount: number
  viewed: boolean
  createdAt: string
  expiresAt: string
}

interface StoryViewerProps {
  user: {
    userId: string
    username: string
    name: string
    avatar: string | null
    isOwn: boolean
    stories: StoryItem[]
  }
  onClose: () => void
  onNext?: () => void
  onPrev?: () => void
}

const STORY_DURATION = 5000 // 5 seconds per story

export function StoryViewer({ user, onClose, onNext, onPrev }: StoryViewerProps) {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [progress, setProgress] = useState(0)
  const [paused, setPaused] = useState(false)
  const timerRef = useRef<NodeJS.Timeout | null>(null)
  const startTimeRef = useRef<number>(Date.now())
  const progressRef = useRef<number>(0)

const story = user.stories[currentIndex]

const markViewed = useCallback(async (storyId: string) => {
    await api.viewStory(storyId)
  }, [])

useEffect(() => {
    if (story && !user.isOwn) {
      markViewed(story.id)
    }
  }, [story, user.isOwn, markViewed])

const goNext = useCallback(() => {
    if (currentIndex < user.stories.length - 1) {
      setCurrentIndex((i) => i + 1)
      setProgress(0)
      progressRef.current = 0
    } else {
      onNext ? onNext() : onClose()
    }
  }, [currentIndex, user.stories.length, onNext, onClose])

const goPrev = useCallback(() => {
    if (currentIndex > 0) {
      setCurrentIndex((i) => i - 1)
      setProgress(0)
      progressRef.current = 0
    } else {
      onPrev?.()
    }
  }, [currentIndex, onPrev])

// Auto-advance timer
  useEffect(() => {
    if (paused) return

startTimeRef.current = Date.now() - progressRef.current * STORY_DURATION

const interval = setInterval(() => {
      const elapsed = Date.now() - startTimeRef.current
      const pct = Math.min(elapsed / STORY_DURATION, 1)
      setProgress(pct)
      progressRef.current = pct

if (pct >= 1) {
        clearInterval(interval)
        goNext()
      }
    }, 30)

timerRef.current = interval
    return () => clearInterval(interval)
  }, [currentIndex, paused, goNext])

// Keyboard navigation
  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "ArrowRight") goNext()
      else if (e.key === "ArrowLeft") goPrev()
      else if (e.key === "Escape") onClose()
      else if (e.key === " ") {
        e.preventDefault()
        setPaused((p) => !p)
      }
    }
    window.addEventListener("keydown", handleKey)
    return () => window.removeEventListener("keydown", handleKey)
  }, [goNext, goPrev, onClose])

if (!story) return null

return (
    <div className="fixed inset-0 z-[60] bg-black flex items-center justify-center">
      {/* Progress bars */}
      <div className="absolute top-0 left-0 right-0 flex gap-1 p-2 z-10">
        {user.stories.map((_, i) => (
          <div key={i} className="flex-1 h-0.5 bg-white/30 rounded-full overflow-hidden">
            <div
              className="h-full bg-white rounded-full transition-none"
              style={{
                width: `${i < currentIndex ? 100 : i === currentIndex ? progress * 100 : 0}%`,
              }}
            />
          </div>
        ))}
      </div>

{/* Header */}
      <div className="absolute top-4 left-0 right-0 flex items-center justify-between px-4 z-10">
        <div className="flex items-center gap-2">
          <Avatar className="w-8 h-8 border border-white/30">
            <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.name} />
            <AvatarFallback className="text-xs">{user.name[0]}</AvatarFallback>
          </Avatar>
          <div>
            <p className="text-white text-sm font-medium">{user.username}</p>
            <p className="text-white/60 text-[10px]">
              {formatDistanceToNow(new Date(story.createdAt), { addSuffix: true })}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-1">
          {user.isOwn && (
            <span className="flex items-center gap-1 text-white/70 text-xs mr-2">
              <Eye className="w-3 h-3" />
              {story.viewCount}
            </span>
          )}
          <Button
            variant="ghost"
            size="icon"
            className="text-white hover:bg-white/10 h-8 w-8"
            onClick={() => setPaused((p) => !p)}
          >
            {paused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="text-white hover:bg-white/10 h-8 w-8"
            onClick={onClose}
          >
            <X className="w-5 h-5" />
          </Button>
        </div>
      </div>

{/* Story content */}
      <div className="relative w-full h-full max-w-lg mx-auto">
        {story.mediaType === "video" ? (
          <video
            src={story.mediaUrl}
            className="w-full h-full object-contain"
            autoPlay
            muted
            playsInline
          />
        ) : (
          <img
            src={story.mediaUrl}
            alt={story.caption || "Story"}
            className="w-full h-full object-contain"
          />
        )}

{/* Caption */}
        {story.caption && (
          <div className="absolute bottom-8 left-0 right-0 text-center px-8">
            <p className="text-white text-sm bg-black/40 backdrop-blur-sm rounded-lg px-4 py-2 inline-block">
              {story.caption}
            </p>
          </div>
        )}
      </div>

{/* Tap zones for navigation */}
      <button
        type="button"
        className="absolute left-0 top-16 bottom-16 w-1/3 z-10"
        onClick={goPrev}
        aria-label="Previous story"
      />
      <button
        type="button"
        className="absolute right-0 top-16 bottom-16 w-1/3 z-10"
        onClick={goNext}
        aria-label="Next story"
      />

{/* Edge nav buttons (visible on hover) */}
      {currentIndex > 0 && (
        <Button
          variant="ghost"
          size="icon"
          className="absolute left-2 top-1/2 -translate-y-1/2 text-white/70 hover:text-white hover:bg-white/10 h-10 w-10 hidden sm:flex"
          onClick={goPrev}
        >
          <ChevronLeft className="w-6 h-6" />
        </Button>
      )}
      {currentIndex < user.stories.length - 1 && (
        <Button
          variant="ghost"
          size="icon"
          className="absolute right-2 top-1/2 -translate-y-1/2 text-white/70 hover:text-white hover:bg-white/10 h-10 w-10 hidden sm:flex"
          onClick={goNext}
        >
          <ChevronRight className="w-6 h-6" />
        </Button>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
'use client'

import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDownIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Accordion({
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn('border-b last:border-b-0', className)}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
          className,
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
      {...props}
    >
      <div className={cn('pt-0 pb-4', className)}>{children}</div>
    </AccordionPrimitive.Content>
  )
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
'use client'

import * as React from 'react'
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'

import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  )
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  )
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
  )
}

function AlertDialogHeader({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function AlertDialogFooter({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn('text-lg font-semibold', className)}
      {...props}
    />
  )
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function AlertDialogAction({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
  return (
    <AlertDialogPrimitive.Action
      className={cn(buttonVariants(), className)}
      {...props}
    />
  )
}

function AlertDialogCancel({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: 'outline' }), className)}
      {...props}
    />
  )
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const alertVariants = cva(
  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
  {
    variants: {
      variant: {
        default: 'bg-card text-card-foreground',
        destructive:
          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
        className,
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
        className,
      )}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx"
'use client'

import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
'use client'

import * as React from 'react'
import * as AvatarPrimitive from '@radix-ui/react-avatar'

import { cn } from '@/lib/utils'

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
        className,
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn('aspect-square size-full', className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        'bg-muted flex size-full items-center justify-center rounded-full',
        className,
      )}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { ChevronRight, MoreHorizontal } from 'lucide-react'

import { cn } from '@/lib/utils'

function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
        className,
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn('inline-flex items-center gap-1.5', className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<'a'> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn('hover:text-foreground transition-colors', className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn('text-foreground font-normal', className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn('[&>svg]:size-3.5', className)}
      {...props}
    >
      {children ?? <ChevronRight />}
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn('flex size-9 items-center justify-center', className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  )
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button-group.tsx"
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

const buttonGroupVariants = cva(
  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
  {
    variants: {
      orientation: {
        horizontal:
          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
        vertical:
          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  },
)

function ButtonGroup({
  className,
  orientation,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : 'div'

return (
    <Comp
      className={cn(
        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function ButtonGroupSeparator({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="button-group-separator"
      orientation={orientation}
      className={cn(
        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
        className,
      )}
      {...props}
    />
  )
}

export {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
  buttonGroupVariants,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
'use client'

import * as React from 'react'
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from 'lucide-react'
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = 'label',
  buttonVariant = 'ghost',
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>['variant']
}) {
  const defaultClassNames = getDefaultClassNames()

return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className,
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: (date) =>
          date.toLocaleString('default', { month: 'short' }),
        ...formatters,
      }}
      classNames={{
        root: cn('w-fit', defaultClassNames.root),
        months: cn(
          'flex gap-4 flex-col md:flex-row relative',
          defaultClassNames.months,
        ),
        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
        nav: cn(
          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
          defaultClassNames.nav,
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_previous,
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_next,
        ),
        month_caption: cn(
          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
          defaultClassNames.month_caption,
        ),
        dropdowns: cn(
          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
          defaultClassNames.dropdowns,
        ),
        dropdown_root: cn(
          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
          defaultClassNames.dropdown_root,
        ),
        dropdown: cn(
          'absolute bg-popover inset-0 opacity-0',
          defaultClassNames.dropdown,
        ),
        caption_label: cn(
          'select-none font-medium',
          captionLayout === 'label'
            ? 'text-sm'
            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
          defaultClassNames.caption_label,
        ),
        table: 'w-full border-collapse',
        weekdays: cn('flex', defaultClassNames.weekdays),
        weekday: cn(
          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
          defaultClassNames.weekday,
        ),
        week: cn('flex w-full mt-2', defaultClassNames.week),
        week_number_header: cn(
          'select-none w-(--cell-size)',
          defaultClassNames.week_number_header,
        ),
        week_number: cn(
          'text-[0.8rem] select-none text-muted-foreground',
          defaultClassNames.week_number,
        ),
        day: cn(
          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
          defaultClassNames.day,
        ),
        range_start: cn(
          'rounded-l-md bg-accent',
          defaultClassNames.range_start,
        ),
        range_middle: cn('rounded-none', defaultClassNames.range_middle),
        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
        today: cn(
          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
          defaultClassNames.today,
        ),
        outside: cn(
          'text-muted-foreground aria-selected:text-muted-foreground',
          defaultClassNames.outside,
        ),
        disabled: cn(
          'text-muted-foreground opacity-50',
          defaultClassNames.disabled,
        ),
        hidden: cn('invisible', defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === 'left') {
            return (
              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
            )
          }

if (orientation === 'right') {
            return (
              <ChevronRightIcon
                className={cn('size-4', className)}
                {...props}
              />
            )
          }

return (
            <ChevronDownIcon className={cn('size-4', className)} {...props} />
          )
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-(--cell-size) items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
        defaultClassNames.day,
        className,
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx"
'use client'

import * as React from 'react'
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from 'embla-carousel-react'
import { ArrowLeft, ArrowRight } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: 'horizontal' | 'vertical'
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error('useCarousel must be used within a <Carousel />')
  }

return context
}

function Carousel({
  orientation = 'horizontal',
  opts,
  setApi,
  plugins,
  className,
  children,
  ...props
}: React.ComponentProps<'div'> & CarouselProps) {
  const [carouselRef, api] = useEmblaCarousel(
    {
      ...opts,
      axis: orientation === 'horizontal' ? 'x' : 'y',
    },
    plugins,
  )
  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
  const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
    if (!api) return
    setCanScrollPrev(api.canScrollPrev())
    setCanScrollNext(api.canScrollNext())
  }, [])

const scrollPrev = React.useCallback(() => {
    api?.scrollPrev()
  }, [api])

const scrollNext = React.useCallback(() => {
    api?.scrollNext()
  }, [api])

const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key === 'ArrowLeft') {
        event.preventDefault()
        scrollPrev()
      } else if (event.key === 'ArrowRight') {
        event.preventDefault()
        scrollNext()
      }
    },
    [scrollPrev, scrollNext],
  )

React.useEffect(() => {
    if (!api || !setApi) return
    setApi(api)
  }, [api, setApi])

React.useEffect(() => {
    if (!api) return
    onSelect(api)
    api.on('reInit', onSelect)
    api.on('select', onSelect)

return () => {
      api?.off('select', onSelect)
    }
  }, [api, onSelect])

return (
    <CarouselContext.Provider
      value={{
        carouselRef,
        api: api,
        opts,
        orientation:
          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
        scrollPrev,
        scrollNext,
        canScrollPrev,
        canScrollNext,
      }}
    >
      <div
        onKeyDownCapture={handleKeyDown}
        className={cn('relative', className)}
        role="region"
        aria-roledescription="carousel"
        data-slot="carousel"
        {...props}
      >
        {children}
      </div>
    </CarouselContext.Provider>
  )
}

function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
  const { carouselRef, orientation } = useCarousel()

return (
    <div
      ref={carouselRef}
      className="overflow-hidden"
      data-slot="carousel-content"
    >
      <div
        className={cn(
          'flex',
          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
  const { orientation } = useCarousel()

return (
    <div
      role="group"
      aria-roledescription="slide"
      data-slot="carousel-item"
      className={cn(
        'min-w-0 shrink-0 grow-0 basis-full',
        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
        className,
      )}
      {...props}
    />
  )
}

function CarouselPrevious({
  className,
  variant = 'outline',
  size = 'icon',
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      data-slot="carousel-previous"
      variant={variant}
      size={size}
      className={cn(
        'absolute size-8 rounded-full',
        orientation === 'horizontal'
          ? 'top-1/2 -left-12 -translate-y-1/2'
          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
}

function CarouselNext({
  className,
  variant = 'outline',
  size = 'icon',
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      data-slot="carousel-next"
      variant={variant}
      size={size}
      className={cn(
        'absolute size-8 rounded-full',
        orientation === 'horizontal'
          ? 'top-1/2 -right-12 -translate-y-1/2'
          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight />
      <span className="sr-only">Next slide</span>
    </Button>
  )
}

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
'use client'

import * as React from 'react'
import * as RechartsPrimitive from 'recharts'

import { cn } from '@/lib/utils'

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<'div'> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >['children']
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color,
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join('\n')}
}
`,
          )
          .join('\n'),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = 'dot',
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<'div'> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: 'line' | 'dot' | 'dashed'
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === 'string'
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

if (labelFormatter) {
      return (
        <div className={cn('font-medium', labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

if (!value) {
      return null
    }

return <div className={cn('font-medium', labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

if (!active || !payload?.length) {
    return null
  }

const nestLabel = payload.length === 1 && indicator !== 'dot'

return (
    <div
      className={cn(
        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
        className,
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload.map((item, index) => {
          const key = `${nameKey || item.name || item.dataKey || 'value'}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)
          const indicatorColor = color || item.payload.fill || item.color

return (
            <div
              key={item.dataKey}
              className={cn(
                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
                indicator === 'dot' && 'items-center',
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn(
                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
                          {
                            'h-2.5 w-2.5': indicator === 'dot',
                            'w-1': indicator === 'line',
                            'w-0 border-[1.5px] border-dashed bg-transparent':
                              indicator === 'dashed',
                            'my-0.5': nestLabel && indicator === 'dashed',
                          },
                        )}
                        style={
                          {
                            '--color-bg': indicatorColor,
                            '--color-border': indicatorColor,
                          } as React.CSSProperties
                        }
                      />
                    )
                  )}
                  <div
                    className={cn(
                      'flex flex-1 justify-between leading-none',
                      nestLabel ? 'items-end' : 'items-center',
                    )}
                  >
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label || item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = 'bottom',
  nameKey,
}: React.ComponentProps<'div'> &
  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

if (!payload?.length) {
    return null
  }

return (
    <div
      className={cn(
        'flex items-center justify-center gap-4',
        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
        className,
      )}
    >
      {payload.map((item) => {
        const key = `${nameKey || item.dataKey || 'value'}`
        const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
          <div
            key={item.value}
            className={
              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
            }
          >
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }}
              />
            )}
            {itemConfig?.label}
          </div>
        )
      })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

const payloadPayload =
    'payload' in payload &&
    typeof payload.payload === 'object' &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === 'string'
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { CheckIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
'use client'

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
'use client'

import * as React from 'react'
import { Command as CommandPrimitive } from 'cmdk'
import { SearchIcon } from 'lucide-react'

import { cn } from '@/lib/utils'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'

function Command({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive>) {
  return (
    <CommandPrimitive
      data-slot="command"
      className={cn(
        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
        className,
      )}
      {...props}
    />
  )
}

function CommandDialog({
  title = 'Command Palette',
  description = 'Search for a command to run...',
  children,
  className,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof Dialog> & {
  title?: string
  description?: string
  className?: string
  showCloseButton?: boolean
}) {
  return (
    <Dialog {...props}>
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent
        className={cn('overflow-hidden p-0', className)}
        showCloseButton={showCloseButton}
      >
        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

function CommandInput({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
    <div
      data-slot="command-input-wrapper"
      className="flex h-9 items-center gap-2 border-b px-3"
    >
      <SearchIcon className="size-4 shrink-0 opacity-50" />
      <CommandPrimitive.Input
        data-slot="command-input"
        className={cn(
          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function CommandList({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
  return (
    <CommandPrimitive.List
      data-slot="command-list"
      className={cn(
        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
        className,
      )}
      {...props}
    />
  )
}

function CommandEmpty({
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
  return (
    <CommandPrimitive.Empty
      data-slot="command-empty"
      className="py-6 text-center text-sm"
      {...props}
    />
  )
}

function CommandGroup({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
  return (
    <CommandPrimitive.Group
      data-slot="command-group"
      className={cn(
        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
        className,
      )}
      {...props}
    />
  )
}

function CommandSeparator({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
  return (
    <CommandPrimitive.Separator
      data-slot="command-separator"
      className={cn('bg-border -mx-1 h-px', className)}
      {...props}
    />
  )
}

function CommandItem({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
  return (
    <CommandPrimitive.Item
      data-slot="command-item"
      className={cn(
        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function CommandShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="command-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx"
'use client'

import * as React from 'react'
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function ContextMenu({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
}

function ContextMenuTrigger({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
  return (
    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
  )
}

function ContextMenuGroup({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
  return (
    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
  )
}

function ContextMenuPortal({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
  return (
    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
  )
}

function ContextMenuSub({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
}

function ContextMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
  return (
    <ContextMenuPrimitive.RadioGroup
      data-slot="context-menu-radio-group"
      {...props}
    />
  )
}

function ContextMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <ContextMenuPrimitive.SubTrigger
      data-slot="context-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto" />
    </ContextMenuPrimitive.SubTrigger>
  )
}

function ContextMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
  return (
    <ContextMenuPrimitive.SubContent
      data-slot="context-menu-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
  return (
    <ContextMenuPrimitive.Portal>
      <ContextMenuPrimitive.Content
        data-slot="context-menu-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </ContextMenuPrimitive.Portal>
  )
}

function ContextMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <ContextMenuPrimitive.Item
      data-slot="context-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
  return (
    <ContextMenuPrimitive.CheckboxItem
      data-slot="context-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.CheckboxItem>
  )
}

function ContextMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
  return (
    <ContextMenuPrimitive.RadioItem
      data-slot="context-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.RadioItem>
  )
}

function ContextMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <ContextMenuPrimitive.Label
      data-slot="context-menu-label"
      data-inset={inset}
      className={cn(
        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function ContextMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
  return (
    <ContextMenuPrimitive.Separator
      data-slot="context-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function ContextMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="context-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn('text-lg leading-none font-semibold', className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx"
'use client'

import * as React from 'react'
import { Drawer as DrawerPrimitive } from 'vaul'

import { cn } from '@/lib/utils'

function Drawer({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}

function DrawerTrigger({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

function DrawerPortal({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}

function DrawerClose({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}

function DrawerOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
  return (
    <DrawerPrimitive.Overlay
      data-slot="drawer-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DrawerContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
  return (
    <DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
          className,
        )}
        {...props}
      >
        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
  )
}

function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="drawer-header"
      className={cn(
        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
        className,
      )}
      {...props}
    />
  )
}

function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="drawer-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function DrawerTitle({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function DrawerDescription({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
  return (
    <DrawerPrimitive.Description
      data-slot="drawer-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  )
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  )
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  )
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  )
}

function DropdownMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  )
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  )
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  )
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  )
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/empty.tsx"
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

function Empty({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty"
      className={cn(
        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
        className,
      )}
      {...props}
    />
  )
}

function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-header"
      className={cn(
        'flex max-w-sm flex-col items-center gap-2 text-center',
        className,
      )}
      {...props}
    />
  )
}

const emptyMediaVariants = cva(
  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function EmptyMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
  return (
    <div
      data-slot="empty-icon"
      data-variant={variant}
      className={cn(emptyMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-title"
      className={cn('text-lg font-medium tracking-tight', className)}
      {...props}
    />
  )
}

function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <div
      data-slot="empty-description"
      className={cn(
        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-content"
      className={cn(
        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
        className,
      )}
      {...props}
    />
  )
}

export {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
}
[V0_FILE]typescriptreact:file="components/ui/field.tsx"
'use client'

import { useMemo } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  return (
    <fieldset
      data-slot="field-set"
      className={cn(
        'flex flex-col gap-6',
        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
        className,
      )}
      {...props}
    />
  )
}

function FieldLegend({
  className,
  variant = 'legend',
  ...props
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
  return (
    <legend
      data-slot="field-legend"
      data-variant={variant}
      className={cn(
        'mb-3 font-medium',
        'data-[variant=legend]:text-base',
        'data-[variant=label]:text-sm',
        className,
      )}
      {...props}
    />
  )
}

function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-group"
      className={cn(
        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
        className,
      )}
      {...props}
    />
  )
}

const fieldVariants = cva(
  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
  {
    variants: {
      orientation: {
        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
        horizontal: [
          'flex-row items-center',
          '[&>[data-slot=field-label]]:flex-auto',
          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
        ],
        responsive: [
          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
        ],
      },
    },
    defaultVariants: {
      orientation: 'vertical',
    },
  },
)

function Field({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
  return (
    <div
      role="group"
      data-slot="field"
      data-orientation={orientation}
      className={cn(fieldVariants({ orientation }), className)}
      {...props}
    />
  )
}

function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-content"
      className={cn(
        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
        className,
      )}
      {...props}
    />
  )
}

function FieldLabel({
  className,
  ...props
}: React.ComponentProps<typeof Label>) {
  return (
    <Label
      data-slot="field-label"
      className={cn(
        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
        className,
      )}
      {...props}
    />
  )
}

function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-label"
      className={cn(
        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="field-description"
      className={cn(
        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function FieldSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  children?: React.ReactNode
}) {
  return (
    <div
      data-slot="field-separator"
      data-content={!!children}
      className={cn(
        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
        className,
      )}
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
      {children && (
        <span
          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
          data-slot="field-separator-content"
        >
          {children}
        </span>
      )}
    </div>
  )
}

function FieldError({
  className,
  children,
  errors,
  ...props
}: React.ComponentProps<'div'> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const content = useMemo(() => {
    if (children) {
      return children
    }

if (!errors) {
      return null
    }

if (errors.length === 1 && errors[0]?.message) {
      return errors[0].message
    }

return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {errors.map(
          (error, index) =>
            error?.message && <li key={index}>{error.message}</li>,
        )}
      </ul>
    )
  }, [children, errors])

if (!content) {
    return null
  }

return (
    <div
      role="alert"
      data-slot="field-error"
      className={cn('text-destructive text-sm font-normal', className)}
      {...props}
    >
      {content}
    </div>
  )
}

export {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldContent,
  FieldTitle,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { Slot } from '@radix-ui/react-slot'
import {
  Controller,
  FormProvider,
  useFormContext,
  useFormState,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
} from 'react-hook-form'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue,
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState } = useFormContext()
  const formState = useFormState({ name: fieldContext.name })
  const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error('useFormField should be used within <FormField>')
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue,
)

function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div
        data-slot="form-item"
        className={cn('grid gap-2', className)}
        {...props}
      />
    </FormItemContext.Provider>
  )
}

function FormLabel({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  const { error, formItemId } = useFormField()

return (
    <Label
      data-slot="form-label"
      data-error={!!error}
      className={cn('data-[error=true]:text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
  )
}

function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
}

function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
  const { formDescriptionId } = useFormField()

return (
    <p
      data-slot="form-description"
      id={formDescriptionId}
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message ?? '') : props.children

if (!body) {
    return null
  }

return (
    <p
      data-slot="form-message"
      id={formMessageId}
      className={cn('text-destructive text-sm', className)}
      {...props}
    >
      {body}
    </p>
  )
}

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx"
'use client'

import * as React from 'react'
import * as HoverCardPrimitive from '@radix-ui/react-hover-card'

import { cn } from '@/lib/utils'

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = 'center',
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-group.tsx"
'use client'

import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="input-group"
      role="group"
      className={cn(
        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
        'h-9 has-[>textarea]:h-auto',

// Variants based on alignment.
        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',

// Focus state.
        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',

// Error state.
        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',

className,
      )}
      {...props}
    />
  )
}

const inputGroupAddonVariants = cva(
  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
  {
    variants: {
      align: {
        'inline-start':
          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
        'inline-end':
          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
        'block-start':
          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
        'block-end':
          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
      },
    },
    defaultVariants: {
      align: 'inline-start',
    },
  },
)

function InputGroupAddon({
  className,
  align = 'inline-start',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
  return (
    <div
      role="group"
      data-slot="input-group-addon"
      data-align={align}
      className={cn(inputGroupAddonVariants({ align }), className)}
      onClick={(e) => {
        if ((e.target as HTMLElement).closest('button')) {
          return
        }
        e.currentTarget.parentElement?.querySelector('input')?.focus()
      }}
      {...props}
    />
  )
}

const inputGroupButtonVariants = cva(
  'text-sm shadow-none flex gap-2 items-center',
  {
    variants: {
      size: {
        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
        'icon-xs':
          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
      },
    },
    defaultVariants: {
      size: 'xs',
    },
  },
)

function InputGroupButton({
  className,
  type = 'button',
  variant = 'ghost',
  size = 'xs',
  ...props
}: Omit<React.ComponentProps<typeof Button>, 'size'> &
  VariantProps<typeof inputGroupButtonVariants>) {
  return (
    <Button
      type={type}
      data-size={size}
      variant={variant}
      className={cn(inputGroupButtonVariants({ size }), className)}
      {...props}
    />
  )
}

function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      className={cn(
        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function InputGroupInput({
  className,
  ...props
}: React.ComponentProps<'input'>) {
  return (
    <Input
      data-slot="input-group-control"
      className={cn(
        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

function InputGroupTextarea({
  className,
  ...props
}: React.ComponentProps<'textarea'>) {
  return (
    <Textarea
      data-slot="input-group-control"
      className={cn(
        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

export {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
  InputGroupTextarea,
}
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx"
'use client'

import * as React from 'react'
import { OTPInput, OTPInputContext } from 'input-otp'
import { MinusIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function InputOTP({
  className,
  containerClassName,
  ...props
}: React.ComponentProps<typeof OTPInput> & {
  containerClassName?: string
}) {
  return (
    <OTPInput
      data-slot="input-otp"
      containerClassName={cn(
        'flex items-center gap-2 has-disabled:opacity-50',
        containerClassName,
      )}
      className={cn('disabled:cursor-not-allowed', className)}
      {...props}
    />
  )
}

function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="input-otp-group"
      className={cn('flex items-center', className)}
      {...props}
    />
  )
}

function InputOTPSlot({
  index,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  index: number
}) {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}

return (
    <div
      data-slot="input-otp-slot"
      data-active={isActive}
      className={cn(
        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
        className,
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
        </div>
      )}
    </div>
  )
}

function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
  return (
    <div data-slot="input-otp-separator" role="separator" {...props}>
      <MinusIcon />
    </div>
  )
}

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/item.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      role="list"
      data-slot="item-group"
      className={cn('group/item-group flex flex-col', className)}
      {...props}
    />
  )
}

function ItemSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="item-separator"
      orientation="horizontal"
      className={cn('my-0', className)}
      {...props}
    />
  )
}

const itemVariants = cva(
  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a&]:hover:bg-accent/50 [a&]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border-border',
        muted: 'bg-muted/50',
      },
      size: {
        default: 'p-4 gap-4 ',
        sm: 'py-3 px-4 gap-2.5',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Item({
  className,
  variant = 'default',
  size = 'default',
  asChild = false,
  ...props
}: React.ComponentProps<'div'> &
  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'
  return (
    <Comp
      data-slot="item"
      data-variant={variant}
      data-size={size}
      className={cn(itemVariants({ variant, size, className }))}
      {...props}
    />
  )
}

const itemMediaVariants = cva(
  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
        image:
          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function ItemMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
  return (
    <div
      data-slot="item-media"
      data-variant={variant}
      className={cn(itemMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-content"
      className={cn(
        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
        className,
      )}
      {...props}
    />
  )
}

function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-title"
      className={cn(
        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
        className,
      )}
      {...props}
    />
  )
}

function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="item-description"
      className={cn(
        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-actions"
      className={cn('flex items-center gap-2', className)}
      {...props}
    />
  )
}

function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-header"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-footer"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

export {
  Item,
  ItemMedia,
  ItemContent,
  ItemActions,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
  ItemDescription,
  ItemHeader,
  ItemFooter,
}
[V0_FILE]typescriptreact:file="components/ui/kbd.tsx"
import { cn } from '@/lib/utils'

function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        'bg-muted w-fit text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
        "[&_svg:not([class*='size-'])]:size-3",
        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
        className,
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn('inline-flex items-center gap-1', className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

import { cn } from '@/lib/utils'

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/luxlane-logo.tsx"
interface LuxlaneLogoProps {
  className?: string
  size?: "sm" | "md" | "lg"
  variant?: "default" | "mark"
}

export function LuxlaneLogo({ className = "", size = "md", variant = "default" }: LuxlaneLogoProps) {
  const sizeClasses = {
    sm: "text-lg",
    md: "text-xl",
    lg: "text-3xl",
  }

if (variant === "mark") {
    return <div className={`font-semibold tracking-tight ${sizeClasses[size]} ${className}`}>L</div>
  }

return <div className={`font-semibold tracking-tight ${sizeClasses[size]} ${className}`}>LUXLANE</div>
}
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx"
'use client'

import * as React from 'react'
import * as MenubarPrimitive from '@radix-ui/react-menubar'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Menubar({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
  return (
    <MenubarPrimitive.Root
      data-slot="menubar"
      className={cn(
        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
        className,
      )}
      {...props}
    />
  )
}

function MenubarMenu({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
}

function MenubarGroup({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
}

function MenubarPortal({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
}

function MenubarRadioGroup({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
  return (
    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
  )
}

function MenubarTrigger({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
  return (
    <MenubarPrimitive.Trigger
      data-slot="menubar-trigger"
      className={cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
        className,
      )}
      {...props}
    />
  )
}

function MenubarContent({
  className,
  align = 'start',
  alignOffset = -4,
  sideOffset = 8,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
  return (
    <MenubarPortal>
      <MenubarPrimitive.Content
        data-slot="menubar-content"
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </MenubarPortal>
  )
}

function MenubarItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <MenubarPrimitive.Item
      data-slot="menubar-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function MenubarCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
  return (
    <MenubarPrimitive.CheckboxItem
      data-slot="menubar-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <MenubarPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </MenubarPrimitive.ItemIndicator>
      </span>
      {children}
    </MenubarPrimitive.CheckboxItem>
  )
}

function MenubarRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
  return (
    <MenubarPrimitive.RadioItem
      data-slot="menubar-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <MenubarPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </MenubarPrimitive.ItemIndicator>
      </span>
      {children}
    </MenubarPrimitive.RadioItem>
  )
}

function MenubarLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <MenubarPrimitive.Label
      data-slot="menubar-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function MenubarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
  return (
    <MenubarPrimitive.Separator
      data-slot="menubar-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function MenubarShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="menubar-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function MenubarSub({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
}

function MenubarSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <MenubarPrimitive.SubTrigger
      data-slot="menubar-sub-trigger"
      data-inset={inset}
      className={cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto h-4 w-4" />
    </MenubarPrimitive.SubTrigger>
  )
}

function MenubarSubContent({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
  return (
    <MenubarPrimitive.SubContent
      data-slot="menubar-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  Menubar,
  MenubarPortal,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarGroup,
  MenubarSeparator,
  MenubarLabel,
  MenubarItem,
  MenubarShortcut,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from 'react'
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
import { cva } from 'class-variance-authority'
import { ChevronDownIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function NavigationMenu({
  className,
  children,
  viewport = true,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
  viewport?: boolean
}) {
  return (
    <NavigationMenuPrimitive.Root
      data-slot="navigation-menu"
      data-viewport={viewport}
      className={cn(
        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
        className,
      )}
      {...props}
    >
      {children}
      {viewport && <NavigationMenuViewport />}
    </NavigationMenuPrimitive.Root>
  )
}

function NavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return (
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn(
        'group flex flex-1 list-none items-center justify-center gap-1',
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuItem({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
  return (
    <NavigationMenuPrimitive.Item
      data-slot="navigation-menu-item"
      className={cn('relative', className)}
      {...props}
    />
  )
}

const navigationMenuTriggerStyle = cva(
  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
)

function NavigationMenuTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
      className={cn(navigationMenuTriggerStyle(), 'group', className)}
      {...props}
    >
      {children}{' '}
      <ChevronDownIcon
        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
        aria-hidden="true"
      />
    </NavigationMenuPrimitive.Trigger>
  )
}

function NavigationMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
  return (
    <NavigationMenuPrimitive.Content
      data-slot="navigation-menu-content"
      className={cn(
        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
  return (
    <div
      className={'absolute top-full left-0 isolate z-50 flex justify-center'}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function NavigationMenuLink({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
  return (
    <NavigationMenuPrimitive.Link
      data-slot="navigation-menu-link"
      className={cn(
        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function NavigationMenuIndicator({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
  return (
    <NavigationMenuPrimitive.Indicator
      data-slot="navigation-menu-indicator"
      className={cn(
        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
        className,
      )}
      {...props}
    >
      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
  )
}

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from 'react'
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
} from 'lucide-react'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn('mx-auto flex w-full justify-center', className)}
      {...props}
    />
  )
}

function PaginationContent({
  className,
  ...props
}: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn('flex flex-row items-center gap-1', className)}
      {...props}
    />
  )
}

function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
  return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, 'size'> &
  React.ComponentProps<'a'>

function PaginationLink({
  className,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) {
  return (
    <a
      aria-current={isActive ? 'page' : undefined}
      data-slot="pagination-link"
      data-active={isActive}
      className={cn(
        buttonVariants({
          variant: isActive ? 'outline' : 'ghost',
          size,
        }),
        className,
      )}
      {...props}
    />
  )
}

function PaginationPrevious({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
      {...props}
    >
      <ChevronLeftIcon />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  )
}

function PaginationNext({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="default"
      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
      {...props}
    >
      <span className="hidden sm:block">Next</span>
      <ChevronRightIcon />
    </PaginationLink>
  )
}

function PaginationEllipsis({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn('flex size-9 items-center justify-center', className)}
      {...props}
    >
      <MoreHorizontalIcon className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
  )
}

export {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'

import { cn } from '@/lib/utils'

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = 'center',
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
'use client'

import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'

import { cn } from '@/lib/utils'

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
        className,
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
'use client'

import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { CircleIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn('grid gap-3', className)}
      {...props}
    />
  )
}

function RadioGroupItem({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="relative flex items-center justify-center"
      >
        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
'use client'

import * as React from 'react'
import { GripVerticalIcon } from 'lucide-react'
import * as ResizablePrimitive from 'react-resizable-panels'

import { cn } from '@/lib/utils'

function ResizablePanelGroup({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
  return (
    <ResizablePrimitive.PanelGroup
      data-slot="resizable-panel-group"
      className={cn(
        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
        className,
      )}
      {...props}
    />
  )
}

function ResizablePanel({
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}

function ResizableHandle({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) {
  return (
    <ResizablePrimitive.PanelResizeHandle
      data-slot="resizable-handle"
      className={cn(
        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
        className,
      )}
      {...props}
    >
      {withHandle && (
        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
          <GripVerticalIcon className="size-2.5" />
        </div>
      )}
    </ResizablePrimitive.PanelResizeHandle>
  )
}

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
'use client'

import * as React from 'react'
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'

import { cn } from '@/lib/utils'

function ScrollArea({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn('relative', className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        'flex touch-none p-px transition-colors select-none',
        orientation === 'vertical' &&
          'h-full w-2.5 border-l border-l-transparent',
        orientation === 'horizontal' &&
          'h-2.5 flex-col border-t border-t-transparent',
        className,
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="bg-border relative flex-1 rounded-full"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          className,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            'p-1',
            position === 'popper' &&
              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
'use client'

import * as React from 'react'
import * as SeparatorPrimitive from '@radix-ui/react-separator'

import { cn } from '@/lib/utils'

function Separator({
  className,
  orientation = 'horizontal',
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
        className,
      )}
      {...props}
    />
  )
}

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = 'right',
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: 'top' | 'right' | 'bottom' | 'left'
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
          side === 'right' &&
            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
          side === 'left' &&
            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' &&
            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' &&
            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          className,
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-header"
      className={cn('flex flex-col gap-1.5 p-4', className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx"
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, VariantProps } from 'class-variance-authority'
import { PanelLeftIcon } from 'lucide-react'

import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContextProps = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

return context
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === 'function' ? value(open) : value
      if (setOpenProp) {
        setOpenProp(openState)
      } else {
        _setOpen(openState)
      }

// This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
    },
    [setOpenProp, open],
  )

// Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
  }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault()
        toggleSidebar()
      }
    }

window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? 'expanded' : 'collapsed'

const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  )

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH,
              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
            className,
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

function Sidebar({
  side = 'left',
  variant = 'sidebar',
  collapsible = 'offcanvas',
  className,
  children,
  ...props
}: React.ComponentProps<'div'> & {
  side?: 'left' | 'right'
  variant?: 'sidebar' | 'floating' | 'inset'
  collapsible?: 'offcanvas' | 'icon' | 'none'
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === 'none') {
    return (
      <div
        data-slot="sidebar"
        className={cn(
          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
          className,
        )}
        {...props}
      >
        {children}
      </div>
    )
  }

if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
          style={
            {
              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    )
  }

return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === 'collapsed' ? collapsible : ''}
      data-variant={variant}
      data-side={side}
      data-slot="sidebar"
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
        data-slot="sidebar-gap"
        className={cn(
          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
          'group-data-[collapsible=offcanvas]:w-0',
          'group-data-[side=right]:rotate-180',
          variant === 'floating' || variant === 'inset'
            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
        )}
      />
      <div
        data-slot="sidebar-container"
        className={cn(
          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
          side === 'left'
            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
          // Adjust the padding for floating and inset variants.
          variant === 'floating' || variant === 'inset'
            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
          className,
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          data-slot="sidebar-inner"
          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
        >
          {children}
        </div>
      </div>
    </div>
  )
}

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn('size-7', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}

function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
  const { toggleSidebar } = useSidebar()

return (
    <button
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        'bg-background relative flex w-full flex-1 flex-col',
        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
        className,
      )}
      {...props}
    />
  )
}

function SidebarInput({
  className,
  ...props
}: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot="sidebar-input"
      data-sidebar="input"
      className={cn('bg-background h-8 w-full shadow-none', className)}
      {...props}
    />
  )
}

function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
}

function SidebarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="sidebar-separator"
      data-sidebar="separator"
      className={cn('bg-sidebar-border mx-2 w-auto', className)}
      {...props}
    />
  )
}

function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  )
}

function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'

return (
    <Comp
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupAction({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupContent({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn('w-full text-sm', className)}
      {...props}
    />
  )
}

function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
      {...props}
    />
  )
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn('group/menu-item relative', className)}
      {...props}
    />
  )
}

const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
      },
      size: {
        default: 'h-8 text-sm',
        sm: 'h-7 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = 'default',
  size = 'default',
  tooltip,
  className,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  isActive?: boolean
  tooltip?: string | React.ComponentProps<typeof TooltipContent>
} & VariantProps<typeof sidebarMenuButtonVariants>) {
  const Comp = asChild ? Slot : 'button'
  const { isMobile, state } = useSidebar()

const button = (
    <Comp
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  )

if (!tooltip) {
    return button
  }

if (typeof tooltip === 'string') {
    tooltip = {
      children: tooltip,
    }
  }

return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side="right"
        align="center"
        hidden={state !== 'collapsed' || isMobile}
        {...tooltip}
      />
    </Tooltip>
  )
}

function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
}: React.ComponentProps<'button'> & {
  asChild?: boolean
  showOnHover?: boolean
}) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 md:after:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<'div'> & {
  showIcon?: boolean
}) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            '--skeleton-width': width,
          } as React.CSSProperties
        }
      />
    </div>
  )
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn('group/menu-sub-item relative', className)}
      {...props}
    />
  )
}

function SidebarMenuSubButton({
  asChild = false,
  size = 'md',
  isActive = false,
  className,
  ...props
}: React.ComponentProps<'a'> & {
  asChild?: boolean
  size?: 'sm' | 'md'
  isActive?: boolean
}) {
  const Comp = asChild ? Slot : 'a'

return (
    <Comp
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from '@/lib/utils'

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('bg-accent animate-pulse rounded-md', className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'

import { cn } from '@/lib/utils'

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max],
  )

return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
        className,
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={
          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
        }
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={
            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
          }
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
    </SliderPrimitive.Root>
  )
}

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
'use client'

import { useTheme } from 'next-themes'
import { Toaster as Sonner, ToasterProps } from 'sonner'

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      className="toaster group"
      style={
        {
          '--normal-bg': 'var(--popover)',
          '--normal-text': 'var(--popover-foreground)',
          '--normal-border': 'var(--border)',
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/spinner.tsx"
import { Loader2Icon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn('size-4 animate-spin', className)}
      {...props}
    />
  )
}

export { Spinner }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
'use client'

import * as React from 'react'
import * as SwitchPrimitive from '@radix-ui/react-switch'

import { cn } from '@/lib/utils'

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={
          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
        }
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
'use client'

import * as React from 'react'

import { cn } from '@/lib/utils'

function Table({ className, ...props }: React.ComponentProps<'table'>) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn('w-full caption-bottom text-sm', className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
  return (
    <thead
      data-slot="table-header"
      className={cn('[&_tr]:border-b', className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
  return (
    <tbody
      data-slot="table-body"
      className={cn('[&_tr:last-child]:border-0', className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
        className,
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
        className,
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<'caption'>) {
  return (
    <caption
      data-slot="table-caption"
      className={cn('text-muted-foreground mt-4 text-sm', className)}
      {...props}
    />
  )
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'

import { cn } from '@/lib/utils'

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn('flex flex-col gap-2', className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
        className,
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn('flex-1 outline-none', className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
'use client'

import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn('text-sm font-semibold', className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn('text-sm opacity-90', className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
'use client'

import { useToast } from '@/hooks/use-toast'
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from '@/components/ui/toast'

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx"
'use client'

import * as React from 'react'
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
import { type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { toggleVariants } from '@/components/ui/toggle'

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: 'default',
  variant: 'default',
})

function ToggleGroup({
  className,
  variant,
  size,
  children,
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
  VariantProps<typeof toggleVariants>) {
  return (
    <ToggleGroupPrimitive.Root
      data-slot="toggle-group"
      data-variant={variant}
      data-size={size}
      className={cn(
        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
        className,
      )}
      {...props}
    >
      <ToggleGroupContext.Provider value={{ variant, size }}>
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive.Root>
  )
}

function ToggleGroupItem({
  className,
  children,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
  VariantProps<typeof toggleVariants>) {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-item"
      data-variant={context.variant || variant}
      data-size={context.size || size}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
        className,
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
}

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
'use client'

import * as React from 'react'
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const toggleVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline:
          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-9 px-2 min-w-9',
        sm: 'h-8 px-1.5 min-w-8',
        lg: 'h-10 px-2.5 min-w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Toggle({
  className,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
  VariantProps<typeof toggleVariants>) {
  return (
    <TogglePrimitive.Root
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

import { cn } from '@/lib/utils'

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
          className,
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="components/verification/verification-flow.tsx"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ArrowLeft, Upload, Camera, Scan, CheckCircle2, Clock, Shield, AlertCircle, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { useAuth } from "@/lib/auth-context"

interface VerificationFlowProps {
  onBack: () => void
  onComplete: () => void
}

export function VerificationFlow({ onBack, onComplete }: VerificationFlowProps) {
  const { user, updateUser } = useAuth()
  const [step, setStep] = useState<VerificationStep>("overview")
  const [idUploaded, setIdUploaded] = useState(false)
  const [faceScanned, setFaceScanned] = useState(false)
  const [bodyScanned, setBodyScanned] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)

const steps = [
    { id: "id", label: "ID Upload", icon: Upload, completed: idUploaded },
    { id: "face", label: "Face Scan", icon: Camera, completed: faceScanned },
    { id: "body", label: "Body Scan", icon: Scan, completed: bodyScanned },
    { id: "review", label: "Review", icon: Clock, completed: false },
  ]

const completedSteps = [idUploaded, faceScanned, bodyScanned].filter(Boolean).length
  const progress = (completedSteps / 3) * 100

const handleIdUpload = async () => {
    setIsProcessing(true)
    await new Promise((r) => setTimeout(r, 1500))
    setIdUploaded(true)
    setIsProcessing(false)
    setStep("face")
  }

const handleFaceScan = async () => {
    setIsProcessing(true)
    await new Promise((r) => setTimeout(r, 2000))
    setFaceScanned(true)
    setIsProcessing(false)
    setStep("body")
  }

const handleBodyScan = async () => {
    setIsProcessing(true)
    await new Promise((r) => setTimeout(r, 2000))
    setBodyScanned(true)
    setIsProcessing(false)
    setStep("review")
  }

const handleSubmit = async () => {
    setIsProcessing(true)
    await new Promise((r) => setTimeout(r, 1500))
    updateUser({ verificationLevel: "luxlane_verified", verified: true })
    setStep("complete")
    setIsProcessing(false)
  }

<AnimatePresence mode="wait">
        {step === "overview" && (
          <motion.div
            key="overview"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            {/* Current Status */}
            <Card className="p-4 mb-6">
              <div className="flex items-center gap-3">
                <div
                  className={`w-12 h-12 rounded-full flex items-center justify-center ${
                    user?.verificationLevel === "luxlane_verified"
                      ? "bg-emerald-500/10"
                      : user?.verificationLevel === "agency_verified"
                        ? "bg-sky-500/10"
                        : "bg-muted"
                  }`}
                >
                  <Shield
                    className={`w-6 h-6 ${
                      user?.verificationLevel === "luxlane_verified"
                        ? "text-emerald-500"
                        : user?.verificationLevel === "agency_verified"
                          ? "text-sky-500"
                          : "text-muted-foreground"
                    }`}
                  />
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Current Status</p>
                  <p className="font-semibold capitalize">
                    {user?.verificationLevel === "luxlane_verified"
                      ? "Luxlane Verified"
                      : user?.verificationLevel === "agency_verified"
                        ? "Agency Verified"
                        : "Unverified"}
                  </p>
                </div>
              </div>
            </Card>

{/* Progress */}
            {completedSteps > 0 && (
              <div className="mb-6">
                <div className="flex justify-between text-sm mb-2">
                  <span className="text-muted-foreground">Progress</span>
                  <span className="font-medium">{completedSteps}/3 steps</span>
                </div>
                <Progress value={progress} className="h-2" />
              </div>
            )}

{/* Steps */}
            <div className="space-y-2 mb-6">
              {steps.map((s, i) => {
                const Icon = s.icon
                return (
                  <Card
                    key={s.id}
                    className={`p-4 flex items-center gap-3 cursor-pointer transition-colors ${
                      s.completed ? "bg-emerald-500/5" : "hover:bg-muted/50"
                    }`}
                    onClick={() => !s.completed && setStep(s.id as VerificationStep)}
                  >
                    <div
                      className={`w-10 h-10 rounded-full flex items-center justify-center ${
                        s.completed ? "bg-emerald-500" : "bg-muted"
                      }`}
                    >
                      {s.completed ? <CheckCircle2 className="w-5 h-5 text-white" /> : <Icon className="w-5 h-5" />}
                    </div>
                    <div className="flex-1">
                      <p className="font-medium text-sm">{s.label}</p>
                      <p className="text-xs text-muted-foreground">{s.completed ? "Completed" : `Step ${i + 1}`}</p>
                    </div>
                    {!s.completed && <ChevronRight className="w-4 h-4 text-muted-foreground" />}
                  </Card>
                )
              })}
            </div>

{/* Benefits */}
            <div>
              <h3 className="font-semibold mb-3">Why Verify?</h3>
              <div className="space-y-3 text-sm text-muted-foreground">
                <div className="flex gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
                  <span>Higher visibility in casting searches</span>
                </div>
                <div className="flex gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
                  <span>Access to verified-only castings</span>
                </div>
                <div className="flex gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
                  <span>Trusted badge on your profile</span>
                </div>
                <div className="flex gap-2">
                  <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
                  <span>Unlock premium casting features</span>
                </div>
              </div>
            </div>

{completedSteps === 3 && (
              <Button className="w-full mt-6 h-12" onClick={() => setStep("review")}>
                Submit for Review
              </Button>
            )}
          </motion.div>
        )}

{step === "id" && (
          <motion.div
            key="id"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-8">
              <div className="w-20 h-20 rounded-full bg-muted mx-auto mb-4 flex items-center justify-center">
                <Upload className="w-10 h-10" />
              </div>
              <h2 className="text-xl font-semibold mb-2">Upload ID Document</h2>
              <p className="text-sm text-muted-foreground mb-8">
                Upload a clear photo of your passport or government ID
              </p>

<Card className="p-8 border-dashed border-2 mb-4">
                <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
                <p className="text-sm text-muted-foreground">Tap to upload</p>
              </Card>

<div className="flex gap-3 text-xs text-muted-foreground mb-6">
                <AlertCircle className="w-4 h-4 shrink-0" />
                <span className="text-left">
                  Your ID is securely encrypted and only used for verification purposes.
                </span>
              </div>

<Button className="w-full h-12" onClick={handleIdUpload} disabled={isProcessing}>
                {isProcessing ? "Uploading..." : "Upload & Continue"}
              </Button>
            </div>
          </motion.div>
        )}

{step === "face" && (
          <motion.div
            key="face"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-8">
              <div className="w-20 h-20 rounded-full bg-muted mx-auto mb-4 flex items-center justify-center">
                <Camera className="w-10 h-10" />
              </div>
              <h2 className="text-xl font-semibold mb-2">Face Scan</h2>
              <p className="text-sm text-muted-foreground mb-8">We'll capture your face to verify your identity</p>

<Button className="w-full h-12" onClick={handleFaceScan} disabled={isProcessing}>
                {isProcessing ? "Scanning..." : "Start Face Scan"}
              </Button>
            </div>
          </motion.div>
        )}

{step === "body" && (
          <motion.div
            key="body"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-8">
              <div className="w-20 h-20 rounded-full bg-muted mx-auto mb-4 flex items-center justify-center">
                <Scan className="w-10 h-10" />
              </div>
              <h2 className="text-xl font-semibold mb-2">Body Scan</h2>
              <p className="text-sm text-muted-foreground mb-8">
                Stand 2 meters away and rotate slowly for a full body scan
              </p>

<Button className="w-full h-12" onClick={handleBodyScan} disabled={isProcessing}>
                {isProcessing ? "Scanning..." : "Start Body Scan"}
              </Button>
            </div>
          </motion.div>
        )}

{step === "review" && (
          <motion.div
            key="review"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            className="p-4"
          >
            <div className="text-center py-8">
              <div className="w-20 h-20 rounded-full bg-amber-500/10 mx-auto mb-4 flex items-center justify-center">
                <Clock className="w-10 h-10 text-amber-500" />
              </div>
              <h2 className="text-xl font-semibold mb-2">Ready for Review</h2>
              <p className="text-sm text-muted-foreground mb-8">
                All steps completed. Submit your verification for review.
              </p>

<div className="space-y-2 mb-8">
                {steps.slice(0, 3).map((s) => {
                  const Icon = s.icon
                  return (
                    <Card key={s.id} className="p-3 flex items-center gap-3 bg-emerald-500/5">
                      <CheckCircle2 className="w-5 h-5 text-emerald-500" />
                      <span className="text-sm">{s.label}</span>
                    </Card>
                  )
                })}
              </div>

<p className="text-xs text-muted-foreground mb-6">
                Verification typically takes 24-48 hours. You'll receive a notification when complete.
              </p>

<Button className="w-full h-12" onClick={handleSubmit} disabled={isProcessing}>
                {isProcessing ? "Submitting..." : "Submit for Review"}
              </Button>
            </div>
          </motion.div>
        )}

{step === "complete" && (
          <motion.div
            key="complete"
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="p-4"
          >
            <div className="text-center py-12">
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ type: "spring", delay: 0.2 }}
                className="w-24 h-24 rounded-full bg-emerald-500 mx-auto mb-6 flex items-center justify-center"
              >
                <CheckCircle2 className="w-12 h-12 text-white" />
              </motion.div>
              <h2 className="text-2xl font-semibold mb-2">Verified!</h2>
              <p className="text-muted-foreground mb-8">
                Your account has been verified. You now have access to all premium features.
              </p>

<Badge className="bg-emerald-500 text-white mb-8">
                <Shield className="w-3 h-3 mr-1" />
                Luxlane Verified
              </Badge>

<Button className="w-full h-12" onClick={onComplete}>
                Continue
              </Button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]yaml:file="docker-compose.yml"
services:
  postgres:
    image: postgres:16-alpine
    container_name: luxlane-postgres
    restart: unless-stopped
    environment:
      POSTGRES_USER: luxlane
      POSTGRES_PASSWORD: luxlane
      POSTGRES_DB: luxlane
    ports:
      - "5433:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:
[V0_FILE]markdown:file="docs/API-ROUTES.md"
# API Routes Reference

For every route: **route** (method + path) and **the rest** (auth, body/query, response).

---

## Agency

### Get agency roster (My Models)

- **Route:** `GET /api/agency/models`
- **Auth:** Required, cookie; role must be `agency`.
- **Query:** None.
- **Response:** `200` → `{ roster: AgencyRosterItem[] }`
  - `AgencyRosterItem`: `id`, `username`, `email`, `displayName`, `avatarUrl`, `location`, `bio`, `verificationStatus`, `availability`, `luxlaneScore`, `submissions[]`
  - Each `submission`: `id`, `status`, `submittedAt`, `casting` (id, title, type, status, location, startDate, endDate, deadline).
- **File:** `app/api/agency/models/route.ts`
- **Client:** `api.getAgencyRoster()` in `lib/api-client.ts`

---

## Auth

| Route | Method | Auth | Body / Query | Response |
|-------|--------|------|-------------|----------|
| `/api/auth/login` | POST | — | `{ email, password }` | `{ user, accessToken }` + Set-Cookie refresh |
| `/api/auth/signup` | POST | — | `{ email, password, displayName, role, username? }` | `{ user }` |
| `/api/auth/me` | GET | Cookie | — | `{ user }` |
| `/api/auth/refresh` | POST | Cookie (refresh) | — | `{ accessToken }` |
| `/api/auth/logout` | POST | Cookie | — | 200 |

---

## Castings

| Route | Method | Auth | Body / Query | Response |
|-------|--------|------|-------------|----------|
| `/api/castings` | GET | — | `status`, `query`, `tags`, `creatorId`, `limit`, `offset` | `{ castings }` |
| `/api/castings` | POST | Brand/Agency | Casting fields | `{ casting }` |
| `/api/castings/[id]` | GET | — | — | Casting + requirements |
| `/api/castings/[id]/apply` | POST | Model | `{ note? }` | `{ submission }` |
| `/api/castings/[id]/submit` | POST | Agency | `{ modelIds[], note? }` | `{ success, submissionsCreated }` |
| `/api/castings/[id]/saved` | GET/POST/DELETE | User | — | Saved state / 200 |
| `/api/castings/[id]/submission` | GET | User | — | User's submission if any |
| `/api/castings/[id]/submissions` | GET | Creator | — | All submissions for casting |

---

## Profiles

| Route | Method | Auth | Body / Query | Response |
|-------|--------|------|-------------|----------|
| `/api/profiles/me` | GET/PATCH | User | PATCH: profile/model fields | Profile + role profile |
| `/api/profiles/[username]` | GET | — | — | Public profile by username |
| `/api/profiles/model` | PATCH | Model | ModelProfile fields | Updated model profile |

---

## Conversations & Messages

| Route | Method | Auth | Body / Query | Response |
|-------|--------|------|-------------|----------|
| `/api/conversations` | GET | User | — | `{ conversations }` with last message + other user |
| `/api/conversations/direct/[userId]` | GET/POST | User | — | Get or create direct conversation |
| `/api/conversations/[id]/messages` | GET/POST | Member | GET: `before?`, `limit` | `{ messages }` / created message |

---

## Posts (Feed)

| Route | Method | Auth | Body / Query | Response |
|-------|--------|------|-------------|----------|
| `/api/posts` | GET | — | `limit`, `cursor` | `{ posts }` |
| `/api/posts` | POST | User | `{ imageUrl, caption? }` | Created post |
| `/api/posts/[id]/like` | POST/DELETE | User | — | Toggle like, `{ liked, count }` |
| `/api/posts/[id]/save` | POST/DELETE | User | — | Toggle save |
| `/api/posts/[id]/comments` | GET/POST | — / User | POST: `{ body }` | `{ comments }` / created comment |

---

## Other

| Route | Method | Auth | Body / Query | Response |
|-------|--------|------|-------------|----------|
| `/api/settings` | GET/PATCH | User | PATCH: settings fields | User settings |
| `/api/follows/[userId]` | POST/DELETE | User | — | Follow / unfollow |
| `/api/notifications` | GET | User | — | Notifications list |
| `/api/notifications/[id]/read` | PATCH | User | — | Mark read |
| `/api/media/presign` | POST | User | Upload metadata | Presigned URL |
| `/api/media/confirm` | POST | User | Final asset payload | Confirm upload |
| `/api/models/top` | GET | — | — | Top models |
| `/api/scoreboard` | GET | — | — | Scoreboard data |

---

When adding or changing a route, update this file with: **route**, **method**, **auth**, **body/query**, and **response** (and file/client if relevant).
[V0_FILE]typescript:file="hooks/use-mobile.ts"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="instrumentation.ts"
/**
 * Runs once when the Next.js server starts.
 * In development, if the DB has 0 users we auto-run the seed so login works.
 */
export async function register() {
  if (process.env.NEXT_RUNTIME !== "nodejs" || process.env.NODE_ENV !== "development") {
    return
  }
  // Ensure .env is loaded (Next.js may not have loaded it yet when instrumentation runs)
  try {
    const pathMod = await import("path")
    const root = process.cwd()
    const dotenv = await import("dotenv")
    dotenv.config({ path: pathMod.join(root, ".env") })
    dotenv.config({ path: pathMod.join(root, ".env.local") })
  } catch {
    // dotenv optional
  }
  if (!process.env.DATABASE_URL) {
    return
  }
  try {
    const { PrismaClient } = await import("@prisma/client")
    const prisma = new PrismaClient()
    const count = await prisma.user.count()
    await prisma.$disconnect()
    if (count === 0) {
      console.log("[Luxlane] DB has no users. Applying migrations and running seed...")
      const { execSync } = await import("child_process")
      const root = process.cwd()
      try {
        execSync("npx prisma migrate deploy", { stdio: "inherit", env: process.env, cwd: root })
      } catch (e) {
        console.warn("[Luxlane] Migrate deploy failed (run manually: npm run db:seed):", e)
        return
      }
      execSync("node scripts/run-seed.cjs", {
        stdio: "inherit",
        env: process.env,
        cwd: root,
      })
      console.log("[Luxlane] Seed complete. Use sofia@luxlane.demo / password123 to log in.")
    }
  } catch (e) {
    console.warn("[Luxlane] Auto-seed check failed:", e)
  }
}
[V0_FILE]typescript:file="lib/ai-matching.ts"
import type { User, Casting, FitScore, ModelMatch, ModelRequirements } from "./types"
import { mockUsers } from "./mock-data"

// Parse height string to cm
function parseHeightToCm(height: string): number {
  const match = height.match(/(\d+)/)
  return match ? Number.parseInt(match[1]) : 0
}

// Calculate physical match score
function calculatePhysicalMatch(model: User, requirements: ModelRequirements): number {
  if (!model.measurements) return 50

let score = 70 // Base score

// Height matching
  if (requirements.heightRangeCm && model.measurements.heightCm) {
    const { min, max } = requirements.heightRangeCm
    const height = model.measurements.heightCm

if (height >= min && height <= max) {
      score += 30 // Perfect match
    } else if (height >= min - 2 && height <= max + 2) {
      score += 15 // Close match
    } else {
      score -= 20 // Out of range
    }
  }

return Math.max(0, Math.min(100, score))
}

// Calculate experience match score
function calculateExperienceMatch(model: User, requirements: ModelRequirements): number {
  const modelTags = model.tags || []
  const requiredTags = requirements.tags || []
  const requiredExperience = requirements.experience || []

if (requiredTags.length === 0 && requiredExperience.length === 0) return 70

const allRequired = [...new Set([...requiredTags, ...requiredExperience])]
  const matchCount = allRequired.filter((tag) =>
    modelTags.some((mt) => mt.toLowerCase().includes(tag.toLowerCase())),
  ).length

const matchRatio = matchCount / allRequired.length
  return Math.round(50 + matchRatio * 50)
}

// Calculate reliability score from metrics
function calculateReliability(model: User): number {
  if (!model.metrics?.components) return 50

const { responseRate, reliability } = model.metrics.components
  return Math.round((responseRate + reliability) / 2)
}

// Calculate brand affinity score
function calculateBrandAffinity(model: User, casting: Casting): number {
  const modelTags = model.tags || []
  const brandTags = casting.creator.tags || []

if (brandTags.length === 0) return 60

const matchCount = brandTags.filter((tag) =>
    modelTags.some((mt) => mt.toLowerCase().includes(tag.toLowerCase())),
  ).length

const matchRatio = matchCount / brandTags.length
  return Math.round(40 + matchRatio * 60)
}

// Calculate momentum score (recent activity)
function calculateMomentum(model: User): number {
  if (!model.metrics) return 50

const { trend, trendChange, rankTier } = model.metrics

let score = 50

if (trend === "up") score += Math.min(30, trendChange * 2)
  if (trend === "down") score -= Math.min(20, trendChange)

const tierBonus: Record<string, number> = {
    top10: 20,
    top50: 15,
    top100: 10,
    top500: 5,
    rising: 15,
    new: 0,
  }

score += tierBonus[rankTier] || 0

return Math.max(0, Math.min(100, score))
}

// Calculate total fit score
export function calculateFitScore(model: User, casting: Casting): FitScore {
  const physical = calculatePhysicalMatch(model, casting.requirements)
  const experience = calculateExperienceMatch(model, casting.requirements)
  const reliability = calculateReliability(model)
  const brandAffinity = calculateBrandAffinity(model, casting)
  const momentum = calculateMomentum(model)

// Weighted average
  const weights = {
    physical: 0.25,
    experience: 0.25,
    reliability: 0.2,
    brandAffinity: 0.15,
    momentum: 0.15,
  }

const total = Math.round(
    physical * weights.physical +
      experience * weights.experience +
      reliability * weights.reliability +
      brandAffinity * weights.brandAffinity +
      momentum * weights.momentum,
  )

return {
    total,
    breakdown: {
      physical,
      experience,
      reliability,
      brandAffinity,
      momentum,
    },
  }
}

// Get top matches for a casting
export function getTopMatchesForCasting(casting: Casting, limit = 10): ModelMatch[] {
  const models = mockUsers.filter((u) => u.role === "model")

const matches: ModelMatch[] = models.map((model) => ({
    model,
    fitScore: calculateFitScore(model, casting),
  }))

// Sort by total fit score descending
  matches.sort((a, b) => b.fitScore.total - a.fitScore.total)

return matches.slice(0, limit)
}

// Get recommended castings for a model
export function getRecommendedCastingsForModel(
  model: User,
  castings: Casting[],
  limit = 5,
): Array<{ casting: Casting; fitScore: FitScore }> {
  const activeCastings = castings.filter((c) => c.status === "active")

const recommendations = activeCastings.map((casting) => ({
    casting,
    fitScore: calculateFitScore(model, casting),
  }))

// Sort by fit score descending
  recommendations.sort((a, b) => b.fitScore.total - a.fitScore.total)

return recommendations.slice(0, limit)
}

// Get best castings for agency roster
export function getBestCastingsForRoster(
  roster: User[],
  castings: Casting[],
  limit = 5,
): Array<{ casting: Casting; avgFitScore: number; topModel: User }> {
  const activeCastings = castings.filter((c) => c.status === "active")

const recommendations = activeCastings.map((casting) => {
    const scores = roster.map((model) => ({
      model,
      score: calculateFitScore(model, casting).total,
    }))

scores.sort((a, b) => b.score - a.score)
    const topModel = scores[0]?.model || roster[0]
    const avgScore = scores.reduce((sum, s) => sum + s.score, 0) / scores.length

return {
      casting,
      avgFitScore: Math.round(avgScore),
      topModel,
    }
  })

recommendations.sort((a, b) => b.avgFitScore - a.avgFitScore)

return recommendations.slice(0, limit)
}
[V0_FILE]typescript:file="lib/api-client.ts"
// API Client for making requests to the backend
const API_BASE = ""

export interface AgencyRosterSubmission {
  id: string
  status: string
  submittedAt: string
  casting: {
    id: string
    title: string
    type: string
    status: string
    location: string | null
    startDate: string | null
    endDate: string | null
    deadline: string | null
  } | null
}

export interface AgencyRosterItem {
  id: string
  username: string
  email: string
  displayName: string
  avatarUrl: string | null
  location: string | null
  bio: string | null
  verificationStatus: string
  availability: string
  luxlaneScore: number
  submissions: AgencyRosterSubmission[]
}

interface ApiResponse<T> {
  data?: T
  error?: string
}

let isRefreshing = false
let refreshPromise: Promise<boolean> | null = null

async function tryRefreshToken(): Promise<boolean> {
  if (isRefreshing && refreshPromise) return refreshPromise
  isRefreshing = true
  refreshPromise = (async () => {
    try {
      const res = await fetch(`${API_BASE}/api/auth/refresh`, { method: "POST", credentials: "include" })
      return res.ok
    } catch {
      return false
    } finally {
      isRefreshing = false
      refreshPromise = null
    }
  })()
  return refreshPromise
}

async function handleResponse<T>(response: Response, retryFn?: () => Promise<Response>): Promise<ApiResponse<T>> {
  if (response.status === 401 && retryFn) {
    const refreshed = await tryRefreshToken()
    if (refreshed) {
      const retryResponse = await retryFn()
      if (retryResponse.ok) {
        const data = await retryResponse.json()
        return { data }
      }
    }
  }
  if (!response.ok) {
    try {
      const errorData = await response.json()
      console.log("[v0] API error response:", response.status, errorData)
      return { error: errorData.error || `Error: ${response.status}` }
    } catch {
      console.log("[v0] API error (no JSON):", response.status, response.statusText)
      return { error: `Request failed: ${response.status} ${response.statusText}` }
    }
  }
  const data = await response.json()
  return { data }
}

export const api = {
  // Auth
  async signup(email: string, password: string, displayName: string, role: string, username?: string) {
    const response = await fetch(`${API_BASE}/api/auth/signup`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ email, password, displayName, role, username }),
    })
    return handleResponse(response)
  },

async login(email: string, password: string) {
    const response = await fetch(`${API_BASE}/api/auth/login`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ email, password }),
    })
    return handleResponse(response)
  },

async logout() {
    const response = await fetch(`${API_BASE}/api/auth/logout`, { method: "POST", credentials: "include" })
    return handleResponse(response)
  },

async refreshToken() {
    const response = await fetch(`${API_BASE}/api/auth/refresh`, { method: "POST" })
    return handleResponse(response)
  },

async getCurrentUser() {
    const doFetch = () => fetch(`${API_BASE}/api/auth/me`, { credentials: "include" })
    const response = await doFetch()
    return handleResponse(response, doFetch)
  },

async getSettings() {
    const response = await fetch(`${API_BASE}/api/settings`, { credentials: "include" })
    return handleResponse(response)
  },

async updateSettings(data: Record<string, unknown>) {
    const response = await fetch(`${API_BASE}/api/settings`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

// Profiles
  async getMyProfile() {
    const response = await fetch(`${API_BASE}/api/profiles/me`)
    return handleResponse(response)
  },

async updateMyProfile(data: Record<string, unknown>) {
    const response = await fetch(`${API_BASE}/api/profiles/me`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async getProfile(username: string) {
    const response = await fetch(`${API_BASE}/api/profiles/${username}`, { credentials: "include" })
    return handleResponse(response)
  },

async updateModelProfile(data: Record<string, unknown>) {
    const response = await fetch(`${API_BASE}/api/profiles/model`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async completeOnboarding(data: Record<string, unknown>) {
    const response = await fetch(`${API_BASE}/api/onboarding/complete`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

// Follows
  async follow(userId: string) {
    const response = await fetch(`${API_BASE}/api/follows/${userId}`, { method: "POST" })
    return handleResponse(response)
  },

async unfollow(userId: string) {
    const response = await fetch(`${API_BASE}/api/follows/${userId}`, { method: "DELETE" })
    return handleResponse(response)
  },

// Agency roster (My Models)
  async getAgencyRoster() {
    const response = await fetch(`${API_BASE}/api/agency/models`, { credentials: "include" })
    return handleResponse<{ roster: AgencyRosterItem[] }>(response)
  },

// Agency roster management
  async inviteModelToAgency(modelId: string, note?: string) {
    const response = await fetch(`${API_BASE}/api/agency/invite`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ modelId, note }),
    })
    return handleResponse(response)
  },

async removeModelFromAgency(modelId: string) {
    const response = await fetch(`${API_BASE}/api/agency/remove`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ modelId }),
    })
    return handleResponse(response)
  },

async getAgencyApplications(status?: string) {
    const params = status ? `?status=${status}` : ""
    const response = await fetch(`${API_BASE}/api/agency/applications${params}`, { credentials: "include" })
    return handleResponse(response)
  },

async applyToAgency(agencyId: string, note?: string) {
    const response = await fetch(`${API_BASE}/api/agency/applications`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ agencyId, note }),
    })
    return handleResponse(response)
  },

async respondToAgencyApplication(applicationId: string, action: "accept" | "reject") {
    const response = await fetch(`${API_BASE}/api/agency/applications/${applicationId}/respond`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ action }),
    })
    return handleResponse(response)
  },

// Availability calendar
  async getAvailability(month?: string, userId?: string) {
    const params = new URLSearchParams()
    if (month) params.set("month", month)
    if (userId) params.set("userId", userId)
    const response = await fetch(`${API_BASE}/api/availability?${params}`, { credentials: "include" })
    return handleResponse(response)
  },

async setAvailability(dates: Array<{ date: string; status: string }>) {
    const response = await fetch(`${API_BASE}/api/availability`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ dates }),
    })
    return handleResponse(response)
  },

async deleteAvailability(dates: string[]) {
    const response = await fetch(`${API_BASE}/api/availability`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ dates }),
    })
    return handleResponse(response)
  },

// Search
  async search(query: string, type?: string) {
    const params = new URLSearchParams({ q: query })
    if (type) params.set("type", type)
    const response = await fetch(`${API_BASE}/api/search?${params}`, { credentials: "include" })
    return handleResponse(response)
  },

// Password reset
  async resetPassword(email: string, newPassword?: string) {
    const response = await fetch(`${API_BASE}/api/auth/reset-password`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ email, newPassword }),
    })
    return handleResponse(response)
  },

// Follow suggestions
  async getFollowSuggestions() {
    const response = await fetch(`${API_BASE}/api/users/suggestions`, { credentials: "include" })
    return handleResponse(response)
  },

// Hashtags
  async getHashtags(query?: string) {
    const params = new URLSearchParams()
    if (query) params.set("q", query)
    const response = await fetch(`${API_BASE}/api/hashtags?${params}`, { credentials: "include" })
    return handleResponse(response)
  },

// Posts (feed)
  async getPosts(params?: { limit?: number; cursor?: string; feed?: string }) {
    const searchParams = new URLSearchParams()
    if (params?.limit) searchParams.set("limit", String(params.limit))
    if (params?.cursor) searchParams.set("cursor", params.cursor)
    if (params?.feed) searchParams.set("feed", params.feed)
    const url = `${API_BASE}/api/posts${searchParams.toString() ? `?${searchParams}` : ""}`
    const response = await fetch(url, { credentials: "include" })
    return handleResponse(response)
  },

async deletePost(postId: string) {
    const response = await fetch(`${API_BASE}/api/posts/${postId}`, { method: "DELETE", credentials: "include" })
    return handleResponse(response)
  },

async getSavedPosts() {
    const response = await fetch(`${API_BASE}/api/posts/saved`, { credentials: "include" })
    return handleResponse(response)
  },

async createPost(data: { imageUrl: string; caption?: string }) {
    const response = await fetch(`${API_BASE}/api/posts`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async likePost(postId: string) {
    const response = await fetch(`${API_BASE}/api/posts/${postId}/like`, {
      method: "POST",
      credentials: "include",
    })
    return handleResponse(response)
  },

async unlikePost(postId: string) {
    const response = await fetch(`${API_BASE}/api/posts/${postId}/like`, {
      method: "DELETE",
      credentials: "include",
    })
    return handleResponse(response)
  },

async savePost(postId: string) {
    const response = await fetch(`${API_BASE}/api/posts/${postId}/save`, {
      method: "POST",
      credentials: "include",
    })
    return handleResponse(response)
  },

async unsavePost(postId: string) {
    const response = await fetch(`${API_BASE}/api/posts/${postId}/save`, {
      method: "DELETE",
      credentials: "include",
    })
    return handleResponse(response)
  },

async getComments(postId: string) {
    const response = await fetch(`${API_BASE}/api/posts/${postId}/comments`, { credentials: "include" })
    return handleResponse(response)
  },

async addComment(postId: string, body: string) {
    const response = await fetch(`${API_BASE}/api/posts/${postId}/comments`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ body }),
    })
    return handleResponse(response)
  },

// Castings
  async getCastings(params?: { status?: string; query?: string; creatorId?: string; limit?: number; type?: string; payMin?: number; payMax?: number; location?: string; sortBy?: string }) {
    const searchParams = new URLSearchParams()
    if (params?.status) searchParams.set("status", params.status)
    if (params?.query) searchParams.set("query", params.query)
    if (params?.creatorId) searchParams.set("creatorId", params.creatorId)
    if (params?.limit) searchParams.set("limit", String(params.limit))
    if (params?.type) searchParams.set("type", params.type)
    if (params?.payMin !== undefined && params.payMin !== null) searchParams.set("payMin", String(params.payMin))
    if (params?.payMax !== undefined && params.payMax !== null) searchParams.set("payMax", String(params.payMax))
    if (params?.location) searchParams.set("location", params.location)
    if (params?.sortBy) searchParams.set("sortBy", params.sortBy)

const doFetch = () => fetch(`${API_BASE}/api/castings?${searchParams}`)
    const response = await doFetch()
    return handleResponse(response, doFetch)
  },

async getCasting(id: string) {
    const response = await fetch(`${API_BASE}/api/castings/${id}`)
    return handleResponse(response)
  },

async createCasting(data: Record<string, unknown>) {
    const response = await fetch(`${API_BASE}/api/castings`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async updateCasting(id: string, data: Record<string, unknown>) {
    const response = await fetch(`${API_BASE}/api/castings/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async activateCasting(id: string) {
    const response = await fetch(`${API_BASE}/api/castings/${id}/activate`, { method: "POST" })
    return handleResponse(response)
  },

async closeCasting(id: string) {
    const response = await fetch(`${API_BASE}/api/castings/${id}/close`, { method: "POST" })
    return handleResponse(response)
  },

async applyToCasting(id: string, data: { note?: string; portfolioIds?: string[] }) {
    const response = await fetch(`${API_BASE}/api/castings/${id}/apply`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async getCastingSubmission(castingId: string) {
    const response = await fetch(`${API_BASE}/api/castings/${castingId}/submission`, { credentials: "include" })
    return handleResponse(response)
  },

async saveCasting(castingId: string) {
    const response = await fetch(`${API_BASE}/api/castings/${castingId}/saved`, {
      method: "POST",
      credentials: "include",
    })
    return handleResponse(response)
  },

async unsaveCasting(castingId: string) {
    const response = await fetch(`${API_BASE}/api/castings/${castingId}/saved`, {
      method: "DELETE",
      credentials: "include",
    })
    return handleResponse(response)
  },

async getCastingSaved(castingId: string) {
    const response = await fetch(`${API_BASE}/api/castings/${castingId}/saved`, { credentials: "include" })
    return handleResponse(response)
  },

async getCastingTopMatches(castingId: string, limit = 10) {
    const response = await fetch(
      `${API_BASE}/api/castings/${castingId}/top-matches?limit=${limit}`,
      { credentials: "include" }
    )
    return handleResponse<{ matches: Array<{ model: Record<string, unknown>; fitScore: Record<string, unknown> }> }>(response)
  },

async inviteModelToCasting(castingId: string, modelId: string) {
    const response = await fetch(`${API_BASE}/api/castings/${castingId}/invite`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ modelId }),
    })
    return handleResponse(response)
  },

async submitModelsToCasting(id: string, data: { modelIds: string[]; note?: string }) {
    const response = await fetch(`${API_BASE}/api/castings/${id}/submit`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async getSubmissions(castingId: string, status?: string) {
    const url = status
      ? `${API_BASE}/api/castings/${castingId}/submissions?status=${status}`
      : `${API_BASE}/api/castings/${castingId}/submissions`
    const response = await fetch(url)
    return handleResponse(response)
  },

async updateSubmissionStatus(submissionId: string, status: string) {
    const response = await fetch(`${API_BASE}/api/submissions/${submissionId}/status`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status }),
    })
    return handleResponse(response)
  },

async acceptOffer(submissionId: string) {
    const response = await fetch(`${API_BASE}/api/submissions/${submissionId}/accept`, { method: "POST" })
    return handleResponse(response)
  },

async declineOffer(submissionId: string) {
    const response = await fetch(`${API_BASE}/api/submissions/${submissionId}/decline`, { method: "POST" })
    return handleResponse(response)
  },

// Notifications
  async getNotifications(unreadOnly?: boolean) {
    const url = unreadOnly ? `${API_BASE}/api/notifications?unread=true` : `${API_BASE}/api/notifications`
    const doFetch = () => fetch(url, { credentials: "include" })
    const response = await doFetch()
    return handleResponse(response, doFetch)
  },

async markNotificationRead(id: string) {
    const response = await fetch(`${API_BASE}/api/notifications/${id}/read`, { method: "PATCH" })
    return handleResponse(response)
  },

async markAllNotificationsRead() {
    const response = await fetch(`${API_BASE}/api/notifications/read-all`, { method: "POST" })
    return handleResponse(response)
  },

// Conversations
  async getConversations() {
    const doFetch = () => fetch(`${API_BASE}/api/conversations`, { credentials: "include" })
    const response = await doFetch()
    return handleResponse(response, doFetch)
  },

async startDirectConversation(userId: string) {
    const response = await fetch(`${API_BASE}/api/conversations/direct/${userId}`, {
      method: "POST",
      credentials: "include",
    })
    return handleResponse(response)
  },

async getMessages(conversationId: string, before?: string) {
    const url = before
      ? `${API_BASE}/api/conversations/${conversationId}/messages?before=${before}`
      : `${API_BASE}/api/conversations/${conversationId}/messages`
    const response = await fetch(url, { credentials: "include" })
    return handleResponse(response)
  },

async sendMessage(conversationId: string, content: string, attachments?: string[]) {
    const response = await fetch(`${API_BASE}/api/conversations/${conversationId}/messages`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ content, attachments }),
    })
    return handleResponse(response)
  },

// Scoreboard
  async getScoreboard(filter?: string, limit?: number) {
    const params = new URLSearchParams()
    if (filter) params.set("filter", filter)
    if (limit) params.set("limit", String(limit))
    const response = await fetch(`${API_BASE}/api/scoreboard?${params}`)
    return handleResponse(response)
  },

async getTopModels(filter?: string, limit?: number) {
    const params = new URLSearchParams()
    if (filter) params.set("filter", filter)
    if (limit) params.set("limit", String(limit))
    const response = await fetch(`${API_BASE}/api/models/top?${params}`)
    return handleResponse(response)
  },

// Digital Twin
  async getMyDigitalTwin() {
    const response = await fetch(`${API_BASE}/api/digital-twin`)
    return handleResponse(response)
  },

async startDigitalTwin() {
    const response = await fetch(`${API_BASE}/api/digital-twin`, { method: "POST" })
    return handleResponse(response)
  },

async completeDigitalTwinUpload(inputUrls: string[]) {
    const response = await fetch(`${API_BASE}/api/digital-twin/upload-complete`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ inputUrls }),
    })
    return handleResponse(response)
  },

async getDigitalTwin(username: string) {
    const response = await fetch(`${API_BASE}/api/digital-twin/${username}`)
    return handleResponse(response)
  },

// Media
  async getPresignedUrl(filename: string, contentType: string, type: string) {
    const response = await fetch(`${API_BASE}/api/media/presign`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ filename, contentType, type }),
    })
    return handleResponse(response)
  },

async confirmMedia(data: { url: string; type: string; meta?: Record<string, unknown> }) {
    const response = await fetch(`${API_BASE}/api/media/confirm`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

/** Add a portfolio image by URL (MVP: paste public image URL). */
  async addPortfolioImage(url: string) {
    return this.confirmMedia({ url, type: "PORTFOLIO" })
  },

// Casting Rooms
  async getCastingRoom(castingId: string) {
    const response = await fetch(`${API_BASE}/api/casting-rooms?castingId=${castingId}`, { credentials: "include" })
    return handleResponse(response)
  },

async createCastingRoom(castingId: string) {
    const response = await fetch(`${API_BASE}/api/casting-rooms`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ castingId }),
    })
    return handleResponse(response)
  },

async getRoomEvents(roomId: string) {
    const response = await fetch(`${API_BASE}/api/casting-rooms/${roomId}/events`, { credentials: "include" })
    return handleResponse(response)
  },

async createRoomEvent(roomId: string, data: { type: string; targetUserId?: string; message?: string }) {
    const response = await fetch(`${API_BASE}/api/casting-rooms/${roomId}/events`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async getRoomFiles(roomId: string) {
    const response = await fetch(`${API_BASE}/api/casting-rooms/${roomId}/files`, { credentials: "include" })
    return handleResponse(response)
  },

async uploadRoomFile(roomId: string, data: { name: string; type: string; url: string }) {
    const response = await fetch(`${API_BASE}/api/casting-rooms/${roomId}/files`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async getRoomSchedule(roomId: string) {
    const response = await fetch(`${API_BASE}/api/casting-rooms/${roomId}/schedule`, { credentials: "include" })
    return handleResponse(response)
  },

async addRoomScheduleItem(roomId: string, data: { title: string; date: string; time: string; location?: string; notes?: string }) {
    const response = await fetch(`${API_BASE}/api/casting-rooms/${roomId}/schedule`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async getRoomMessages(roomId: string, before?: string) {
    const url = before
      ? `${API_BASE}/api/casting-rooms/${roomId}/messages?before=${before}`
      : `${API_BASE}/api/casting-rooms/${roomId}/messages`
    const response = await fetch(url, { credentials: "include" })
    return handleResponse(response)
  },

async sendRoomMessage(roomId: string, content: string) {
    const response = await fetch(`${API_BASE}/api/casting-rooms/${roomId}/messages`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ content }),
    })
    return handleResponse(response)
  },

async getMedia(ownerId?: string, type?: string) {
    const params = new URLSearchParams()
    if (ownerId) params.set("ownerId", ownerId)
    if (type) params.set("type", type)
    const response = await fetch(`${API_BASE}/api/media?${params}`, { credentials: "include" })
    return handleResponse(response)
  },

async deleteMedia(id: string) {
    const response = await fetch(`${API_BASE}/api/media/${id}`, {
      method: "DELETE",
      credentials: "include",
    })
    return handleResponse(response)
  },

async reorderMedia(orderedIds: string[]) {
    const response = await fetch(`${API_BASE}/api/media/reorder`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ orderedIds }),
    })
    return handleResponse(response)
  },

// Block / Report
  async blockUser(username: string) {
    const response = await fetch(`${API_BASE}/api/users/${username}/block`, {
      method: "POST",
      credentials: "include",
    })
    return handleResponse(response)
  },

async unblockUser(username: string) {
    const response = await fetch(`${API_BASE}/api/users/${username}/block`, {
      method: "DELETE",
      credentials: "include",
    })
    return handleResponse(response)
  },

async checkBlocked(username: string) {
    const response = await fetch(`${API_BASE}/api/users/${username}/block`, { credentials: "include" })
    return handleResponse(response)
  },

async reportUser(username: string, reason: string, details?: string) {
    const response = await fetch(`${API_BASE}/api/users/${username}/report`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ reason, details }),
    })
    return handleResponse(response)
  },

// Saved Models (Talent Pool)
  async getSavedModels() {
    const response = await fetch(`${API_BASE}/api/saved-models`, { credentials: "include" })
    return handleResponse(response)
  },

async saveModel(modelId: string, note?: string) {
    const response = await fetch(`${API_BASE}/api/saved-models`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ modelId, note }),
    })
    return handleResponse(response)
  },

async unsaveModel(modelId: string) {
    const response = await fetch(`${API_BASE}/api/saved-models`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ modelId }),
    })
    return handleResponse(response)
  },

// Job History
  async getJobHistory(params?: { status?: string; limit?: number; offset?: number }) {
    const searchParams = new URLSearchParams()
    if (params?.status) searchParams.set("status", params.status)
    if (params?.limit) searchParams.set("limit", String(params.limit))
    if (params?.offset) searchParams.set("offset", String(params.offset))
    const response = await fetch(`${API_BASE}/api/submissions/history?${searchParams}`, { credentials: "include" })
    return handleResponse(response)
  },

// Bulk Actions
  async bulkAction(castingId: string, data: { action: string; submissionIds?: string[]; modelIds?: string[] }) {
    const response = await fetch(`${API_BASE}/api/castings/${castingId}/bulk-action`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

// ─── Phase 3: Analytics ───

async getProfileAnalytics(profileId?: string) {
    const params = profileId ? `?profileId=${profileId}` : ""
    const response = await fetch(`${API_BASE}/api/analytics/profile${params}`, { credentials: "include" })
    return handleResponse(response)
  },

async trackProfileView(profileId: string, source?: string) {
    const response = await fetch(`${API_BASE}/api/analytics/profile/track`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ profileId, source }),
    })
    return handleResponse(response)
  },

async getCastingAnalytics(castingId: string) {
    const response = await fetch(`${API_BASE}/api/analytics/casting?castingId=${castingId}`, { credentials: "include" })
    return handleResponse(response)
  },

async trackCastingView(castingId: string) {
    const response = await fetch(`${API_BASE}/api/analytics/casting/track`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ castingId }),
    })
    return handleResponse(response)
  },

// ─── Phase 3: Earnings ───

async getEarnings(params?: { status?: string; limit?: number; offset?: number }) {
    const searchParams = new URLSearchParams()
    if (params?.status) searchParams.set("status", params.status)
    if (params?.limit) searchParams.set("limit", String(params.limit))
    if (params?.offset) searchParams.set("offset", String(params.offset))
    const response = await fetch(`${API_BASE}/api/earnings?${searchParams}`, { credentials: "include" })
    return handleResponse(response)
  },

// ─── Phase 3: Stories ───

async getStoryFeed() {
    const response = await fetch(`${API_BASE}/api/stories`, { credentials: "include" })
    return handleResponse(response)
  },

async getUserStories(userId: string) {
    const response = await fetch(`${API_BASE}/api/stories?userId=${userId}`, { credentials: "include" })
    return handleResponse(response)
  },

async createStory(data: { mediaUrl: string; mediaType?: string; caption?: string }) {
    const response = await fetch(`${API_BASE}/api/stories`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async deleteStory(storyId: string) {
    const response = await fetch(`${API_BASE}/api/stories/${storyId}`, {
      method: "DELETE",
      credentials: "include",
    })
    return handleResponse(response)
  },

async viewStory(storyId: string) {
    const response = await fetch(`${API_BASE}/api/stories/${storyId}/view`, {
      method: "POST",
      credentials: "include",
    })
    return handleResponse(response)
  },

// ─── Phase 3: Highlights ───

async getHighlights(userId: string) {
    const response = await fetch(`${API_BASE}/api/highlights?userId=${userId}`, { credentials: "include" })
    return handleResponse(response)
  },

async createHighlight(data: { title: string; coverUrl?: string; storyIds?: string[] }) {
    const response = await fetch(`${API_BASE}/api/highlights`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async updateHighlight(id: string, data: { title?: string; coverUrl?: string; addStoryIds?: string[]; removeStoryIds?: string[] }) {
    const response = await fetch(`${API_BASE}/api/highlights/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async deleteHighlight(id: string) {
    const response = await fetch(`${API_BASE}/api/highlights/${id}`, {
      method: "DELETE",
      credentials: "include",
    })
    return handleResponse(response)
  },

// ─── Direct Bookings ───

async getBookings() {
    const response = await fetch(`${API_BASE}/api/bookings`, { credentials: "include" })
    return handleResponse(response)
  },

async createBooking(data: {
    modelId: string
    title: string
    description?: string
    location?: string
    startDate?: string
    endDate?: string
    payAmount?: number
  }) {
    const response = await fetch(`${API_BASE}/api/bookings`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

async updateBooking(id: string, data: { status: string }) {
    const response = await fetch(`${API_BASE}/api/bookings/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(data),
    })
    return handleResponse(response)
  },

// ─── Moderation Reports ───

async getReports(status?: string) {
    const params = status ? `?status=${status}` : ""
    const response = await fetch(`${API_BASE}/api/reports${params}`, { credentials: "include" })
    return handleResponse(response)
  },

async updateReport(id: string, status: string) {
    const response = await fetch(`${API_BASE}/api/reports/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({ status }),
    })
    return handleResponse(response)
  },

async getModels(params?: { unsigned?: boolean; query?: string; limit?: number }) {
    const searchParams = new URLSearchParams()
    if (params?.unsigned) searchParams.set("unsigned", "true")
    if (params?.query) searchParams.set("query", params.query)
    if (params?.limit) searchParams.set("limit", String(params.limit))
    const qs = searchParams.toString()
    const response = await fetch(`${API_BASE}/api/models${qs ? `?${qs}` : ""}`, { credentials: "include" })
    return handleResponse(response)
  },
}

export const apiClient = api
[V0_FILE]typescriptreact:file="lib/auth-context.tsx"
"use client"

import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react"
import type { User, UserRole } from "./types"
import { mockUsers } from "./mock-data"
import { api } from "./api-client"

// Set to false to use real database APIs
const USE_MOCK_DATA = false

interface AuthContextType {
  user: User | null
  isAuthenticated: boolean
  isLoading: boolean
  login: (email: string, password: string) => Promise<{ success: boolean; error?: string }>
  signup: (data: SignupData) => Promise<boolean>
  logout: () => void
  updateUser: (updates: Partial<User>) => void
  refreshUser: () => Promise<void>
}

interface SignupData {
  email: string
  password: string
  name: string
  username: string
  role: UserRole
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

// Helper to convert API user to frontend User type
function apiUserToUser(apiUser: Record<string, unknown>): User {
  return {
    id: apiUser.id as string,
    email: apiUser.email as string,
    name: (apiUser.displayName as string) || (apiUser.display_name as string) || "",
    username: (apiUser.username as string) || "",
    role: apiUser.role as UserRole,
    verified: (apiUser.isVerified as boolean) || (apiUser.is_verified as boolean) || false,
    avatar: (apiUser.avatarUrl as string) || (apiUser.avatar_url as string) || "/placeholder.svg?height=400&width=400",
    bio: (apiUser.bio as string) || "",
    location: (apiUser.location as string) || "",
    followers: 0,
    following: 0,
    createdAt: new Date((apiUser.createdAt as string) || (apiUser.created_at as string) || Date.now()),
    verificationLevel: ((apiUser.isVerified as boolean) || (apiUser.is_verified as boolean) ? "luxlane_verified" : "unverified") as import("./types").VerificationLevel,
  }
}

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)

// On mount: check if user logged in during this browser session
  // If sessionStorage has "luxlane_logged_in", restore from API
  // Otherwise show login page (don't auto-login from stale cookies)
  useEffect(() => {
    if (USE_MOCK_DATA) {
      setIsLoading(false)
      return
    }

async function init() {
      const wasLoggedIn = typeof window !== "undefined" && sessionStorage.getItem("luxlane_logged_in")
      if (wasLoggedIn) {
        // Restore session from cookie
        const result = await api.getCurrentUser()
        if (result.data?.user) {
          setUser(apiUserToUser(result.data.user))
        } else {
          // Cookie expired — clear flag
          sessionStorage.removeItem("luxlane_logged_in")
        }
      }
      setIsLoading(false)
    }
    init()
  }, [])

const refreshUser = useCallback(async () => {
    if (USE_MOCK_DATA) return

const result = await api.getCurrentUser()
    if (result.data?.user) {
      setUser(apiUserToUser(result.data.user))
    }
  }, [])

const login = useCallback(async (email: string, password: string): Promise<{ success: boolean; error?: string }> => {
    setIsLoading(true)

if (USE_MOCK_DATA) {
      // Mock login behavior
      await new Promise((resolve) => setTimeout(resolve, 1000))
      const foundUser = mockUsers.find((u) => u.email.toLowerCase() === email.toLowerCase())
      if (foundUser) {
        setUser(foundUser)
        setIsLoading(false)
        return { success: true }
      }
      // Create mock user if not found
      const newUser: User = {
        id: crypto.randomUUID(),
        email,
        name: email.split("@")[0],
        username: email.split("@")[0].toLowerCase(),
        role: "model",
        verified: false,
        avatar: "/placeholder.svg?height=400&width=400",
        bio: "",
        location: "",
        followers: 0,
        following: 0,
        createdAt: new Date(),
      }
      setUser(newUser)
      setIsLoading(false)
      return { success: true }
    }

// Real API login
    const result = await api.login(email, password)
    setIsLoading(false)

if (result.error) {
      return { success: false, error: result.error }
    }

if (result.data?.user) {
      setUser(apiUserToUser(result.data.user))
      if (typeof window !== "undefined") sessionStorage.setItem("luxlane_logged_in", "1")
      return { success: true }
    }

return { success: false, error: "Invalid response from server" }
  }, [])

const signup = useCallback(async (data: SignupData): Promise<boolean> => {
    setIsLoading(true)

if (USE_MOCK_DATA) {
      // Mock signup behavior
      await new Promise((resolve) => setTimeout(resolve, 1500))
      const newUser: User = {
        id: crypto.randomUUID(),
        email: data.email,
        name: data.name,
        username: data.username,
        role: data.role,
        verified: false,
        avatar: "/placeholder.svg?height=400&width=400",
        bio: "",
        location: "",
        followers: 0,
        following: 0,
        createdAt: new Date(),
      }
      setUser(newUser)
      setIsLoading(false)
      return true
    }

// Real API signup
    const result = await api.signup(data.email, data.password, data.name, data.role, data.username)
    setIsLoading(false)

if (result.error) {
      console.error("Signup error:", result.error)
      return false
    }

if (result.data?.user) {
      setUser(apiUserToUser(result.data.user))
      if (typeof window !== "undefined") sessionStorage.setItem("luxlane_logged_in", "1")
      return true
    }

return false
  }, [])

const logout = useCallback(async () => {
    if (!USE_MOCK_DATA) {
      await api.logout()
    }
    if (typeof window !== "undefined") sessionStorage.removeItem("luxlane_logged_in")
    setUser(null)
  }, [])

const updateUser = useCallback((updates: Partial<User>) => {
    setUser((prev) => (prev ? { ...prev, ...updates } : null))
  }, [])

return (
    <AuthContext.Provider
      value={{
        user,
        isAuthenticated: !!user,
        isLoading,
        login,
        signup,
        logout,
        updateUser,
        refreshUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescript:file="lib/auth.ts"
import { SignJWT, jwtVerify } from "jose"
import { cookies } from "next/headers"
import { createHash } from "crypto"
import bcrypt from "bcryptjs"
import { v4 as uuidv4 } from "uuid"

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET || "luxlane-secret-key-change-in-production")
const ACCESS_TOKEN_EXPIRY = "24h"

export type UserRole = "model" | "agency" | "brand" | "client"

export interface JWTPayload {
  userId: string
  email: string
  role: UserRole
  username: string
  displayName: string
  iat?: number
  exp?: number
}

export interface AuthUser {
  id: string
  email: string
  role: UserRole
  username: string
  displayName: string
  avatarUrl: string | null
  isVerified: boolean
  onboardingComplete: boolean
}

function hashToken(token: string): string {
  return createHash("sha256").update(token).digest("hex")
}

// Generate access token
export async function generateAccessToken(payload: Omit<JWTPayload, "iat" | "exp">): Promise<string> {
  return new SignJWT(payload)
    .setProtectedHeader({ alg: "HS256" })
    .setIssuedAt()
    .setExpirationTime(ACCESS_TOKEN_EXPIRY)
    .sign(JWT_SECRET)
}

// Verify access token
export async function verifyAccessToken(token: string): Promise<JWTPayload | null> {
  try {
    const { payload } = await jwtVerify(token, JWT_SECRET)
    return payload as unknown as JWTPayload
  } catch {
    return null
  }
}

// Hash password
export async function hashPassword(password: string): Promise<string> {
  return bcrypt.hash(password, 12)
}

// Verify password
export async function verifyPassword(password: string, hash: string): Promise<boolean> {
  return bcrypt.compare(password, hash)
}

// Try to get Prisma client — returns null if DB is unavailable or schema is out of sync
async function tryPrisma() {
  try {
    const { prisma } = await import("./prisma")
    // Check connectivity AND schema by touching a real table
    await prisma.user.findFirst({ take: 1, select: { id: true } })
    return prisma
  } catch {
    return null
  }
}

// Generate refresh token (DB-backed, silently skipped if DB unavailable)
export async function generateRefreshToken(userId: string): Promise<string> {
  const token = uuidv4()
  try {
    const prisma = await tryPrisma()
    if (prisma) {
      const expiresAt = new Date()
      expiresAt.setDate(expiresAt.getDate() + 7)
      await prisma.refreshToken.create({
        data: { userId, tokenHash: hashToken(token), expiresAt },
      })
    }
  } catch {
    // DB unavailable or mock user ID — skip storing refresh token
  }
  return token
}

// Get current user from JWT (falls back to JWT-only when DB is unavailable)
export async function getCurrentUser(): Promise<AuthUser | null> {
  const cookieStore = await cookies()
  const accessToken = cookieStore.get("access_token")?.value

if (!accessToken) return null

const payload = await verifyAccessToken(accessToken)
  if (!payload) return null

// Try DB first for full profile data
  const prisma = await tryPrisma()
  if (prisma) {
    try {
      const user = await prisma.user.findUnique({
        where: { id: payload.userId },
        include: { profile: true },
      })
      if (user) {
        const profile = user.profile
        return {
          id: user.id,
          email: user.email,
          role: user.role.toLowerCase() as UserRole,
          username: user.username,
          displayName: profile?.displayName ?? user.username,
          avatarUrl: profile?.avatarUrl ?? null,
          isVerified: profile ? profile.verificationStatus !== "UNVERIFIED" : false,
          onboardingComplete: !!profile,
        }
      }
    } catch {
      // DB query failed, fall through to JWT-only
    }
  }

// JWT-only fallback (mock / no-DB mode)
  return {
    id: payload.userId,
    email: payload.email,
    role: payload.role,
    username: payload.username || payload.email.split("@")[0],
    displayName: payload.displayName || payload.username || payload.email.split("@")[0],
    avatarUrl: null,
    isVerified: false,
    onboardingComplete: true,
  }
}

// Set auth cookies
export async function setAuthCookies(accessToken: string, refreshToken: string): Promise<void> {
  const cookieStore = await cookies()

cookieStore.set("access_token", accessToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    maxAge: 24 * 60 * 60,
    path: "/",
  })

cookieStore.set("refresh_token", refreshToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    maxAge: 7 * 24 * 60 * 60,
    path: "/",
  })
}

// Clear auth cookies
export async function clearAuthCookies(): Promise<void> {
  const cookieStore = await cookies()
  cookieStore.delete("access_token")
  cookieStore.delete("refresh_token")
}

// Generate unique username from display name
export async function generateUniqueUsername(displayName: string): Promise<string> {
  const base = displayName
    .toLowerCase()
    .replace(/[^a-z0-9]/g, "")
    .slice(0, 15) || "user"

const prisma = await tryPrisma()
  if (!prisma) return base

let username = base
  let counter = 1

while (true) {
    const existing = await prisma.user.findUnique({ where: { username } })
    if (!existing) break
    username = `${base}${counter}`
    counter++
  }

return username
}

export async function getAuthHeader(): Promise<string | null> {
  const cookieStore = await cookies()
  const accessToken = cookieStore.get("access_token")?.value
  return accessToken ? `Bearer ${accessToken}` : null
}

export function parseBearerToken(authHeader: string | null): string | null {
  if (!authHeader?.startsWith("Bearer ")) return null
  return authHeader.slice(7)
}
[V0_FILE]typescript:file="lib/db.ts"
import { neon } from "@neondatabase/serverless"

// Create a reusable SQL client
export const sql = neon(process.env.DATABASE_URL!)

export const db = sql

// Helper to convert snake_case to camelCase
export function toCamelCase<T>(obj: Record<string, unknown>): T {
  const result: Record<string, unknown> = {}
  for (const key in obj) {
    const camelKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
    result[camelKey] = obj[key]
  }
  return result as T
}

// Helper to convert camelCase to snake_case
export function toSnakeCase(obj: Record<string, unknown>): Record<string, unknown> {
  const result: Record<string, unknown> = {}
  for (const key in obj) {
    const snakeKey = key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
    result[snakeKey] = obj[key]
  }
  return result
}
[V0_FILE]typescript:file="lib/format.ts"
export function formatDistanceToNow(date: Date): string {
  const now = new Date()
  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)

if (diffInSeconds < 60) return "Just now"
  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`
  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`
  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)}d ago`

return date.toLocaleDateString("en-US", { month: "short", day: "numeric" })
}

export function formatNumber(num: number): string {
  if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
  if (num >= 1000) return `${(num / 1000).toFixed(1)}K`
  return num.toString()
}

export function formatCurrency(amount: number, currency = "USD"): string {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(amount)
}
[V0_FILE]typescript:file="lib/hooks/use-auth.ts"
"use client"

import useSWR from "swr"
import { api } from "@/lib/api-client"
import { useCallback } from "react"

const fetcher = async () => {
  const result = await api.getCurrentUser()
  if (result.error) throw new Error(result.error)
  return result.data
}

export function useAuth() {
  const { data, error, isLoading, mutate } = useSWR("auth/me", fetcher, {
    revalidateOnFocus: false,
    shouldRetryOnError: false,
  })

const login = useCallback(
    async (email: string, password: string) => {
      const result = await api.login(email, password)
      if (result.error) throw new Error(result.error)
      await mutate()
      return result.data
    },
    [mutate],
  )

const signup = useCallback(
    async (email: string, password: string, displayName: string, role: string) => {
      const result = await api.signup(email, password, displayName, role)
      if (result.error) throw new Error(result.error)
      await mutate()
      return result.data
    },
    [mutate],
  )

const logout = useCallback(async () => {
    await api.logout()
    await mutate(null, { revalidate: false })
  }, [mutate])

return {
    user: data?.user || null,
    isLoading,
    isAuthenticated: !!data?.user,
    error,
    login,
    signup,
    logout,
    refresh: mutate,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-castings.ts"
"use client"

import useSWR from "swr"
import { api } from "@/lib/api-client"

export function useCastings(params?: { status?: string; query?: string; creatorId?: string }) {
  const key = params ? `castings?${JSON.stringify(params)}` : "castings"

const { data, error, isLoading, mutate } = useSWR(key, () => api.getCastings(params).then((r) => r.data), {
    revalidateOnFocus: false,
  })

return {
    castings: data?.castings || [],
    isLoading,
    error,
    refresh: mutate,
  }
}

export function useCasting(id: string | null) {
  const { data, error, isLoading, mutate } = useSWR(
    id ? `casting/${id}` : null,
    () => (id ? api.getCasting(id).then((r) => r.data) : null),
    { revalidateOnFocus: false },
  )

return {
    casting: data?.casting || null,
    isLoading,
    error,
    refresh: mutate,
  }
}

export function useSubmissions(castingId: string | null, status?: string) {
  const { data, error, isLoading, mutate } = useSWR(
    castingId ? `submissions/${castingId}/${status || "all"}` : null,
    () => (castingId ? api.getSubmissions(castingId, status).then((r) => r.data) : null),
    { revalidateOnFocus: false },
  )

return {
    submissions: data?.submissions || [],
    isLoading,
    error,
    refresh: mutate,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-conversations.ts"
"use client"

import useSWR from "swr"
import { api } from "@/lib/api-client"

export function useConversations() {
  const { data, error, isLoading, mutate } = useSWR("conversations", () => api.getConversations().then((r) => r.data as any), {
    revalidateOnFocus: true,
    refreshInterval: 10000, // Poll every 10s for new conversations
  })

return {
    conversations: data?.conversations || [],
    isLoading,
    error,
    refresh: mutate,
  }
}

export function useMessages(conversationId: string | null) {
  const { data, error, isLoading, mutate } = useSWR(
    conversationId ? `messages/${conversationId}` : null,
    () => (conversationId ? api.getMessages(conversationId).then((r) => r.data as any) : null),
    { revalidateOnFocus: true, refreshInterval: 5000 }, // Poll every 5s for new messages
  )

return {
    messages: data?.messages || [],
    isLoading,
    error,
    refresh: mutate,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-notifications.ts"
"use client"

import useSWR from "swr"
import { api } from "@/lib/api-client"

export function useNotifications(unreadOnly?: boolean) {
  const { data, error, isLoading, mutate } = useSWR(
    `notifications${unreadOnly ? "?unread" : ""}`,
    () => api.getNotifications(unreadOnly).then((r) => r.data as any),
    { revalidateOnFocus: true, refreshInterval: 15000 }, // Poll every 15s
  )

return {
    notifications: data?.notifications || [],
    unreadCount: data?.unreadCount || 0,
    isLoading,
    error,
    refresh: mutate,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-posts.ts"
"use client"

import useSWR from "swr"
import { api } from "@/lib/api-client"

export function usePosts(params?: { limit?: number; cursor?: string; feed?: string }) {
  const feedParam = params?.feed || ""
  const key = `posts?feed=${feedParam}&cursor=${params?.cursor || ""}`
  const { data, error, isLoading, mutate } = useSWR(
    key,
    () => api.getPosts({ limit: params?.limit ?? 20, cursor: params?.cursor, feed: params?.feed }).then((r) => r.data as any),
    { revalidateOnFocus: true },
  )

return {
    posts: data?.posts ?? [],
    nextCursor: data?.nextCursor ?? null,
    isLoading,
    error,
    refresh: mutate,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-profile.ts"
"use client"

import useSWR from "swr"
import { api } from "@/lib/api-client"

export function useMyProfile() {
  const { data, error, isLoading, mutate } = useSWR("profile/me", () => api.getMyProfile().then((r) => r.data), {
    revalidateOnFocus: false,
  })

return {
    profile: data?.profile || null,
    isLoading,
    error,
    refresh: mutate,
  }
}

export function useProfile(username: string | null) {
  const { data, error, isLoading, mutate } = useSWR(
    username ? `profile/${username}` : null,
    () => (username ? api.getProfile(username).then((r) => r.data) : null),
    { revalidateOnFocus: false },
  )

return {
    profile: data?.profile || null,
    isLoading,
    error,
    refresh: mutate,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-scoreboard.ts"
"use client"

import useSWR from "swr"
import { api } from "@/lib/api-client"

export function useScoreboard(filter?: string, limit?: number) {
  const { data, error, isLoading, mutate } = useSWR(
    `scoreboard/${filter || "top"}/${limit || 20}`,
    () => api.getScoreboard(filter, limit).then((r) => r.data),
    { revalidateOnFocus: false },
  )

return {
    models: data?.models || [],
    isLoading,
    error,
    refresh: mutate,
  }
}

export function useTopModels(filter?: string, limit?: number) {
  const { data, error, isLoading, mutate } = useSWR(
    `top-models/${filter || "all"}/${limit || 10}`,
    () => api.getTopModels(filter, limit).then((r) => r.data),
    { revalidateOnFocus: false },
  )

return {
    models: data?.models || [],
    isLoading,
    error,
    refresh: mutate,
  }
}
[V0_FILE]typescript:file="lib/hooks/use-settings.ts"
import useSWR from "swr"
import { api } from "@/lib/api-client"

export interface UserSettings {
  userId: string
  darkMode: boolean
  pushNotifs?: boolean
  emailNotifs?: boolean
  privacyMode?: string
  notifications: {
    email?: boolean
    push?: boolean
    castingInvites?: boolean
    messages?: boolean
    offers?: boolean
  }
  privacy: {
    profileVisibility?: "public" | "verified_only" | "private"
    showMeasurements?: boolean
    showLocation?: boolean
  }
  createdAt?: string
  updatedAt?: string
}

const fetcher = async () => {
  const res = await api.getSettings()
  if (res.error) throw new Error(res.error)
  return res.data as UserSettings
}

export function useSettings() {
  const { data, error, isLoading, mutate } = useSWR<UserSettings>("/api/settings", fetcher, {
    revalidateOnFocus: false,
  })

const updateSettings = async (settings: Partial<UserSettings>) => {
    const res = await api.updateSettings(settings)
    if (res.error) throw new Error(res.error)
    const updated = res.data as UserSettings
    mutate(updated, false)
    return updated
  }

return {
    settings: data,
    isLoading,
    error,
    updateSettings,
    mutate,
  }
}
[V0_FILE]typescript:file="lib/mock-data.ts"
import type {
  User,
  Casting,
  CastingApplication,
  Conversation,
  Message,
  JobOffer,
  Post,
  CastingRoom,
  RoomEvent,
  RoomFile,
  RoomScheduleItem,
  Notification,
  UserLimits,
} from "./types"

export const mockUsers: User[] = [
  {
    id: "1",
    email: "sofia@luxlane.com",
    name: "Sofia Laurent",
    username: "sofialaurent",
    role: "model",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/professional-model-headshot-woman-brunette.jpg",
    bio: "International runway model. Paris, Milan, NYC. Represented by Elite Models.",
    location: "Paris, France",
    followers: 245000,
    following: 892,
    createdAt: new Date("2023-01-15"),
    measurements: {
      height: "180 cm",
      bust: "81 cm",
      waist: "61 cm",
      hips: "86 cm",
      shoeSize: "40 EU",
      hairColor: "Brunette",
      eyeColor: "Green",
      heightCm: 180,
    },
    portfolio: [
      "/high-fashion-editorial-model.jpg",
      "/runway-fashion-week-model.jpg",
      "/luxury-brand-campaign-model.jpg",
    ],
    polaroids: ["/model-polaroid-front.jpg", "/model-polaroid-profile.jpg", "/model-polaroid-full-body.jpg"],
    experience: ["Dior SS24", "Chanel Resort", "Prada FW23", "Valentino Couture"],
    tags: ["runway", "editorial", "high-fashion", "couture"],
    metrics: {
      luxlaneScore: 94,
      rank: 12,
      rankTier: "top50",
      trend: "up",
      trendChange: 5,
      components: {
        bookings: 28,
        shortlists: 45,
        profileViews: 12500,
        responseRate: 98,
        reliability: 100,
      },
      achievements: ["Top Model Paris", "10+ Bookings", "Perfect Reliability"],
      lastUpdated: new Date(),
    },
    digitalTwin: {
      id: "dt1",
      modelId: "1",
      status: "complete",
      createdAt: new Date("2024-01-10"),
      updatedAt: new Date("2024-01-10"),
      headScan: "/3d-head-scan.jpg",
      fullBodyScan: "/3d-body-scan.jpg",
      attributes: {
        faceShape: "Oval",
        skinTone: "Light",
        eyeColor: "Green",
        jawline: "Defined",
        cheekbones: "High",
        noseType: "Straight",
        lipShape: "Full",
        preciseHeight: "180.2 cm",
        preciseChest: "81.5 cm",
        preciseWaist: "60.8 cm",
        preciseHips: "86.2 cm",
        shoulderWidth: "42.1 cm",
        armLength: "76.3 cm",
        legLength: "112.5 cm",
        analysis: {
          symmetryScore: 94,
          goldenRatioScore: 91,
          facialThirds: { upper: 33.2, middle: 33.8, lower: 33.0 },
          jawAngle: 128,
          eyeSpacing: "ideal",
          noseBridgeRatio: 0.34,
          lipToFaceRatio: 0.24,
          overallHarmony: 92,
        },
      },
    },
  },
  {
    id: "2",
    email: "maison@dior.com",
    name: "Maison Dior",
    username: "dior",
    role: "brand",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/dior-luxury-fashion-brand-logo-minimal.jpg",
    bio: "Maison Christian Dior. Haute Couture, Ready-to-Wear, Beauty.",
    location: "Paris, France",
    followers: 12500000,
    following: 156,
    createdAt: new Date("2022-06-01"),
    companyName: "Christian Dior SE",
    website: "https://dior.com",
    industry: "Luxury Fashion",
    tags: ["haute-couture", "luxury", "high-fashion"],
  },
  {
    id: "3",
    email: "contact@elitemodels.com",
    name: "Elite Model Management",
    username: "eliteagency",
    role: "agency",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/elite-models-agency-logo-professional-minimal.jpg",
    bio: "The world's leading model management agency. Discovering beauty since 1972.",
    location: "New York, NY",
    followers: 3200000,
    following: 4521,
    createdAt: new Date("2022-03-10"),
    companyName: "Elite Model Management",
    website: "https://elitemodel.com",
    roster: ["1", "5", "8", "11", "14"],
    industry: "Talent Management",
  },
  {
    id: "4",
    email: "alexander@vogue.com",
    name: "Alexander Chen",
    username: "alexanderchen",
    role: "client",
    verified: true,
    verificationLevel: "agency_verified",
    avatar: "/professional-photographer-portrait-man.jpg",
    bio: "Fashion Photographer. Vogue, Harper's Bazaar, Elle.",
    location: "Los Angeles, CA",
    followers: 89000,
    following: 1245,
    createdAt: new Date("2023-04-20"),
    companyName: "Chen Studios",
    website: "https://alexanderchen.com",
    industry: "Photography",
  },
  {
    id: "5",
    email: "bella@luxlane.com",
    name: "Isabella Rossi",
    username: "isabellarossi",
    role: "model",
    verified: true,
    verificationLevel: "agency_verified",
    avatar: "/professional-model-headshot-woman-italian-dark-hai.jpg",
    bio: "Milan Fashion Week regular. Gucci, Prada, Versace.",
    location: "Milan, Italy",
    followers: 156000,
    following: 634,
    createdAt: new Date("2023-06-12"),
    measurements: {
      height: "178 cm",
      bust: "84 cm",
      waist: "61 cm",
      hips: "89 cm",
      shoeSize: "39 EU",
      hairColor: "Black",
      eyeColor: "Brown",
      heightCm: 178,
    },
    experience: ["Gucci FW24", "Prada SS24", "Versace Resort"],
    tags: ["runway", "editorial", "commercial"],
    metrics: {
      luxlaneScore: 87,
      rank: 45,
      rankTier: "top50",
      trend: "up",
      trendChange: 12,
      components: {
        bookings: 18,
        shortlists: 32,
        profileViews: 8900,
        responseRate: 95,
        reliability: 98,
      },
      achievements: ["Rising Star", "5+ Bookings"],
      lastUpdated: new Date(),
    },
  },
  {
    id: "6",
    email: "maya@luxlane.com",
    name: "Maya Williams",
    username: "mayawilliams",
    role: "model",
    verified: false,
    verificationLevel: "unverified",
    avatar: "/young-model-headshot-woman-blonde-natural.jpg",
    bio: "Aspiring model. NYC based. Open to collaborations.",
    location: "Brooklyn, NY",
    followers: 2400,
    following: 890,
    createdAt: new Date("2024-01-05"),
    measurements: {
      height: "175 cm",
      bust: "81 cm",
      waist: "64 cm",
      hips: "89 cm",
      shoeSize: "38 EU",
      hairColor: "Blonde",
      eyeColor: "Blue",
      heightCm: 175,
    },
    tags: ["commercial", "lifestyle"],
    metrics: {
      luxlaneScore: 42,
      rank: 890,
      rankTier: "new",
      trend: "up",
      trendChange: 3,
      components: {
        bookings: 0,
        shortlists: 2,
        profileViews: 450,
        responseRate: 100,
        reliability: 100,
      },
      achievements: ["New Member"],
      lastUpdated: new Date(),
    },
  },
  {
    id: "7",
    email: "info@gucci.com",
    name: "Gucci",
    username: "gucci",
    role: "brand",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/gucci-luxury-fashion-brand-logo-minimal.jpg",
    bio: "Founded in Florence in 1921, Gucci is one of the world's leading luxury fashion brands.",
    location: "Florence, Italy",
    followers: 52000000,
    following: 89,
    createdAt: new Date("2022-01-01"),
    companyName: "Gucci",
    website: "https://gucci.com",
    industry: "Luxury Fashion",
    tags: ["luxury", "high-fashion", "avant-garde"],
  },
  {
    id: "8",
    email: "lena@luxlane.com",
    name: "Lena Petrova",
    username: "lenapetrova",
    role: "model",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/model-headshot-blonde-european.jpg",
    bio: "Top 10 Luxlane Model. Specializing in haute couture and runway.",
    location: "Moscow, Russia",
    followers: 520000,
    following: 345,
    createdAt: new Date("2022-08-20"),
    measurements: {
      height: "182 cm",
      bust: "80 cm",
      waist: "59 cm",
      hips: "87 cm",
      shoeSize: "41 EU",
      hairColor: "Blonde",
      eyeColor: "Blue",
      heightCm: 182,
    },
    experience: ["Chanel Couture", "Louis Vuitton", "Balenciaga", "Saint Laurent"],
    tags: ["runway", "couture", "high-fashion", "editorial"],
    metrics: {
      luxlaneScore: 98,
      rank: 3,
      rankTier: "top10",
      trend: "stable",
      trendChange: 0,
      components: {
        bookings: 52,
        shortlists: 78,
        profileViews: 45000,
        responseRate: 100,
        reliability: 100,
      },
      achievements: ["Top 10 Global", "50+ Bookings", "Perfect Score"],
      lastUpdated: new Date(),
    },
    digitalTwin: {
      id: "dt2",
      modelId: "8",
      status: "complete",
      createdAt: new Date("2024-01-05"),
      updatedAt: new Date("2024-01-05"),
      attributes: {
        faceShape: "Heart",
        skinTone: "Fair",
        eyeColor: "Blue",
        jawline: "Angular",
        cheekbones: "Prominent",
        noseType: "Straight",
        lipShape: "Thin",
        preciseHeight: "182.4 cm",
        preciseChest: "80.2 cm",
        preciseWaist: "58.9 cm",
        preciseHips: "87.1 cm",
        shoulderWidth: "43.2 cm",
        armLength: "78.1 cm",
        legLength: "115.2 cm",
        analysis: {
          symmetryScore: 97,
          goldenRatioScore: 95,
          facialThirds: { upper: 33.5, middle: 33.2, lower: 33.3 },
          jawAngle: 125,
          eyeSpacing: "ideal",
          noseBridgeRatio: 0.32,
          lipToFaceRatio: 0.22,
          overallHarmony: 96,
        },
      },
    },
  },
  {
    id: "9",
    email: "contact@nextmodels.com",
    name: "Next Models",
    username: "nextagency",
    role: "agency",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/next-models-agency-logo-professional-minimal.jpg",
    bio: "Next Model Management represents the most exciting talent in fashion worldwide. Offices in NY, LA, Paris, Milan, London.",
    location: "New York, NY",
    followers: 2800000,
    following: 3200,
    createdAt: new Date("2022-04-15"),
    companyName: "Next Models",
    website: "https://nextmodels.com",
    roster: ["5", "6", "12", "13", "15"],
    industry: "Talent Management",
    tags: ["agency", "fashion", "talent"],
  },
  {
    id: "10",
    email: "contact@imgmodels.com",
    name: "IMG Models",
    username: "imgmodels",
    role: "agency",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/img-models-agency-logo-professional-minimal.jpg",
    bio: "IMG Models is the international leader in talent discovery and model management. Home to the world's most iconic supermodels.",
    location: "New York, NY",
    followers: 4100000,
    following: 2100,
    createdAt: new Date("2022-02-01"),
    companyName: "IMG Models Worldwide",
    website: "https://imgmodels.com",
    roster: ["1", "8", "11", "14"],
    industry: "Talent Management",
    tags: ["agency", "supermodels", "international"],
  },
  // Additional models for agency rosters
  {
    id: "11",
    email: "naomi@luxlane.com",
    name: "Naomi Okafor",
    username: "naomiokafor",
    role: "model",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/placeholder.svg?height=400&width=400&text=NO",
    bio: "Nigerian-British model. London & Lagos. Vogue UK, Burberry, Alexander McQueen.",
    location: "London, UK",
    followers: 310000,
    following: 520,
    createdAt: new Date("2023-02-28"),
    measurements: {
      height: "181 cm",
      bust: "82 cm",
      waist: "60 cm",
      hips: "88 cm",
      shoeSize: "40 EU",
      hairColor: "Black",
      eyeColor: "Brown",
      heightCm: 181,
    },
    portfolio: [
      "/placeholder.svg?height=600&width=400&text=Portfolio+1",
      "/placeholder.svg?height=600&width=400&text=Portfolio+2",
      "/placeholder.svg?height=600&width=400&text=Portfolio+3",
    ],
    experience: ["Burberry AW24", "Alexander McQueen SS24", "Vogue UK Cover"],
    tags: ["runway", "editorial", "high-fashion", "diversity"],
    metrics: {
      luxlaneScore: 91,
      rank: 18,
      rankTier: "top50",
      trend: "up",
      trendChange: 8,
      components: {
        bookings: 24,
        shortlists: 40,
        profileViews: 11200,
        responseRate: 97,
        reliability: 99,
      },
      achievements: ["Rising Star", "Top 20 London", "10+ Bookings"],
      lastUpdated: new Date(),
    },
  },
  {
    id: "12",
    email: "ava@luxlane.com",
    name: "Ava Johansson",
    username: "avajohansson",
    role: "model",
    verified: true,
    verificationLevel: "agency_verified",
    avatar: "/placeholder.svg?height=400&width=400&text=AJ",
    bio: "Scandinavian beauty. Stockholm & Paris. Commercial & editorial work.",
    location: "Stockholm, Sweden",
    followers: 98000,
    following: 430,
    createdAt: new Date("2023-09-01"),
    measurements: {
      height: "177 cm",
      bust: "83 cm",
      waist: "62 cm",
      hips: "90 cm",
      shoeSize: "39 EU",
      hairColor: "Blonde",
      eyeColor: "Blue",
      heightCm: 177,
    },
    portfolio: [
      "/placeholder.svg?height=600&width=400&text=AJ+Look+1",
      "/placeholder.svg?height=600&width=400&text=AJ+Look+2",
    ],
    experience: ["H&M Global", "COS Campaign", "Acne Studios"],
    tags: ["commercial", "editorial", "scandinavian"],
    metrics: {
      luxlaneScore: 78,
      rank: 95,
      rankTier: "top100",
      trend: "up",
      trendChange: 15,
      components: {
        bookings: 12,
        shortlists: 22,
        profileViews: 5600,
        responseRate: 96,
        reliability: 100,
      },
      achievements: ["Rising Star Stockholm"],
      lastUpdated: new Date(),
    },
  },
  {
    id: "13",
    email: "kai@luxlane.com",
    name: "Kai Tanaka",
    username: "kaitanaka",
    role: "model",
    verified: true,
    verificationLevel: "agency_verified",
    avatar: "/placeholder.svg?height=400&width=400&text=KT",
    bio: "Tokyo-based model. Gender-fluid fashion. Comme des Garçons, Issey Miyake.",
    location: "Tokyo, Japan",
    followers: 72000,
    following: 310,
    createdAt: new Date("2023-11-10"),
    measurements: {
      height: "183 cm",
      bust: "88 cm",
      waist: "72 cm",
      hips: "90 cm",
      shoeSize: "43 EU",
      hairColor: "Black",
      eyeColor: "Brown",
      heightCm: 183,
    },
    portfolio: [
      "/placeholder.svg?height=600&width=400&text=KT+Look+1",
      "/placeholder.svg?height=600&width=400&text=KT+Look+2",
    ],
    experience: ["Comme des Garçons FW24", "Issey Miyake SS24", "Tokyo Fashion Week"],
    tags: ["runway", "avant-garde", "gender-fluid"],
    metrics: {
      luxlaneScore: 74,
      rank: 120,
      rankTier: "top500",
      trend: "up",
      trendChange: 22,
      components: {
        bookings: 8,
        shortlists: 15,
        profileViews: 3200,
        responseRate: 100,
        reliability: 100,
      },
      achievements: ["Tokyo Fashion Week Debut"],
      lastUpdated: new Date(),
    },
  },
  {
    id: "14",
    email: "amara@luxlane.com",
    name: "Amara Diop",
    username: "amaradiop",
    role: "model",
    verified: true,
    verificationLevel: "luxlane_verified",
    avatar: "/placeholder.svg?height=400&width=400&text=AD",
    bio: "Senegalese supermodel. Balmain, Givenchy, Off-White. Cover girl.",
    location: "Paris, France",
    followers: 420000,
    following: 280,
    createdAt: new Date("2022-11-15"),
    measurements: {
      height: "179 cm",
      bust: "81 cm",
      waist: "60 cm",
      hips: "87 cm",
      shoeSize: "40 EU",
      hairColor: "Black",
      eyeColor: "Brown",
      heightCm: 179,
    },
    portfolio: [
      "/placeholder.svg?height=600&width=400&text=AD+Cover",
      "/placeholder.svg?height=600&width=400&text=AD+Runway",
      "/placeholder.svg?height=600&width=400&text=AD+Editorial",
      "/placeholder.svg?height=600&width=400&text=AD+Campaign",
    ],
    experience: ["Balmain SS24", "Givenchy Couture", "Off-White FW24", "Vogue Paris Cover"],
    tags: ["runway", "editorial", "couture", "cover"],
    metrics: {
      luxlaneScore: 93,
      rank: 15,
      rankTier: "top50",
      trend: "stable",
      trendChange: 1,
      components: {
        bookings: 35,
        shortlists: 52,
        profileViews: 18000,
        responseRate: 99,
        reliability: 100,
      },
      achievements: ["Top 20 Paris", "30+ Bookings", "Vogue Cover"],
      lastUpdated: new Date(),
    },
  },
  {
    id: "15",
    email: "luna@luxlane.com",
    name: "Luna Martinez",
    username: "lunamartinez",
    role: "model",
    verified: true,
    verificationLevel: "agency_verified",
    avatar: "/placeholder.svg?height=400&width=400&text=LM",
    bio: "Colombian-American model. Miami & NYC. Swimwear, beauty, commercial.",
    location: "Miami, FL",
    followers: 185000,
    following: 670,
    createdAt: new Date("2023-05-20"),
    measurements: {
      height: "174 cm",
      bust: "86 cm",
      waist: "63 cm",
      hips: "91 cm",
      shoeSize: "38 EU",
      hairColor: "Brown",
      eyeColor: "Hazel",
      heightCm: 174,
    },
    portfolio: [
      "/placeholder.svg?height=600&width=400&text=LM+Beach",
      "/placeholder.svg?height=600&width=400&text=LM+Beauty",
    ],
    experience: ["Sports Illustrated Swim", "Fenty Beauty", "Victoria's Secret"],
    tags: ["swimwear", "beauty", "commercial", "fitness"],
    metrics: {
      luxlaneScore: 82,
      rank: 68,
      rankTier: "top100",
      trend: "up",
      trendChange: 10,
      components: {
        bookings: 20,
        shortlists: 28,
        profileViews: 9500,
        responseRate: 94,
        reliability: 98,
      },
      achievements: ["SI Swim Debut", "10+ Bookings"],
      lastUpdated: new Date(),
    },
  },
]

export const mockCastings: Casting[] = [
  {
    id: "c1",
    creatorId: "2",
    creator: mockUsers[1],
    title: "Dior Spring 2025 Campaign",
    type: "campaign",
    description:
      "Seeking diverse female models for our upcoming Spring 2025 campaign. Shot by Steven Meisel in Paris. Looking for confident, editorial-ready talent.",
    location: "Paris, France",
    dates: { start: new Date("2024-03-15"), end: new Date("2024-03-20") },
    pay: { amount: 15000, currency: "EUR", type: "flat" },
    requirements: {
      gender: "female",
      heightRange: { min: "175 cm", max: "185 cm" },
      heightRangeCm: { min: 175, max: 185 },
      experience: ["runway", "editorial"],
      look: ["editorial", "high fashion"],
      tags: ["runway", "editorial", "high-fashion"],
    },
    deadline: new Date("2024-02-28"),
    status: "active",
    applicationsCount: 45,
    shortlistedCount: 8,
    createdAt: new Date("2024-01-15"),
    images: ["/dior-fashion-campaign-spring-aesthetic.jpg"],
    settings: {
      verifiedOnly: true,
      maxSubmissionsPerAgency: 5,
      requireDigitalTwin: false,
    },
    roomId: "room1",
  },
  {
    id: "c2",
    creatorId: "7",
    creator: mockUsers[6],
    title: "Gucci Milan Fashion Week",
    type: "runway",
    description:
      "Open casting for Gucci FW25 runway show in Milan. Looking for unique, bold faces that embody the Gucci aesthetic.",
    location: "Milan, Italy",
    dates: { start: new Date("2024-02-20"), end: new Date("2024-02-21") },
    pay: { amount: 5000, currency: "EUR", type: "flat" },
    requirements: {
      gender: "any",
      heightRange: { min: "178 cm", max: "188 cm" },
      heightRangeCm: { min: 178, max: 188 },
      experience: ["runway"],
      look: ["avant-garde", "unique"],
      tags: ["runway", "avant-garde"],
    },
    deadline: new Date("2024-02-10"),
    status: "active",
    applicationsCount: 120,
    shortlistedCount: 24,
    createdAt: new Date("2024-01-20"),
    images: ["/gucci-fashion-show-runway-aesthetic.jpg"],
    settings: {
      verifiedOnly: false,
      maxSubmissionsPerAgency: 10,
      requireDigitalTwin: false,
    },
  },
  {
    id: "c3",
    creatorId: "4",
    creator: mockUsers[3],
    title: "Vogue Italia Editorial",
    type: "editorial",
    description:
      "Editorial shoot for Vogue Italia March issue. Theme: Modern Renaissance. Looking for models with classic, timeless features.",
    location: "Florence, Italy",
    dates: { start: new Date("2024-02-05"), end: new Date("2024-02-07") },
    pay: { amount: 3500, currency: "EUR", type: "flat" },
    requirements: {
      gender: "female",
      ageRange: { min: 18, max: 35 },
      look: ["classic", "elegant"],
      tags: ["editorial", "classic"],
    },
    deadline: new Date("2024-01-30"),
    status: "active",
    applicationsCount: 67,
    shortlistedCount: 5,
    createdAt: new Date("2024-01-10"),
    images: ["/vogue-editorial-renaissance.jpg"],
    settings: {
      verifiedOnly: true,
      maxSubmissionsPerAgency: 3,
      requireDigitalTwin: true,
    },
  },
  {
    id: "c4",
    creatorId: "3",
    creator: mockUsers[2],
    title: "Elite New Faces 2024",
    type: "event",
    description:
      "Annual scouting event for new talent. If you're 16-22 and dream of a modeling career, this is your chance to be discovered by top agents.",
    location: "New York, NY",
    dates: { start: new Date("2024-03-01"), end: new Date("2024-03-01") },
    pay: { amount: 0, currency: "USD", type: "tbd" },
    requirements: {
      ageRange: { min: 16, max: 22 },
      other: "No experience necessary. Bring polaroids and comp card if available.",
    },
    deadline: new Date("2024-02-25"),
    status: "active",
    applicationsCount: 340,
    shortlistedCount: 0,
    createdAt: new Date("2024-01-25"),
    images: ["/model-casting-event.jpg"],
    settings: {
      verifiedOnly: false,
      maxSubmissionsPerAgency: 20,
      requireDigitalTwin: false,
    },
  },
  // Agency-created castings — Next Models
  {
    id: "c7",
    creatorId: "9",
    creator: mockUsers[8], // Next Models (index 8 = id "9")
    title: "Next x Zara Campaign",
    type: "campaign",
    description: "Next Models is casting for Zara's upcoming seasonal campaign. Looking for fresh, diverse faces for a global commercial shoot in Barcelona.",
    location: "Barcelona, Spain",
    dates: { start: new Date("2024-04-10"), end: new Date("2024-04-14") },
    pay: { amount: 8000, currency: "EUR", type: "flat" },
    requirements: {
      gender: "any",
      heightRange: { min: "170 cm", max: "185 cm" },
      heightRangeCm: { min: 170, max: 185 },
      experience: ["commercial"],
      look: ["commercial", "natural"],
      tags: ["commercial", "campaign"],
    },
    deadline: new Date("2024-03-28"),
    status: "active",
    applicationsCount: 86,
    shortlistedCount: 12,
    createdAt: new Date("2024-02-20"),
    images: ["/fashion-campaign-diverse-models.jpg"],
    settings: {
      verifiedOnly: false,
      maxSubmissionsPerAgency: 10,
      requireDigitalTwin: false,
    },
  },
  {
    id: "c8",
    creatorId: "9",
    creator: mockUsers[8], // Next Models
    title: "Victoria's Secret Runway Casting",
    type: "runway",
    description: "Open casting call for the Victoria's Secret Fashion Show return. We're looking for confident, walk-ready models with strong runway presence.",
    location: "New York, NY",
    dates: { start: new Date("2024-05-15"), end: new Date("2024-05-16") },
    pay: { amount: 25000, currency: "USD", type: "flat" },
    requirements: {
      gender: "female",
      heightRange: { min: "175 cm", max: "185 cm" },
      heightRangeCm: { min: 175, max: 185 },
      experience: ["runway"],
      look: ["glamour", "fitness"],
      tags: ["runway", "lingerie", "glamour"],
    },
    deadline: new Date("2024-04-30"),
    status: "active",
    applicationsCount: 520,
    shortlistedCount: 45,
    createdAt: new Date("2024-03-01"),
    images: ["/runway-fashion-show-stage.jpg"],
    settings: {
      verifiedOnly: true,
      maxSubmissionsPerAgency: 5,
      requireDigitalTwin: false,
    },
  },
  // Agency-created castings — IMG Models
  {
    id: "c9",
    creatorId: "10",
    creator: mockUsers[9], // IMG Models (index 9 = id "10")
    title: "IMG Worldwide Scouting",
    type: "event",
    description: "IMG Models worldwide talent scouting program. Submit your portfolio and measurements. Virtual submissions accepted. No experience necessary.",
    location: "Worldwide (Virtual)",
    dates: { start: new Date("2024-04-20"), end: new Date("2024-05-20") },
    pay: { amount: 0, currency: "USD", type: "tbd" },
    requirements: {
      ageRange: { min: 14, max: 25 },
      other: "Open to all genders, ethnicities, and body types. Must submit 3 recent photos.",
    },
    deadline: new Date("2024-05-15"),
    status: "active",
    applicationsCount: 1200,
    shortlistedCount: 80,
    createdAt: new Date("2024-02-15"),
    images: ["/model-scouting-diverse-group.jpg"],
    settings: {
      verifiedOnly: false,
      maxSubmissionsPerAgency: 20,
      requireDigitalTwin: false,
    },
  },
  // Elite Model Management castings
  {
    id: "c10",
    creatorId: "3",
    creator: mockUsers[2], // Elite (index 2 = id "3")
    title: "Elite London Fashion Week",
    type: "runway",
    description: "Elite Model Management is casting for London Fashion Week SS25. Multiple designer shows. Must be available for full week of fittings and shows.",
    location: "London, UK",
    dates: { start: new Date("2024-09-12"), end: new Date("2024-09-17") },
    pay: { amount: 12000, currency: "GBP", type: "flat" },
    requirements: {
      gender: "female",
      heightRange: { min: "175 cm", max: "185 cm" },
      heightRangeCm: { min: 175, max: 185 },
      experience: ["runway"],
      look: ["editorial", "high fashion"],
      tags: ["runway", "fashion-week", "london"],
    },
    deadline: new Date("2024-08-30"),
    status: "active",
    applicationsCount: 180,
    shortlistedCount: 30,
    createdAt: new Date("2024-03-10"),
    images: ["/london-fashion-week-runway.jpg"],
    settings: {
      verifiedOnly: true,
      maxSubmissionsPerAgency: 8,
      requireDigitalTwin: false,
    },
  },
]

export const mockApplications: CastingApplication[] = [
  {
    id: "a1",
    castingId: "c1",
    casting: mockCastings[0],
    modelId: "1",
    model: mockUsers[0],
    status: "shortlisted",
    message:
      "Excited to be part of this campaign. I have extensive experience with Dior and would love to continue our collaboration.",
    portfolioSelection: ["/high-fashion-editorial-model.jpg", "/runway-fashion-week-model.jpg"],
    submittedAt: new Date("2024-01-16"),
    updatedAt: new Date("2024-01-18"),
  },
  {
    id: "a2",
    castingId: "c2",
    casting: mockCastings[1],
    modelId: "1",
    model: mockUsers[0],
    status: "pending",
    message: "I would be honored to walk for Gucci at Milan Fashion Week.",
    portfolioSelection: ["/runway-fashion-week-model.jpg"],
    submittedAt: new Date("2024-01-21"),
    updatedAt: new Date("2024-01-21"),
  },
  {
    id: "a3",
    castingId: "c1",
    casting: mockCastings[0],
    modelId: "5",
    model: mockUsers[4],
    status: "pending",
    message: "I bring a fresh Italian perspective to high fashion campaigns.",
    submittedAt: new Date("2024-01-17"),
    updatedAt: new Date("2024-01-17"),
  },
  {
    id: "a4",
    castingId: "c1",
    casting: mockCastings[0],
    modelId: "8",
    model: mockUsers[7],
    status: "shortlisted",
    message: "Ready to bring elegance and precision to your campaign.",
    submittedAt: new Date("2024-01-16"),
    updatedAt: new Date("2024-01-19"),
  },
]

export const mockJobOffers: JobOffer[] = [
  {
    id: "o1",
    castingId: "c1",
    casting: mockCastings[0],
    senderId: "2",
    sender: mockUsers[1],
    modelId: "1",
    model: mockUsers[0],
    title: "Dior Spring 2025 Campaign - Lead Model",
    description:
      "We are pleased to offer you the lead model position for our Spring 2025 campaign. The shoot will take place over 5 days in Paris.",
    dates: { start: new Date("2024-03-15"), end: new Date("2024-03-20") },
    pay: { amount: 25000, currency: "EUR", type: "flat" },
    location: "Paris, France",
    status: "pending",
    expiresAt: new Date("2024-02-15"),
    createdAt: new Date("2024-02-01"),
  },
]

export const mockConversations: Conversation[] = [
  {
    id: "conv1",
    participants: [mockUsers[0], mockUsers[1]],
    lastMessage: {
      id: "m1",
      conversationId: "conv1",
      senderId: "2",
      content: "Congratulations! You've been selected for the Dior Spring 2025 campaign.",
      type: "casting_invite",
      metadata: { castingId: "c1" },
      read: false,
      createdAt: new Date("2024-02-01T10:00:00"),
    },
    unreadCount: 1,
    updatedAt: new Date("2024-02-01T10:00:00"),
    type: "casting",
  },
  {
    id: "conv2",
    participants: [mockUsers[0], mockUsers[3]],
    lastMessage: {
      id: "m2",
      conversationId: "conv2",
      senderId: "4",
      content: "The mood board for the Vogue shoot is ready. Let me know your thoughts.",
      type: "text",
      read: true,
      createdAt: new Date("2024-01-30T15:30:00"),
    },
    unreadCount: 0,
    updatedAt: new Date("2024-01-30T15:30:00"),
    type: "direct",
  },
  {
    id: "conv3",
    participants: [mockUsers[0], mockUsers[2]],
    lastMessage: {
      id: "m3",
      conversationId: "conv3",
      senderId: "3",
      content: "Your updated comp card is ready for review. Please approve before we send to clients.",
      type: "text",
      read: true,
      createdAt: new Date("2024-01-28T11:00:00"),
    },
    unreadCount: 0,
    updatedAt: new Date("2024-01-28T11:00:00"),
    type: "direct",
  },
]

export const mockMessages: Message[] = [
  {
    id: "m1-1",
    conversationId: "conv1",
    senderId: "2",
    content: "We loved your application for the Spring 2025 campaign.",
    type: "text",
    read: true,
    createdAt: new Date("2024-01-31T14:00:00"),
  },
  {
    id: "m1-2",
    conversationId: "conv1",
    senderId: "2",
    content: "Congratulations! You've been selected for the Dior Spring 2025 campaign.",
    type: "casting_invite",
    metadata: { castingId: "c1" },
    read: false,
    createdAt: new Date("2024-02-01T10:00:00"),
  },
]

export const mockPosts: Post[] = [
  {
    id: "p1",
    userId: "1",
    user: mockUsers[0],
    type: "photo",
    media: ["/high-fashion-editorial-model.jpg"],
    caption: "Behind the scenes from yesterday's Dior shoot. Thank you to the incredible team.",
    likes: 12453,
    comments: 234,
    bookmarked: false,
    liked: false,
    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 4),
    tags: ["behindthescenes", "dior", "fashion"],
  },
  {
    id: "p2",
    userId: "2",
    user: mockUsers[1],
    type: "photo",
    media: ["/dior-fashion-campaign-spring-aesthetic.jpg"],
    caption: "Spring 2025. A new chapter begins. #DiorSS25",
    likes: 89234,
    comments: 1245,
    bookmarked: true,
    liked: true,
    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 8),
    tags: ["diorss25", "spring2025", "campaign"],
  },
  {
    id: "p3",
    userId: "5",
    user: mockUsers[4],
    type: "photo",
    media: ["/runway-fashion-week-model.jpg"],
    caption: "Milan Fashion Week finale walk. Dreams do come true.",
    likes: 8921,
    comments: 156,
    bookmarked: false,
    liked: false,
    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24),
    tags: ["milanfashionweek", "runway", "mfw"],
  },
  {
    id: "p4",
    userId: "1",
    user: mockUsers[0],
    type: "photo",
    media: ["/luxury-brand-campaign-model.jpg"],
    caption: "New campaign dropping soon. Stay tuned.",
    likes: 15678,
    comments: 312,
    bookmarked: true,
    liked: false,
    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 48),
    tags: ["campaign", "comingsoon"],
  },
  {
    id: "p5",
    userId: "7",
    user: mockUsers[6],
    type: "photo",
    media: ["/gucci-fashion-show-runway-aesthetic.jpg"],
    caption: "Gucci FW25 - Embracing the extraordinary.",
    likes: 156000,
    comments: 2341,
    bookmarked: false,
    liked: true,
    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 72),
    tags: ["gucci", "fw25", "fashionshow"],
  },
]

// Casting Rooms
export const mockCastingRooms: CastingRoom[] = [
  {
    id: "room1",
    castingId: "c1",
    casting: mockCastings[0],
    status: "live",
    members: [mockUsers[1], mockUsers[0], mockUsers[7]],
    createdAt: new Date("2024-01-15"),
    updatedAt: new Date("2024-02-01"),
  },
]

export const mockRoomEvents: RoomEvent[] = [
  {
    id: "re1",
    roomId: "room1",
    type: "created",
    userId: "2",
    user: mockUsers[1],
    createdAt: new Date("2024-01-15T09:00:00"),
  },
  {
    id: "re2",
    roomId: "room1",
    type: "submission",
    userId: "1",
    user: mockUsers[0],
    message: "Application submitted",
    createdAt: new Date("2024-01-16T14:30:00"),
  },
  {
    id: "re3",
    roomId: "room1",
    type: "shortlisted",
    userId: "2",
    user: mockUsers[1],
    targetUserId: "1",
    targetUser: mockUsers[0],
    createdAt: new Date("2024-01-18T10:00:00"),
  },
  {
    id: "re4",
    roomId: "room1",
    type: "member_added",
    userId: "2",
    user: mockUsers[1],
    targetUserId: "1",
    targetUser: mockUsers[0],
    createdAt: new Date("2024-01-20T11:00:00"),
  },
  {
    id: "re5",
    roomId: "room1",
    type: "message",
    userId: "2",
    user: mockUsers[1],
    message: "Welcome to the casting room! Please review the call sheet.",
    createdAt: new Date("2024-01-20T11:05:00"),
  },
]

export const mockRoomFiles: RoomFile[] = [
  {
    id: "rf1",
    roomId: "room1",
    name: "Spring 2025 Moodboard",
    type: "moodboard",
    url: "/fashion-moodboard.jpg",
    uploadedBy: mockUsers[1],
    createdAt: new Date("2024-01-16"),
  },
  {
    id: "rf2",
    roomId: "room1",
    name: "Call Sheet - Day 1",
    type: "callsheet",
    url: "/call-sheet-document.jpg",
    uploadedBy: mockUsers[1],
    createdAt: new Date("2024-02-01"),
  },
]

export const mockRoomSchedule: RoomScheduleItem[] = [
  {
    id: "rs1",
    roomId: "room1",
    title: "Fitting Session",
    date: new Date("2024-03-14"),
    time: "10:00 AM",
    location: "Dior Atelier, Paris",
    notes: "Bring polaroids and comp card",
  },
  {
    id: "rs2",
    roomId: "room1",
    title: "Shoot Day 1",
    date: new Date("2024-03-15"),
    time: "7:00 AM",
    location: "Studio Harcourt, Paris",
  },
]

// Notifications
export const mockNotifications: Notification[] = [
  {
    id: "n1",
    userId: "1",
    type: "offer",
    title: "New Job Offer",
    message: "Dior has sent you an offer for Spring 2025 Campaign",
    read: false,
    actionUrl: "/offers/o1",
    metadata: { castingId: "c1" },
    createdAt: new Date("2024-02-01T10:00:00"),
  },
  {
    id: "n2",
    userId: "1",
    type: "shortlisted",
    title: "You've been shortlisted!",
    message: "Congratulations! You've been shortlisted for Dior Spring 2025 Campaign",
    read: true,
    metadata: { castingId: "c1" },
    createdAt: new Date("2024-01-18T10:00:00"),
  },
  {
    id: "n3",
    userId: "1",
    type: "casting_invite",
    title: "Casting Invitation",
    message: "Gucci has invited you to apply for Milan Fashion Week",
    read: true,
    metadata: { castingId: "c2" },
    createdAt: new Date("2024-01-20T09:00:00"),
  },
  {
    id: "n4",
    userId: "1",
    type: "room_update",
    title: "Casting Room Update",
    message: "New files added to Dior Spring 2025 casting room",
    read: false,
    metadata: { roomId: "room1" },
    createdAt: new Date("2024-02-01T11:00:00"),
  },
]

// User Limits (anti-spam)
export const mockUserLimits: UserLimits[] = [
  {
    userId: "1",
    weeklyApplications: 3,
    weeklyApplicationsMax: 10,
    weekStartDate: new Date("2024-01-29"),
    castingSubmissions: {},
  },
  {
    userId: "6",
    weeklyApplications: 8,
    weeklyApplicationsMax: 10,
    weekStartDate: new Date("2024-01-29"),
    castingSubmissions: {},
  },
]

// Scoreboard data
export const mockScoreboardData = {
  topModels: [mockUsers[7], mockUsers[0], mockUsers[4]].map((u, i) => ({
    ...u,
    rank: i + 1,
  })),
  risingModels: [mockUsers[4], mockUsers[5]].map((u, i) => ({
    ...u,
    rank: i + 1,
    trendChange: (i + 1) * 5,
  })),
  mostBooked: [mockUsers[7], mockUsers[0]],
  mostShortlisted: [mockUsers[0], mockUsers[7], mockUsers[4]],
}

// Helper functions
export function getCurrentUser(): User {
  return mockUsers[0]
}

export function getUserById(id: string): User | undefined {
  return mockUsers.find((u) => u.id === id)
}

export function getCastingById(id: string): Casting | undefined {
  return mockCastings.find((c) => c.id === id)
}

export function getApplicationsForModel(modelId: string): CastingApplication[] {
  return mockApplications.filter((a) => a.modelId === modelId)
}

export function getOffersForModel(modelId: string): JobOffer[] {
  return mockJobOffers.filter((o) => o.modelId === modelId)
}

export function getCastingsForCreator(creatorId: string): Casting[] {
  return mockCastings.filter((c) => c.creatorId === creatorId)
}

export function getRoomByCastingId(castingId: string): CastingRoom | undefined {
  return mockCastingRooms.find((r) => r.castingId === castingId)
}

export function getRoomEvents(roomId: string): RoomEvent[] {
  return mockRoomEvents.filter((e) => e.roomId === roomId)
}

export function getRoomFiles(roomId: string): RoomFile[] {
  return mockRoomFiles.filter((f) => f.roomId === roomId)
}

export function getRoomSchedule(roomId: string): RoomScheduleItem[] {
  return mockRoomSchedule.filter((s) => s.roomId === roomId)
}

export function getNotificationsForUser(userId: string): Notification[] {
  return mockNotifications.filter((n) => n.userId === userId)
}

export function getUserLimits(userId: string): UserLimits | undefined {
  return mockUserLimits.find((l) => l.userId === userId)
}

export function getModels(): User[] {
  return mockUsers.filter((u) => u.role === "model")
}
[V0_FILE]typescript:file="lib/mock-db.ts"
/**
 * In-memory mock Prisma client for running without a database.
 * Seeded with test accounts from test-credentials.ts.
 * Supports findUnique, findFirst, findMany, create, update, upsert, delete, count, updateMany.
 */
import bcrypt from "bcryptjs"
import { v4 as uuidv4 } from "uuid"
import { TEST_PASSWORD, TEST_ACCOUNTS } from "./test-credentials"

// Pre-hash the test password (sync, runs once at module load)
const HASH = bcrypt.hashSync(TEST_PASSWORD, 10)

// ─── Seed Data ──────────────────────────────────────────────────────────────

const brandNames: Record<string, string> = { dior: "Maison Dior", gucci: "Gucci", chanel: "Chanel" }
const agencyNames: Record<string, string> = {
  eliteagency: "Elite Model Management",
  nextagency: "Next Models",
  imgmodels: "IMG Models",
}
const modelNames: Record<string, string> = {
  sofia: "Sofia Laurent",
  lina: "Lina Chen",
  maya: "Maya Williams",
  emma: "Emma Jones",
  chiara: "Chiara Rossi",
  zoe: "Zoe Park",
  anna: "Anna Schmidt",
  lea: "Léa Martin",
  nina: "Nina Petrova",
  jade: "Jade Thompson",
  luna: "Luna Garcia",
  sasha: "Sasha Kim",
}

const seedUsers = [
  ...TEST_ACCOUNTS.brands.map((a, i) => ({
    id: `mock-brand-${i}`,
    email: a.email,
    username: a.username,
    passwordHash: HASH,
    role: "BRAND",
    createdAt: new Date("2022-01-01"),
    updatedAt: new Date(),
  })),
  ...TEST_ACCOUNTS.agencies.map((a, i) => ({
    id: `mock-agency-${i}`,
    email: a.email,
    username: a.username,
    passwordHash: HASH,
    role: "AGENCY",
    createdAt: new Date("2022-01-01"),
    updatedAt: new Date(),
  })),
  ...TEST_ACCOUNTS.models.map((a, i) => ({
    id: `mock-model-${i}`,
    email: a.email,
    username: a.username,
    passwordHash: HASH,
    role: "MODEL",
    createdAt: new Date("2023-01-01"),
    updatedAt: new Date(),
  })),
]

const seedProfiles = seedUsers.map((u) => {
  let displayName = u.username
  if (u.role === "BRAND") displayName = brandNames[u.username] || u.username
  else if (u.role === "AGENCY") displayName = agencyNames[u.username] || u.username
  else if (u.role === "MODEL") displayName = modelNames[u.username] || u.username
  return {
    userId: u.id,
    displayName,
    bio: `${displayName} on LuxLane`,
    location: "Paris, France",
    height: u.role === "MODEL" ? "178 cm" : null,
    hair: u.role === "MODEL" ? "Brown" : null,
    eyes: u.role === "MODEL" ? "Green" : null,
    experience: u.role === "MODEL" ? "3 years" : null,
    verificationStatus: "LUXLANE_VERIFIED",
    score: u.role === "MODEL" ? 80 + Math.floor(Math.random() * 20) : null,
    avatarUrl: null,
    coverUrl: null,
  }
})

const seedModelProfiles = seedUsers
  .filter((u) => u.role === "MODEL")
  .map((u, i) => ({
    userId: u.id,
    heightCm: 175 + (i % 10),
    bustCm: 80 + (i % 5),
    waistCm: 58 + (i % 5),
    hipsCm: 85 + (i % 5),
    shoeSize: 38 + (i % 4),
    hair: ["Brown", "Black", "Blonde", "Red", "Auburn"][i % 5],
    eyes: ["Green", "Brown", "Blue", "Hazel", "Gray"][i % 5],
    languages: ["English", "French"],
    availability: "AVAILABLE",
    agencyId: i < 4 ? "mock-agency-0" : i < 8 ? "mock-agency-1" : "mock-agency-2",
    verificationLevel: "LUXLANE_VERIFIED",
    luxlaneScore: 80 + i * 1.5,
    details: null,
  }))

const seedAgencyProfiles = seedUsers
  .filter((u) => u.role === "AGENCY")
  .map((u) => ({
    userId: u.id,
    agencyName: agencyNames[u.username] || u.username,
    website: `https://${u.username}.com`,
    verified: true,
  }))

const seedBrandProfiles = seedUsers
  .filter((u) => u.role === "BRAND")
  .map((u) => ({
    userId: u.id,
    brandName: brandNames[u.username] || u.username,
    website: `https://${u.username}.com`,
    verified: true,
  }))

const seedCastings = [
  {
    id: "mock-casting-0",
    createdBy: "mock-brand-0",
    title: "Dior Spring 2025 Campaign",
    type: "CAMPAIGN",
    description: "Seeking diverse female models for our upcoming Spring 2025 campaign. Shot by Steven Meisel in Paris.",
    location: "Paris, France",
    startDate: new Date("2025-03-15"),
    endDate: new Date("2025-03-20"),
    payMin: 10000,
    payMax: 25000,
    deadline: new Date("2025-02-28"),
    status: "ACTIVE",
    verifiedOnly: true,
    requireDigitalTwin: false,
    maxSubmissionsPerAgency: 5,
    createdAt: new Date("2025-01-15"),
    updatedAt: new Date(),
  },
  {
    id: "mock-casting-1",
    createdBy: "mock-brand-1",
    title: "Gucci Milan Fashion Week FW25",
    type: "RUNWAY",
    description: "Open casting for Gucci FW25 runway show in Milan. Looking for unique, bold faces.",
    location: "Milan, Italy",
    startDate: new Date("2025-02-20"),
    endDate: new Date("2025-02-21"),
    payMin: 3000,
    payMax: 8000,
    deadline: new Date("2025-02-10"),
    status: "ACTIVE",
    verifiedOnly: false,
    requireDigitalTwin: false,
    maxSubmissionsPerAgency: 10,
    createdAt: new Date("2025-01-20"),
    updatedAt: new Date(),
  },
  {
    id: "mock-casting-2",
    createdBy: "mock-brand-2",
    title: "Chanel Haute Couture SS25",
    type: "RUNWAY",
    description: "Exclusive casting for Chanel Haute Couture Spring/Summer 2025 show.",
    location: "Paris, France",
    startDate: new Date("2025-01-25"),
    endDate: new Date("2025-01-26"),
    payMin: 5000,
    payMax: 15000,
    deadline: new Date("2025-01-15"),
    status: "CLOSED",
    verifiedOnly: true,
    requireDigitalTwin: true,
    maxSubmissionsPerAgency: 3,
    createdAt: new Date("2024-12-20"),
    updatedAt: new Date(),
  },
  {
    id: "mock-casting-3",
    createdBy: "mock-brand-0",
    title: "Dior Beauty Campaign",
    type: "CAMPAIGN",
    description: "New faces for Dior Beauty 2025 campaign. Looking for fresh, natural beauty.",
    location: "Los Angeles, CA",
    startDate: new Date("2025-04-01"),
    endDate: new Date("2025-04-05"),
    payMin: 8000,
    payMax: 20000,
    deadline: new Date("2025-03-15"),
    status: "DRAFT",
    verifiedOnly: false,
    requireDigitalTwin: false,
    maxSubmissionsPerAgency: 5,
    createdAt: new Date("2025-02-01"),
    updatedAt: new Date(),
  },
]

const seedCastingRequirements = [
  { castingId: "mock-casting-0", minHeightCm: 175, maxHeightCm: 185, tags: ["runway", "editorial", "high-fashion"], notes: null },
  { castingId: "mock-casting-1", minHeightCm: 178, maxHeightCm: 188, tags: ["runway", "avant-garde"], notes: null },
  { castingId: "mock-casting-2", minHeightCm: 175, maxHeightCm: 185, tags: ["couture", "runway"], notes: "Must have couture experience" },
  { castingId: "mock-casting-3", minHeightCm: 170, maxHeightCm: null, tags: ["beauty", "campaign"], notes: "Natural look preferred" },
]

const seedSubmissions = [
  {
    id: "mock-sub-0",
    castingId: "mock-casting-0",
    modelId: "mock-model-0",
    submittedBy: "mock-model-0",
    status: "SHORTLISTED",
    note: "Excited to work with Dior again.",
    createdAt: new Date("2025-01-16"),
    updatedAt: new Date("2025-01-18"),
  },
  {
    id: "mock-sub-1",
    castingId: "mock-casting-0",
    modelId: "mock-model-1",
    submittedBy: "mock-agency-0",
    status: "APPLIED",
    note: null,
    createdAt: new Date("2025-01-17"),
    updatedAt: new Date("2025-01-17"),
  },
  {
    id: "mock-sub-2",
    castingId: "mock-casting-1",
    modelId: "mock-model-0",
    submittedBy: "mock-model-0",
    status: "OFFERED",
    note: "Would love to walk for Gucci.",
    createdAt: new Date("2025-01-21"),
    updatedAt: new Date("2025-01-25"),
  },
  {
    id: "mock-sub-3",
    castingId: "mock-casting-1",
    modelId: "mock-model-2",
    submittedBy: "mock-model-2",
    status: "APPLIED",
    note: null,
    createdAt: new Date("2025-01-22"),
    updatedAt: new Date("2025-01-22"),
  },
  {
    id: "mock-sub-4",
    castingId: "mock-casting-2",
    modelId: "mock-model-3",
    submittedBy: "mock-agency-0",
    status: "CONFIRMED",
    note: "Confirmed for Chanel show.",
    createdAt: new Date("2024-12-22"),
    updatedAt: new Date("2025-01-10"),
  },
]

const seedPosts = [
  {
    id: "mock-post-0",
    userId: "mock-model-0",
    imageUrl: "/high-fashion-editorial-model.jpg",
    caption: "Behind the scenes from yesterday's Dior shoot. Thank you to the incredible team.",
    createdAt: new Date(Date.now() - 4 * 3600000),
  },
  {
    id: "mock-post-1",
    userId: "mock-brand-0",
    imageUrl: "/dior-fashion-campaign-spring-aesthetic.jpg",
    caption: "Spring 2025. A new chapter begins. #DiorSS25",
    createdAt: new Date(Date.now() - 8 * 3600000),
  },
  {
    id: "mock-post-2",
    userId: "mock-model-4",
    imageUrl: "/runway-fashion-week-model.jpg",
    caption: "Milan Fashion Week finale walk. Dreams do come true.",
    createdAt: new Date(Date.now() - 24 * 3600000),
  },
  {
    id: "mock-post-3",
    userId: "mock-model-0",
    imageUrl: "/luxury-brand-campaign-model.jpg",
    caption: "New campaign dropping soon. Stay tuned.",
    createdAt: new Date(Date.now() - 48 * 3600000),
  },
  {
    id: "mock-post-4",
    userId: "mock-brand-1",
    imageUrl: "/gucci-fashion-show-runway-aesthetic.jpg",
    caption: "Gucci FW25 - Embracing the extraordinary.",
    createdAt: new Date(Date.now() - 72 * 3600000),
  },
]

const seedNotifications = [
  {
    id: "mock-notif-0",
    userId: "mock-model-0",
    type: "OFFER",
    payload: { title: "New Job Offer", body: "Dior has sent you an offer for Spring 2025 Campaign", relatedId: "mock-casting-0", relatedType: "casting" },
    read: false,
    createdAt: new Date("2025-02-01"),
  },
  {
    id: "mock-notif-1",
    userId: "mock-model-0",
    type: "SHORTLISTED",
    payload: { title: "You've been shortlisted!", body: "Congratulations for Dior Spring 2025", relatedId: "mock-casting-0", relatedType: "casting" },
    read: true,
    createdAt: new Date("2025-01-18"),
  },
  {
    id: "mock-notif-2",
    userId: "mock-model-0",
    type: "INVITE",
    payload: { title: "Casting Invitation", body: "Gucci has invited you to apply for Milan Fashion Week", relatedId: "mock-casting-1", relatedType: "casting" },
    read: true,
    createdAt: new Date("2025-01-20"),
  },
]

const seedConversations = [
  { id: "mock-conv-0", type: "direct", castingId: null, createdAt: new Date("2025-01-15") },
  { id: "mock-conv-1", type: "direct", castingId: null, createdAt: new Date("2025-01-20") },
]

const seedConversationMembers = [
  { conversationId: "mock-conv-0", userId: "mock-model-0", joinedAt: new Date("2025-01-15") },
  { conversationId: "mock-conv-0", userId: "mock-brand-0", joinedAt: new Date("2025-01-15") },
  { conversationId: "mock-conv-1", userId: "mock-model-0", joinedAt: new Date("2025-01-20") },
  { conversationId: "mock-conv-1", userId: "mock-agency-0", joinedAt: new Date("2025-01-20") },
]

const seedMessages = [
  {
    id: "mock-msg-0",
    conversationId: "mock-conv-0",
    senderId: "mock-brand-0",
    body: "We loved your portfolio! Would you be interested in our Spring 2025 campaign?",
    attachmentUrl: null,
    createdAt: new Date("2025-01-15T10:00:00"),
  },
  {
    id: "mock-msg-1",
    conversationId: "mock-conv-0",
    senderId: "mock-model-0",
    body: "Thank you! I'd be very interested. When are the shoot dates?",
    attachmentUrl: null,
    createdAt: new Date("2025-01-15T11:00:00"),
  },
  {
    id: "mock-msg-2",
    conversationId: "mock-conv-0",
    senderId: "mock-brand-0",
    body: "March 15-20 in Paris. I'll send you the details soon.",
    attachmentUrl: null,
    createdAt: new Date("2025-01-15T11:30:00"),
  },
  {
    id: "mock-msg-3",
    conversationId: "mock-conv-1",
    senderId: "mock-agency-0",
    body: "Your updated comp card is ready for review. Please approve before we send to clients.",
    attachmentUrl: null,
    createdAt: new Date("2025-01-20T14:00:00"),
  },
]

const seedFollows = [
  { followerId: "mock-model-0", followingId: "mock-brand-0", createdAt: new Date("2025-01-01") },
  { followerId: "mock-model-0", followingId: "mock-brand-1", createdAt: new Date("2025-01-02") },
  { followerId: "mock-model-1", followingId: "mock-model-0", createdAt: new Date("2025-01-03") },
  { followerId: "mock-brand-0", followingId: "mock-model-0", createdAt: new Date("2025-01-04") },
  { followerId: "mock-model-2", followingId: "mock-model-0", createdAt: new Date("2025-01-05") },
  { followerId: "mock-model-3", followingId: "mock-model-0", createdAt: new Date("2025-01-06") },
  { followerId: "mock-model-0", followingId: "mock-agency-0", createdAt: new Date("2025-01-07") },
]

const seedUserSettings = seedUsers.map((u) => ({
  userId: u.id,
  notifications: { push: true, email: true },
  darkMode: true,
  privacy: { mode: "public" },
  createdAt: new Date(),
  updatedAt: new Date(),
}))

const seedPostLikes = [
  { userId: "mock-model-0", postId: "mock-post-1", createdAt: new Date() },
  { userId: "mock-brand-0", postId: "mock-post-0", createdAt: new Date() },
  { userId: "mock-model-1", postId: "mock-post-0", createdAt: new Date() },
]

// ─── In-Memory Store ────────────────────────────────────────────────────────

type Store = Record<string, any[]>

const store: Store = {
  user: [...seedUsers],
  profile: [...seedProfiles],
  modelProfile: [...seedModelProfiles],
  agencyProfile: [...seedAgencyProfiles],
  brandProfile: [...seedBrandProfiles],
  refreshToken: [],
  follow: [...seedFollows],
  casting: [...seedCastings],
  savedCasting: [],
  castingRequirement: [...seedCastingRequirements],
  submission: [...seedSubmissions],
  conversation: [...seedConversations],
  conversationMember: [...seedConversationMembers],
  message: [...seedMessages],
  notification: [...seedNotifications],
  mediaAsset: [],
  digitalTwin: [],
  userSettings: [...seedUserSettings],
  post: [...seedPosts],
  postLike: [...seedPostLikes],
  postSave: [],
  comment: [],
}

// ─── Relation Definitions ───────────────────────────────────────────────────

interface Relation {
  type: "one" | "many"
  model: string
  foreignKey: string
  localKey: string
}

const relations: Record<string, Record<string, Relation>> = {
  user: {
    profile: { type: "one", model: "profile", foreignKey: "userId", localKey: "id" },
    modelProfile: { type: "one", model: "modelProfile", foreignKey: "userId", localKey: "id" },
    agencyProfile: { type: "one", model: "agencyProfile", foreignKey: "userId", localKey: "id" },
    brandProfile: { type: "one", model: "brandProfile", foreignKey: "userId", localKey: "id" },
    settings: { type: "one", model: "userSettings", foreignKey: "userId", localKey: "id" },
    posts: { type: "many", model: "post", foreignKey: "userId", localKey: "id" },
    followers: { type: "many", model: "follow", foreignKey: "followingId", localKey: "id" },
    following: { type: "many", model: "follow", foreignKey: "followerId", localKey: "id" },
    notifications: { type: "many", model: "notification", foreignKey: "userId", localKey: "id" },
    refreshTokens: { type: "many", model: "refreshToken", foreignKey: "userId", localKey: "id" },
    castings: { type: "many", model: "casting", foreignKey: "createdBy", localKey: "id" },
    submissions: { type: "many", model: "submission", foreignKey: "modelId", localKey: "id" },
    savedCastings: { type: "many", model: "savedCasting", foreignKey: "userId", localKey: "id" },
    mediaAssets: { type: "many", model: "mediaAsset", foreignKey: "ownerId", localKey: "id" },
    conversationMembers: { type: "many", model: "conversationMember", foreignKey: "userId", localKey: "id" },
    messages: { type: "many", model: "message", foreignKey: "senderId", localKey: "id" },
    postLikes: { type: "many", model: "postLike", foreignKey: "userId", localKey: "id" },
    postSaves: { type: "many", model: "postSave", foreignKey: "userId", localKey: "id" },
    comments: { type: "many", model: "comment", foreignKey: "userId", localKey: "id" },
  },
  casting: {
    requirements: { type: "one", model: "castingRequirement", foreignKey: "castingId", localKey: "id" },
    submissions: { type: "many", model: "submission", foreignKey: "castingId", localKey: "id" },
    creator: { type: "one", model: "user", foreignKey: "id", localKey: "createdBy" },
    savedBy: { type: "many", model: "savedCasting", foreignKey: "castingId", localKey: "id" },
    rooms: { type: "many", model: "conversation", foreignKey: "castingId", localKey: "id" },
  },
  submission: {
    casting: { type: "one", model: "casting", foreignKey: "id", localKey: "castingId" },
    model: { type: "one", model: "user", foreignKey: "id", localKey: "modelId" },
  },
  profile: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
  },
  modelProfile: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
    digitalTwin: { type: "one", model: "digitalTwin", foreignKey: "userId", localKey: "userId" },
  },
  agencyProfile: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
  },
  brandProfile: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
  },
  post: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
    likes: { type: "many", model: "postLike", foreignKey: "postId", localKey: "id" },
    saves: { type: "many", model: "postSave", foreignKey: "postId", localKey: "id" },
    comments: { type: "many", model: "comment", foreignKey: "postId", localKey: "id" },
  },
  comment: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
    post: { type: "one", model: "post", foreignKey: "id", localKey: "postId" },
  },
  notification: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
  },
  conversation: {
    members: { type: "many", model: "conversationMember", foreignKey: "conversationId", localKey: "id" },
    messages: { type: "many", model: "message", foreignKey: "conversationId", localKey: "id" },
    casting: { type: "one", model: "casting", foreignKey: "id", localKey: "castingId" },
  },
  conversationMember: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
    conversation: { type: "one", model: "conversation", foreignKey: "id", localKey: "conversationId" },
  },
  message: {
    sender: { type: "one", model: "user", foreignKey: "id", localKey: "senderId" },
    conversation: { type: "one", model: "conversation", foreignKey: "id", localKey: "conversationId" },
  },
  follow: {
    follower: { type: "one", model: "user", foreignKey: "id", localKey: "followerId" },
    following: { type: "one", model: "user", foreignKey: "id", localKey: "followingId" },
  },
  savedCasting: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
    casting: { type: "one", model: "casting", foreignKey: "id", localKey: "castingId" },
  },
  digitalTwin: {
    user: { type: "one", model: "modelProfile", foreignKey: "userId", localKey: "userId" },
  },
  mediaAsset: {
    owner: { type: "one", model: "user", foreignKey: "id", localKey: "ownerId" },
  },
  userSettings: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
  },
  castingRequirement: {
    casting: { type: "one", model: "casting", foreignKey: "id", localKey: "castingId" },
  },
  refreshToken: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
  },
  postLike: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
    post: { type: "one", model: "post", foreignKey: "id", localKey: "postId" },
  },
  postSave: {
    user: { type: "one", model: "user", foreignKey: "id", localKey: "userId" },
    post: { type: "one", model: "post", foreignKey: "id", localKey: "postId" },
  },
}

// ─── Query Engine ───────────────────────────────────────────────────────────

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function matchesWhere(record: any, where: any): boolean {
  if (!where) return true

for (const [key, value] of Object.entries(where)) {
    if (key === "AND") {
      if (!(value as any[]).every((c: any) => matchesWhere(record, c))) return false
      continue
    }
    if (key === "OR") {
      if (!(value as any[]).some((c: any) => matchesWhere(record, c))) return false
      continue
    }
    if (key === "NOT") {
      if (matchesWhere(record, value)) return false
      continue
    }

if (value === undefined) continue

// Composite unique key pattern: fieldA_fieldB: { fieldA: x, fieldB: y }
    if (
      typeof value === "object" &&
      value !== null &&
      !Array.isArray(value) &&
      !(value instanceof Date) &&
      key.includes("_")
    ) {
      const parts = key.split("_")
      const isComposite = parts.every((p) => typeof (value as any)[p] !== "undefined")
      if (isComposite) {
        if (!matchesWhere(record, value)) return false
        continue
      }
    }

// Filter operators
    if (typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
      if ("in" in value) {
        if (!value.in.includes(record[key])) return false
        continue
      }
      if ("notIn" in value) {
        if (value.notIn.includes(record[key])) return false
        continue
      }
      if ("contains" in value) {
        const mode = value.mode === "insensitive" ? "i" : ""
        if (!new RegExp(String(value.contains).replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), mode).test(record[key] || ""))
          return false
        continue
      }
      if ("startsWith" in value) {
        if (!(record[key] || "").startsWith(value.startsWith)) return false
        continue
      }
      if ("endsWith" in value) {
        if (!(record[key] || "").endsWith(value.endsWith)) return false
        continue
      }
      if ("gte" in value) {
        if (record[key] < value.gte) return false
      }
      if ("lte" in value) {
        if (record[key] > value.lte) return false
      }
      if ("gt" in value) {
        if (record[key] <= value.gt) return false
      }
      if ("lt" in value) {
        if (record[key] >= value.lt) return false
      }
      if ("not" in value) {
        if (typeof value.not === "object" && value.not !== null) {
          if (matchesWhere({ [key]: record[key] }, { [key]: value.not })) return false
        } else {
          if (record[key] === value.not) return false
        }
        continue
      }
      if ("equals" in value) {
        if (record[key] !== value.equals) return false
        continue
      }
      if ("has" in value) {
        if (!Array.isArray(record[key]) || !record[key].includes(value.has)) return false
        continue
      }
      // If none of the operator keys matched, it might be a nested where on a relation
      // Just skip it gracefully
      continue
    }

// Direct equality
    if (record[key] !== value) return false
  }
  return true
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function resolveIncludes(modelName: string, record: any, include: any): any {
  if (!include || !record) return record

const result = { ...record }
  const modelRels = relations[modelName] || {}

for (const [key, value] of Object.entries(include)) {
    if (key === "_count") {
      const countResult: any = {}
      const countSelect = (value as any)?.select || {}
      for (const countKey of Object.keys(countSelect)) {
        const rel = modelRels[countKey]
        if (rel) {
          countResult[countKey] = (store[rel.model] || []).filter(
            (r: any) => r[rel.foreignKey] === record[rel.localKey]
          ).length
        } else {
          countResult[countKey] = 0
        }
      }
      result._count = countResult
      continue
    }

if (!value) continue
    const rel = modelRels[key]
    if (!rel) continue

if (rel.type === "one") {
      const related = (store[rel.model] || []).find((r: any) => r[rel.foreignKey] === record[rel.localKey])
      if (typeof value === "object" && value !== null) {
        let resolved = related ? { ...related } : null
        if (resolved && (value as any).include) {
          resolved = resolveIncludes(rel.model, resolved, (value as any).include)
        }
        if (resolved && (value as any).select) {
          resolved = applySelect(resolved, (value as any).select)
        }
        result[key] = resolved
      } else {
        result[key] = related ? { ...related } : null
      }
    } else {
      let list = (store[rel.model] || [])
        .filter((r: any) => r[rel.foreignKey] === record[rel.localKey])
        .map((r: any) => ({ ...r }))

if (typeof value === "object" && value !== null) {
        if ((value as any).where) list = list.filter((r: any) => matchesWhere(r, (value as any).where))
        if ((value as any).orderBy) list = applyOrderBy(list, (value as any).orderBy)
        if ((value as any).skip) list = list.slice((value as any).skip)
        if ((value as any).take) list = list.slice(0, (value as any).take)
        if ((value as any).include) list = list.map((r: any) => resolveIncludes(rel.model, r, (value as any).include))
        if ((value as any).select) list = list.map((r: any) => applySelect(r, (value as any).select))
      }
      result[key] = list
    }
  }
  return result
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function applySelect(record: any, select: any): any {
  if (!select) return record
  const result: any = {}
  for (const key of Object.keys(select)) {
    if (key === "_count") {
      // Handle _count inside select
      const countResult: any = {}
      const countSelect = (select._count as any)?.select || {}
      for (const countKey of Object.keys(countSelect)) {
        // Will be resolved if includes were already applied
        if (record._count) {
          countResult[countKey] = record._count[countKey] || 0
        }
      }
      result._count = countResult
      continue
    }
    if (select[key]) result[key] = record[key]
  }
  return result
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function applyOrderBy(records: any[], orderBy: any): any[] {
  if (!orderBy) return records
  const entries = Array.isArray(orderBy) ? orderBy : [orderBy]

return [...records].sort((a, b) => {
    for (const entry of entries) {
      for (const [key, dir] of Object.entries(entry)) {
        const aVal = a[key]
        const bVal = b[key]
        if (aVal === bVal) continue
        if (aVal == null) return 1
        if (bVal == null) return -1
        const cmp = aVal < bVal ? -1 : 1
        return dir === "desc" ? -cmp : cmp
      }
    }
    return 0
  })
}

// ─── CRUD Operations ────────────────────────────────────────────────────────

// Models that use composite keys instead of auto-generated id
const COMPOSITE_KEY_MODELS = new Set([
  "profile",
  "modelProfile",
  "agencyProfile",
  "brandProfile",
  "userSettings",
  "castingRequirement",
  "follow",
  "savedCasting",
  "conversationMember",
  "postLike",
  "postSave",
  "digitalTwin",
])

function createModelAccessor(modelName: string) {
  return {
    findUnique: async (args: any = {}) => {
      const records = store[modelName] || []
      const record = records.find((r: any) => matchesWhere(r, args.where))
      if (!record) return null
      let result = { ...record }
      if (args.include) result = resolveIncludes(modelName, result, args.include)
      if (args.select) result = applySelect(result, args.select)
      return result
    },

findFirst: async (args: any = {}) => {
      let records = store[modelName] || []
      if (args.where) records = records.filter((r: any) => matchesWhere(r, args.where))
      if (args.orderBy) records = applyOrderBy(records, args.orderBy)
      const record = records[0]
      if (!record) return null
      let result = { ...record }
      if (args.include) result = resolveIncludes(modelName, result, args.include)
      if (args.select) result = applySelect(result, args.select)
      return result
    },

findMany: async (args: any = {}) => {
      let records = store[modelName] || []
      if (args.where) records = records.filter((r: any) => matchesWhere(r, args.where))
      if (args.orderBy) records = applyOrderBy(records, args.orderBy)
      if (args.cursor) {
        const idx = records.findIndex((r: any) => {
          for (const [k, v] of Object.entries(args.cursor)) {
            if (r[k] !== v) return false
          }
          return true
        })
        if (idx >= 0) records = records.slice(idx + 1)
      }
      if (args.skip) records = records.slice(args.skip)
      if (args.take) records = records.slice(0, args.take)
      if (args.distinct) {
        const seen = new Set<string>()
        records = records.filter((r: any) => {
          const key = args.distinct.map((d: string) => r[d]).join("|")
          if (seen.has(key)) return false
          seen.add(key)
          return true
        })
      }
      return records.map((r: any) => {
        let result = { ...r }
        if (args.include) result = resolveIncludes(modelName, result, args.include)
        if (args.select) result = applySelect(result, args.select)
        return result
      })
    },

create: async (args: any = {}) => {
      const data = { ...args.data }

// Auto-generate id if not composite key model
      if (!COMPOSITE_KEY_MODELS.has(modelName) && !data.id) {
        data.id = uuidv4()
      }
      if (!data.createdAt) data.createdAt = new Date()
      if (!data.updatedAt) data.updatedAt = new Date()

// Handle nested creates and connects
      const modelRels = relations[modelName] || {}
      for (const [key, value] of Object.entries(data)) {
        if (typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
          const val = value as any
          if (val.create) {
            const rel = modelRels[key]
            if (rel) {
              const nestedData = { ...val.create }
              if (rel.foreignKey !== "id") {
                nestedData[rel.foreignKey] = data[rel.localKey] || data.id
              }
              if (!nestedData.createdAt) nestedData.createdAt = new Date()
              if (!nestedData.updatedAt) nestedData.updatedAt = new Date()
              if (!store[rel.model]) store[rel.model] = []
              store[rel.model].push(nestedData)
            }
            delete data[key]
          } else if (val.connect) {
            delete data[key]
          } else if (val.createMany) {
            const rel = modelRels[key]
            if (rel && val.createMany.data) {
              for (const item of val.createMany.data) {
                const nestedData = { ...item }
                if (rel.foreignKey !== "id") {
                  nestedData[rel.foreignKey] = data[rel.localKey] || data.id
                }
                if (!nestedData.createdAt) nestedData.createdAt = new Date()
                if (!store[rel.model]) store[rel.model] = []
                store[rel.model].push(nestedData)
              }
            }
            delete data[key]
          }
        }
      }

if (!store[modelName]) store[modelName] = []
      store[modelName].push(data)

let result = { ...data }
      if (args.include) result = resolveIncludes(modelName, result, args.include)
      if (args.select) result = applySelect(result, args.select)
      return result
    },

update: async (args: any = {}) => {
      const records = store[modelName] || []
      const idx = records.findIndex((r: any) => matchesWhere(r, args.where))
      if (idx === -1) throw new Error(`Record not found in ${modelName}`)

// Handle nested updates
      const updateData = { ...args.data }
      const modelRels = relations[modelName] || {}
      for (const [key, value] of Object.entries(updateData)) {
        if (typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
          const val = value as any
          if (val.update || val.upsert || val.create || val.set !== undefined || val.increment !== undefined || val.decrement !== undefined) {
            if (val.increment !== undefined) {
              updateData[key] = (records[idx][key] || 0) + val.increment
            } else if (val.decrement !== undefined) {
              updateData[key] = (records[idx][key] || 0) - val.decrement
            } else {
              delete updateData[key]
            }
          }
        }
      }

const updated = { ...records[idx], ...updateData, updatedAt: new Date() }
      records[idx] = updated

let result = { ...updated }
      if (args.include) result = resolveIncludes(modelName, result, args.include)
      if (args.select) result = applySelect(result, args.select)
      return result
    },

upsert: async (args: any = {}) => {
      const records = store[modelName] || []
      const existing = records.find((r: any) => matchesWhere(r, args.where))

if (existing) {
        const idx = records.indexOf(existing)
        const updated = { ...existing, ...args.update, updatedAt: new Date() }
        records[idx] = updated
        let result = { ...updated }
        if (args.include) result = resolveIncludes(modelName, result, args.include)
        return result
      } else {
        const data = { ...args.create }
        if (!COMPOSITE_KEY_MODELS.has(modelName) && !data.id) data.id = uuidv4()
        if (!data.createdAt) data.createdAt = new Date()
        data.updatedAt = new Date()
        records.push(data)
        let result = { ...data }
        if (args.include) result = resolveIncludes(modelName, result, args.include)
        return result
      }
    },

delete: async (args: any = {}) => {
      const records = store[modelName] || []
      const idx = records.findIndex((r: any) => matchesWhere(r, args.where))
      if (idx === -1) throw new Error(`Record not found in ${modelName}`)
      return records.splice(idx, 1)[0]
    },

deleteMany: async (args: any = {}) => {
      const before = (store[modelName] || []).length
      store[modelName] = (store[modelName] || []).filter((r: any) => !matchesWhere(r, args?.where))
      return { count: before - (store[modelName] || []).length }
    },

count: async (args: any = {}) => {
      let records = store[modelName] || []
      if (args?.where) records = records.filter((r: any) => matchesWhere(r, args.where))
      return records.length
    },

updateMany: async (args: any = {}) => {
      const records = store[modelName] || []
      let count = 0
      for (let i = 0; i < records.length; i++) {
        if (matchesWhere(records[i], args.where)) {
          records[i] = { ...records[i], ...args.data, updatedAt: new Date() }
          count++
        }
      }
      return { count }
    },

aggregate: async (args: any = {}) => {
      let records = store[modelName] || []
      if (args.where) records = records.filter((r: any) => matchesWhere(r, args.where))
      return { _count: { _all: records.length } }
    },

groupBy: async (args: any = {}) => {
      let records = store[modelName] || []
      if (args.where) records = records.filter((r: any) => matchesWhere(r, args.where))
      const groups = new Map<string, any[]>()
      for (const r of records) {
        const key = (args.by as string[]).map((k: string) => r[k]).join("|")
        if (!groups.has(key)) groups.set(key, [])
        groups.get(key)!.push(r)
      }
      return Array.from(groups.entries()).map(([, items]) => {
        const result: any = {}
        for (const k of args.by as string[]) result[k] = items[0][k]
        if (args._count) result._count = items.length
        return result
      })
    },
  }
}

// ─── Mock Prisma Client ─────────────────────────────────────────────────────

export function createMockPrismaClient(): any {
  const allModelNames = Object.keys(store)

const client: any = {
    $connect: async () => {},
    $disconnect: async () => {},
    $transaction: async (arg: any) => {
      if (Array.isArray(arg)) return Promise.all(arg)
      if (typeof arg === "function") return arg(client)
      return arg
    },
    $queryRaw: async () => [],
    $executeRaw: async () => 0,
  }

for (const name of allModelNames) {
    client[name] = createModelAccessor(name)
  }

return client
}
[V0_FILE]typescript:file="lib/mock-users.ts"
import { TEST_PASSWORD, TEST_ACCOUNTS } from "./test-credentials"
import type { AuthUser, UserRole } from "./auth"

export interface MockUser {
  id: string
  email: string
  username: string
  role: UserRole
  displayName: string
  avatarUrl: string | null
}

// Build a flat list of mock users from test credentials with deterministic IDs
const allMockUsers: MockUser[] = [
  ...TEST_ACCOUNTS.brands.map((a, i) => ({
    id: `mock-brand-${i}`,
    email: a.email,
    username: a.username,
    role: "brand" as UserRole,
    displayName: a.username.charAt(0).toUpperCase() + a.username.slice(1),
    avatarUrl: null,
  })),
  ...TEST_ACCOUNTS.agencies.map((a, i) => ({
    id: `mock-agency-${i}`,
    email: a.email,
    username: a.username,
    role: "agency" as UserRole,
    displayName: a.username.charAt(0).toUpperCase() + a.username.slice(1),
    avatarUrl: null,
  })),
  ...TEST_ACCOUNTS.models.map((a, i) => ({
    id: `mock-model-${i}`,
    email: a.email,
    username: a.username,
    role: "model" as UserRole,
    displayName: a.username.charAt(0).toUpperCase() + a.username.slice(1),
    avatarUrl: null,
  })),
]

const mockUsersByEmail = new Map(allMockUsers.map((u) => [u.email, u]))
const mockUsersById = new Map(allMockUsers.map((u) => [u.id, u]))

export { TEST_PASSWORD }

export function findMockUserByEmail(email: string): MockUser | undefined {
  return mockUsersByEmail.get(email)
}

export function findMockUserById(id: string): MockUser | undefined {
  return mockUsersById.get(id)
}

export function mockUserToAuthUser(mock: MockUser): AuthUser {
  return {
    id: mock.id,
    email: mock.email,
    role: mock.role,
    username: mock.username,
    displayName: mock.displayName,
    avatarUrl: mock.avatarUrl,
    isVerified: false,
    onboardingComplete: true,
  }
}
[V0_FILE]typescriptreact:file="lib/navigation-context.tsx"
"use client"

import { createContext, useContext, useState, useCallback, type ReactNode } from "react"
import type { Casting, User, CastingRoom } from "@/lib/types"
import type { TabId } from "@/lib/navigation"

interface NavigationState {
  view: ViewType
  tab: TabId
  selectedCasting: Casting | null
  selectedProfile: User | null
  compareModels: [User, User] | null
  selectedRoom: CastingRoom | null
}

interface NavigationContextType {
  // Current state
  currentView: ViewType
  activeTab: TabId
  selectedCasting: Casting | null
  selectedProfile: User | null
  compareModels: [User, User] | null
  selectedRoom: CastingRoom | null

// History
  canGoBack: boolean

// Navigation methods
  navigateTo: (
    view: ViewType,
    options?: {
      casting?: Casting
      profile?: User
      models?: [User, User]
      room?: CastingRoom
    },
  ) => void
  setActiveTab: (tab: TabId) => void
  goBack: () => void
  goHome: () => void
}

const NavigationContext = createContext<NavigationContextType | null>(null)

export function NavigationProvider({ children }: { children: ReactNode }) {
  const [history, setHistory] = useState<NavigationState[]>([])
  const [currentState, setCurrentState] = useState<NavigationState>({
    view: "main",
    tab: "home",
    selectedCasting: null,
    selectedProfile: null,
    compareModels: null,
    selectedRoom: null,
  })

const navigateTo = useCallback(
    (
      view: ViewType,
      options?: {
        casting?: Casting
        profile?: User
        models?: [User, User]
        room?: CastingRoom
      },
    ) => {
      // Save current state to history before navigating
      setHistory((prev) => [...prev, currentState])

setCurrentState((prev) => ({
        ...prev,
        view,
        selectedCasting: options?.casting ?? (view === "casting" ? prev.selectedCasting : null),
        selectedProfile: options?.profile ?? (view === "profile" ? prev.selectedProfile : null),
        compareModels: options?.models ?? (view === "compare" ? prev.compareModels : null),
        selectedRoom: options?.room ?? (view === "casting-room" ? prev.selectedRoom : null),
      }))
    },
    [currentState],
  )

const setActiveTab = useCallback((tab: TabId) => {
    // Clear history when changing main tabs
    setHistory([])
    setCurrentState((prev) => ({
      ...prev,
      view: "main",
      tab,
      selectedCasting: null,
      selectedProfile: null,
      compareModels: null,
      selectedRoom: null,
    }))
  }, [])

const goBack = useCallback(() => {
    if (history.length > 0) {
      const previousState = history[history.length - 1]
      setHistory((prev) => prev.slice(0, -1))
      setCurrentState(previousState)
    } else {
      // Fallback to home if no history
      setCurrentState({
        view: "main",
        tab: "home",
        selectedCasting: null,
        selectedProfile: null,
        compareModels: null,
        selectedRoom: null,
      })
    }
  }, [history])

const goHome = useCallback(() => {
    setHistory([])
    setCurrentState({
      view: "main",
      tab: "home",
      selectedCasting: null,
      selectedProfile: null,
      compareModels: null,
      selectedRoom: null,
    })
  }, [])

return (
    <NavigationContext.Provider
      value={{
        currentView: currentState.view,
        activeTab: currentState.tab,
        selectedCasting: currentState.selectedCasting,
        selectedProfile: currentState.selectedProfile,
        compareModels: currentState.compareModels,
        selectedRoom: currentState.selectedRoom,
        canGoBack: history.length > 0,
        navigateTo,
        setActiveTab,
        goBack,
        goHome,
      }}
    >
      {children}
    </NavigationContext.Provider>
  )
}

export function useNavigation() {
  const context = useContext(NavigationContext)
  if (!context) {
    throw new Error("useNavigation must be used within a NavigationProvider")
  }
  return context
}
[V0_FILE]typescript:file="lib/navigation.ts"
import type { UserRole } from "./types"
import { Home, Briefcase, Search, MessageSquare, Users } from "lucide-react"

export interface NavTab {
  id: TabId
  label: string
  icon: typeof Home
}

export function getNavTabs(role: UserRole): NavTab[] {
  switch (role) {
    case "model":
      return [
        { id: "home", label: "Home", icon: Home },
        { id: "castings", label: "Castings", icon: Briefcase },
        { id: "discover", label: "Discover", icon: Search },
        { id: "inbox", label: "Inbox", icon: MessageSquare },
      ]
    case "agency":
      return [
        { id: "home", label: "Home", icon: Home },
        { id: "models", label: "Scout", icon: Search },
        { id: "castings", label: "Castings", icon: Briefcase },
        { id: "inbox", label: "Inbox", icon: MessageSquare },
      ]
    case "brand":
    case "client":
      return [
        { id: "home", label: "Home", icon: Home },
        { id: "models", label: "Models", icon: Users },
        { id: "castings", label: "Castings", icon: Briefcase },
        { id: "inbox", label: "Inbox", icon: MessageSquare },
      ]
  }
}
[V0_FILE]typescript:file="lib/prisma.ts"
import { createMockPrismaClient } from "./mock-db"

function createPrisma() {
  if (!process.env.DATABASE_URL) {
    return createMockPrismaClient()
  }
  try {
    // eslint-disable-next-line @typescript-eslint/no-require-imports
    const { PrismaClient } = require("@prisma/client")
    return new PrismaClient()
  } catch {
    // Prisma client not generated or unavailable — use mock
    return createMockPrismaClient()
  }
}

declare global {
  // eslint-disable-next-line no-var
  var prismaGlobal: ReturnType<typeof createPrisma> | undefined
}

const prisma = globalThis.prismaGlobal ?? createPrisma()
if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma

export { prisma }
[V0_FILE]typescript:file="lib/queue.ts"
import { Redis } from "@upstash/redis"

// Initialize Redis client using existing Upstash connection
export const redis = new Redis({
  url: process.env.KV_REST_API_URL!,
  token: process.env.KV_REST_API_TOKEN!,
})

// Queue names
export const DIGITAL_TWIN_QUEUE = "digitalTwin"

// Add a job to the queue
export async function addJob(queue: string, jobType: string, data: Record<string, unknown>) {
  const jobId = `${queue}:${Date.now()}:${Math.random().toString(36).slice(2)}`
  await redis.lpush(
    `queue:${queue}`,
    JSON.stringify({ id: jobId, type: jobType, data, createdAt: new Date().toISOString() }),
  )
  return jobId
}

// Get next job from queue (for worker)
export async function getNextJob(queue: string) {
  const job = await redis.rpop(`queue:${queue}`)
  if (!job) return null
  return typeof job === "string" ? JSON.parse(job) : job
}

// Get queue length
export async function getQueueLength(queue: string) {
  return redis.llen(`queue:${queue}`)
}
[V0_FILE]typescriptreact:file="lib/store-context.tsx"
"use client"

import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react"
import type { Casting, CastingApplication, User, Notification, JobOffer } from "./types"
import { api } from "./api-client"

export function normalizeStatus<T extends string>(s: T): T {
  return s.toLowerCase().trim() as T
}

// Convert API casting to frontend Casting type
function apiCastingToFrontend(c: Record<string, any>): Casting {
  return {
    id: c.id,
    creatorId: c.createdBy || c.creatorId,
    creator: {
      id: c.creator?.id || c.createdBy,
      name: c.creator?.displayName || c.creator?.username || "Unknown",
      username: c.creator?.username || "",
      avatar: c.creator?.avatarUrl || c.creator?.avatar || "/placeholder.svg",
      role: (c.creator?.role || "brand").toLowerCase() as any,
      email: "",
      verified: c.creator?.verified || false,
      verificationLevel: "unverified" as const,
      bio: "",
      location: "",
      followers: 0,
      following: 0,
      createdAt: new Date(),
    },
    title: c.title,
    type: (c.type || "campaign").toLowerCase(),
    description: c.description || "",
    location: c.location || "",
    dates: {
      start: new Date(c.startDate || c.dates?.start || Date.now()),
      end: new Date(c.endDate || c.dates?.end || Date.now()),
    },
    pay: {
      amount: c.payMin || c.pay?.amount || 0,
      currency: c.currency || c.pay?.currency || "EUR",
      type: c.payMin === c.payMax ? "flat" : c.payMin ? "flat" : "tbd",
    },
    requirements: c.requirements || {},
    deadline: c.deadline ? new Date(c.deadline) : new Date(Date.now() + 30 * 86400000),
    status: normalizeStatus(c.status || "active"),
    applicationsCount: c.applicationsCount ?? c._count?.submissions ?? 0,
    shortlistedCount: c.shortlistedCount ?? 0,
    createdAt: new Date(c.createdAt || Date.now()),
    images: c.images || [],
    settings: c.settings || {},
    roomId: c.roomId,
  }
}

interface StoreState {
  castings: Casting[]
  applications: CastingApplication[]
  users: User[]
  notifications: Notification[]
  offers: JobOffer[]
  castingsLoaded: boolean
}

interface StoreContextValue extends StoreState {
  // Getters
  getCastings: () => Casting[]
  getActiveCastings: () => Casting[]
  getCastingsForCreator: (creatorId: string) => Casting[]
  getCasting: (id: string) => Casting | undefined
  getApplications: () => CastingApplication[]
  getApplicationsForModel: (modelId: string) => CastingApplication[]
  getApplicationsForCasting: (castingId: string) => CastingApplication[]
  getUsers: () => User[]
  getUser: (id: string) => User | undefined
  getNotificationsForUser: (userId: string) => Notification[]
  getUnreadNotificationsCount: (userId: string) => number
  getOffersForModel: (modelId: string) => JobOffer[]
  getPendingOffersForModel: (modelId: string) => JobOffer[]

// Mutators
  addCasting: (casting: Casting) => void
  updateCasting: (id: string, updates: Partial<Casting>) => void
  addApplication: (application: CastingApplication) => void
  updateApplication: (id: string, updates: Partial<CastingApplication>) => void
  addNotification: (notification: Notification) => void
  markNotificationRead: (id: string) => void
  markAllNotificationsRead: (userId: string) => void
  addOffer: (offer: JobOffer) => void
  updateOffer: (id: string, updates: Partial<JobOffer>) => void

// Utils
  reseed: () => void
  refreshCastings: () => Promise<void>
}

const StoreContext = createContext<StoreContextValue | null>(null)

export function StoreProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<StoreState>({
    castings: [],
    applications: [],
    users: [],
    notifications: [],
    offers: [],
    castingsLoaded: false,
  })

// Load castings on mount + reload every 30s to stay fresh
  useEffect(() => {
    loadCastings()
    loadApplications()
    const interval = setInterval(() => {
      loadCastings()
      loadApplications()
    }, 30000)
    return () => clearInterval(interval)
  }, [])

async function loadCastings() {
    try {
      const res = await api.getCastings({ status: "ACTIVE", limit: 50 })
      const data = res.data as { castings?: Record<string, any>[] } | undefined
      if (data?.castings && Array.isArray(data.castings)) {
        const castings = data.castings.map(apiCastingToFrontend)
        setState((prev) => ({ ...prev, castings, castingsLoaded: true }))
      } else {
        setState((prev) => ({ ...prev, castingsLoaded: true }))
      }
    } catch {
      setState((prev) => ({ ...prev, castingsLoaded: true }))
    }
  }

async function loadApplications() {
    try {
      const res = await api.getJobHistory()
      const data = res.data as { submissions?: Record<string, any>[] } | undefined
      if (data?.submissions && Array.isArray(data.submissions)) {
        const applications: CastingApplication[] = data.submissions.map((s: Record<string, any>) => ({
          id: s.id,
          castingId: s.castingId,
          casting: s.casting ? apiCastingToFrontend(s.casting) : undefined,
          modelId: s.modelId,
          model: {
            id: s.model?.id || s.modelId,
            name: s.model?.displayName || s.model?.username || "Model",
            username: s.model?.username || "",
            avatar: s.model?.avatarUrl || "/placeholder.svg",
            role: "model" as const,
            email: "",
            verified: false,
            verificationLevel: "unverified" as const,
            bio: "",
            location: "",
            followers: 0,
            following: 0,
            createdAt: new Date(),
          },
          status: (s.status || "applied").toLowerCase(),
          message: s.note || "",
          submittedAt: new Date(s.createdAt || Date.now()),
          updatedAt: new Date(s.updatedAt || Date.now()),
        }))
        setState((prev) => ({ ...prev, applications }))
      }
    } catch {
      // silently fail — no submissions yet
    }
  }

const refreshCastings = useCallback(async () => {
    await loadCastings()
    await loadApplications()
  }, [])

// Getters
  const getCastings = useCallback(() => state.castings, [state.castings])

const getActiveCastings = useCallback(() => {
    return state.castings.filter((c) => normalizeStatus(c.status) === "active")
  }, [state.castings])

const getCastingsForCreator = useCallback(
    (creatorId: string) => {
      return state.castings.filter((c) => c.creatorId === creatorId)
    },
    [state.castings],
  )

const getCasting = useCallback(
    (id: string) => {
      return state.castings.find((c) => c.id === id)
    },
    [state.castings],
  )

const getApplications = useCallback(() => state.applications, [state.applications])

const getApplicationsForModel = useCallback(
    (modelId: string) => {
      return state.applications.filter((a) => a.modelId === modelId)
    },
    [state.applications],
  )

const getApplicationsForCasting = useCallback(
    (castingId: string) => {
      return state.applications.filter((a) => a.castingId === castingId)
    },
    [state.applications],
  )

const getUsers = useCallback(() => state.users, [state.users])

const getUser = useCallback(
    (id: string) => {
      return state.users.find((u) => u.id === id)
    },
    [state.users],
  )

const getNotificationsForUser = useCallback(
    (userId: string) => {
      return state.notifications
        .filter((n) => n.userId === userId)
        .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
    },
    [state.notifications],
  )

const getUnreadNotificationsCount = useCallback(
    (userId: string) => {
      return state.notifications.filter((n) => n.userId === userId && !n.read).length
    },
    [state.notifications],
  )

const getOffersForModel = useCallback(
    (modelId: string) => {
      return state.offers.filter((o) => o.modelId === modelId)
    },
    [state.offers],
  )

const getPendingOffersForModel = useCallback(
    (modelId: string) => {
      return state.offers.filter((o) => o.modelId === modelId && o.status === "pending")
    },
    [state.offers],
  )

// Mutators
  const addCasting = useCallback((casting: Casting) => {
    setState((prev) => ({
      ...prev,
      castings: [casting, ...prev.castings],
    }))
  }, [])

const updateCasting = useCallback((id: string, updates: Partial<Casting>) => {
    setState((prev) => ({
      ...prev,
      castings: prev.castings.map((c) => (c.id === id ? { ...c, ...updates } : c)),
    }))
  }, [])

const addApplication = useCallback((application: CastingApplication) => {
    setState((prev) => ({
      ...prev,
      applications: [application, ...prev.applications],
    }))
  }, [])

const updateApplication = useCallback((id: string, updates: Partial<CastingApplication>) => {
    setState((prev) => ({
      ...prev,
      applications: prev.applications.map((a) => (a.id === id ? { ...a, ...updates } : a)),
    }))
  }, [])

const addNotification = useCallback((notification: Notification) => {
    setState((prev) => ({
      ...prev,
      notifications: [notification, ...prev.notifications],
    }))
  }, [])

const markNotificationRead = useCallback((id: string) => {
    setState((prev) => ({
      ...prev,
      notifications: prev.notifications.map((n) => (n.id === id ? { ...n, read: true } : n)),
    }))
  }, [])

const markAllNotificationsRead = useCallback((userId: string) => {
    setState((prev) => ({
      ...prev,
      notifications: prev.notifications.map((n) => (n.userId === userId ? { ...n, read: true } : n)),
    }))
  }, [])

const addOffer = useCallback((offer: JobOffer) => {
    setState((prev) => ({
      ...prev,
      offers: [offer, ...prev.offers],
    }))
  }, [])

const updateOffer = useCallback((id: string, updates: Partial<JobOffer>) => {
    setState((prev) => ({
      ...prev,
      offers: prev.offers.map((o) => (o.id === id ? { ...o, ...updates } : o)),
    }))
  }, [])

// Reseed — reload from DB
  const reseed = useCallback(() => {
    loadCastings()
  }, [])

const value: StoreContextValue = {
    ...state,
    getCastings,
    getActiveCastings,
    getCastingsForCreator,
    getCasting,
    getApplications,
    getApplicationsForModel,
    getApplicationsForCasting,
    getUsers,
    getUser,
    getNotificationsForUser,
    getUnreadNotificationsCount,
    getOffersForModel,
    getPendingOffersForModel,
    addCasting,
    updateCasting,
    addApplication,
    updateApplication,
    addNotification,
    markNotificationRead,
    markAllNotificationsRead,
    addOffer,
    updateOffer,
    reseed,
    refreshCastings,
  }

return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>
}

export function useStore() {
  const context = useContext(StoreContext)
  if (!context) {
    throw new Error("useStore must be used within a StoreProvider")
  }
  return context
}
[V0_FILE]typescript:file="lib/test-credentials.ts"
/**
 * Single source of truth for seeded test accounts.
 * Password for ALL accounts below is TEST_PASSWORD.
 * Use these exactly (copy-paste) to log in after running the seed.
 */

export const TEST_PASSWORD = "password123"

export const TEST_ACCOUNTS = {
  brands: [
    { email: "dior@luxlane.demo", username: "dior", name: "Maison Dior" },
    { email: "gucci@luxlane.demo", username: "gucci", name: "Gucci" },
    { email: "chanel@luxlane.demo", username: "chanel", name: "Chanel" },
    { email: "prada@luxlane.demo", username: "prada", name: "Prada" },
    { email: "burberry@luxlane.demo", username: "burberry", name: "Burberry" },
    { email: "versace@luxlane.demo", username: "versace", name: "Versace" },
    { email: "balenciaga@luxlane.demo", username: "balenciaga", name: "Balenciaga" },
    { email: "fendi@luxlane.demo", username: "fendi", name: "Fendi" },
    { email: "hermes@luxlane.demo", username: "hermes", name: "Hermès" },
    { email: "louisvuitton@luxlane.demo", username: "louisvuitton", name: "Louis Vuitton" },
  ],
  agencies: [
    { email: "elite@luxlane.demo", username: "eliteagency", name: "Elite Model Management" },
    { email: "next@luxlane.demo", username: "nextagency", name: "Next Models" },
    { email: "img@luxlane.demo", username: "imgmodels", name: "IMG Models" },
    { email: "wilhelmina@luxlane.demo", username: "wilhelmina", name: "Wilhelmina Models" },
    { email: "ford@luxlane.demo", username: "fordmodels", name: "Ford Models" },
    { email: "storm@luxlane.demo", username: "stormmodels", name: "Storm Model Management" },
    { email: "women@luxlane.demo", username: "womenmodels", name: "Women Management" },
    { email: "select@luxlane.demo", username: "selectmodel", name: "Select Model Management" },
    { email: "marilyn@luxlane.demo", username: "marilynagency", name: "Marilyn Agency" },
    { email: "dna@luxlane.demo", username: "dnamodels", name: "DNA Model Management" },
  ],
  models: [
    { email: "sofia@luxlane.demo", username: "sofia", name: "Sofia Laurent" },
    { email: "lina@luxlane.demo", username: "lina", name: "Lina Zhang" },
    { email: "maya@luxlane.demo", username: "maya", name: "Maya Williams" },
    { email: "emma@luxlane.demo", username: "emma", name: "Emma Lindberg" },
    { email: "chiara@luxlane.demo", username: "chiara", name: "Chiara Rossi" },
    { email: "zoe@luxlane.demo", username: "zoe", name: "Zoe Dubois" },
    { email: "anna@luxlane.demo", username: "anna", name: "Anna Petrova" },
    { email: "lea@luxlane.demo", username: "lea", name: "Lea Moreau" },
    { email: "nina@luxlane.demo", username: "nina", name: "Nina Okafor" },
    { email: "jade@luxlane.demo", username: "jade", name: "Jade Kim" },
  ],
  clients: [
    { email: "alexanderchen@luxlane.demo", username: "alexanderchen", name: "Alexander Chen" },
    { email: "stevenmeisel@luxlane.demo", username: "stevenmeisel", name: "Steven Meisel" },
    { email: "sarahwilson@luxlane.demo", username: "sarahwilson", name: "Sarah Wilson" },
    { email: "marcjacobs@luxlane.demo", username: "marcjacobs", name: "Marc Jacobs Studio" },
    { email: "indiarussell@luxlane.demo", username: "indiarussell", name: "India Russell" },
    { email: "colinjones@luxlane.demo", username: "colinjones", name: "Colin Jones" },
    { email: "emilythompson@luxlane.demo", username: "emilythompson", name: "Emily Thompson" },
    { email: "davidkim@luxlane.demo", username: "davidkim", name: "David Kim" },
    { email: "rachelmiller@luxlane.demo", username: "rachelmiller", name: "Rachel Miller" },
    { email: "jamesbrown@luxlane.demo", username: "jamesbrown", name: "James Brown" },
  ],
} as const

/** Example login (use in UI/docs): sofia@luxlane.demo / password123 */
export const EXAMPLE_LOGIN = {
  email: "sofia@luxlane.demo",
  password: TEST_PASSWORD,
} as const
[V0_FILE]typescriptreact:file="lib/theme-context.tsx"
"use client"

import { createContext, useContext, useEffect, useState, type ReactNode } from "react"

type Theme = "light" | "dark" | "system"

interface ThemeContextType {
  theme: Theme
  setTheme: (theme: Theme) => void
  resolvedTheme: "light" | "dark"
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>("system")
  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("dark")

useEffect(() => {
    const stored = localStorage.getItem("luxlane-theme") as Theme | null
    if (stored) {
      setTheme(stored)
    }
  }, [])

useEffect(() => {
    const root = document.documentElement

const applyTheme = (t: "light" | "dark") => {
      root.classList.remove("light", "dark")
      root.classList.add(t)
      setResolvedTheme(t)
    }

if (theme === "system") {
      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
      applyTheme(mediaQuery.matches ? "dark" : "light")

const handler = (e: MediaQueryListEvent) => applyTheme(e.matches ? "dark" : "light")
      mediaQuery.addEventListener("change", handler)
      return () => mediaQuery.removeEventListener("change", handler)
    } else {
      applyTheme(theme)
    }
  }, [theme])

const handleSetTheme = (newTheme: Theme) => {
    setTheme(newTheme)
    localStorage.setItem("luxlane-theme", newTheme)
  }

return (
    <ThemeContext.Provider value={{ theme, setTheme: handleSetTheme, resolvedTheme }}>{children}</ThemeContext.Provider>
  )
}

export function useTheme() {
  const context = useContext(ThemeContext)
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider")
  }
  return context
}
[V0_FILE]typescript:file="lib/types.ts"
export type UserRole = "model" | "brand" | "agency" | "client"

export type VerificationLevel = "unverified" | "agency_verified" | "luxlane_verified"

export interface User {
  id: string
  email: string
  name: string
  username: string
  role: UserRole
  verified: boolean
  verificationLevel: VerificationLevel
  avatar: string
  bio: string
  location: string
  followers: number
  following: number
  isFollowing?: boolean
  createdAt: Date
  // Model-specific
  measurements?: ModelMeasurements
  portfolio?: string[]
  polaroids?: string[]
  availability?: AvailabilitySlot[]
  availabilityStatus?: "available" | "hold" | "booked"
  experience?: string[]
  languages?: string[]
  skinTone?: string
  tags?: string[] // Added tags for matching
  digitalTwin?: DigitalTwin
  /** Profile posts (from API when viewing another user) */
  posts?: Array<{ id: string; imageUrl: string; caption?: string | null; createdAt: string; likesCount?: number; commentsCount?: number }>
  metrics?: ModelMetrics
  agencyId?: string
  // Brand/Agency/Client specific
  companyName?: string
  website?: string
  roster?: string[]
  industry?: string
  socialLinks?: { instagram?: string; tiktok?: string }
}

export interface ModelMeasurements {
  height?: string
  bust?: string
  waist?: string
  hips?: string
  shoeSize?: string
  dressSize?: string
  hairColor?: string
  eyeColor?: string
  heightCm?: number
}

export interface AvailabilitySlot {
  date: Date
  available: boolean
}

export interface DigitalTwin {
  id: string
  modelId: string
  status: "none" | "pending" | "processing" | "ready" | "complete" | "failed"
  createdAt: Date
  updatedAt: Date
  headScan?: string
  fullBodyScan?: string
  previewUrl?: string
  inputImages?: string[]
  attributes?: DigitalTwinAttributes
}

export interface FacialAnalysis {
  symmetryScore: number
  goldenRatioScore: number
  facialThirds: { upper: number; middle: number; lower: number }
  jawAngle: number
  eyeSpacing: "close" | "ideal" | "wide"
  noseBridgeRatio: number
  lipToFaceRatio: number
  overallHarmony: number
}

export interface DigitalTwinAttributes {
  faceShape: string
  skinTone: string
  eyeColor: string
  jawline: string
  cheekbones: string
  noseType: string
  lipShape: string
  preciseHeight: string
  preciseChest: string
  preciseWaist: string
  preciseHips: string
  shoulderWidth: string
  armLength: string
  legLength: string
  analysis?: FacialAnalysis
}

export interface ModelMetrics {
  luxlaneScore: number
  rank: number
  rankTier: "top10" | "top50" | "top100" | "top500" | "rising" | "new"
  trend: "up" | "down" | "stable"
  trendChange: number
  components: {
    bookings: number
    shortlists: number
    profileViews: number
    responseRate: number
    reliability: number
  }
  achievements: string[]
  lastUpdated: Date
}

export interface Casting {
  id: string
  creatorId: string
  creator: User
  title: string
  type: CastingType
  description: string
  location: string
  dates: {
    start: Date
    end: Date
  }
  pay: {
    amount: number
    currency: string
    type: "hourly" | "flat" | "tbd"
  }
  requirements: ModelRequirements
  deadline: Date
  status: CastingStatus
  applicationsCount: number
  shortlistedCount: number
  createdAt: Date
  images?: string[]
  settings?: CastingSettings
  roomId?: string
}

export interface CastingSettings {
  verifiedOnly: boolean
  maxSubmissionsPerAgency: number
  requireDigitalTwin: boolean
}

export interface ModelRequirements {
  gender?: "male" | "female" | "non-binary" | "any"
  ageRange?: { min: number; max: number }
  heightRange?: { min: string; max: string }
  heightRangeCm?: { min: number; max: number } // Added for matching
  experience?: string[]
  look?: string[]
  tags?: string[] // Added for matching
  other?: string
}

export interface CastingApplication {
  id: string
  castingId: string
  casting?: Casting
  modelId: string
  model: User
  agencyId?: string // Added for agency submissions
  status: ApplicationStatus
  message?: string
  portfolioSelection?: string[] // Added for apply flow
  submittedAt: Date
  updatedAt: Date
}

export interface FitScore {
  total: number
  breakdown: {
    physical: number
    experience: number
    reliability: number
    brandAffinity: number
    momentum: number
  }
}

export interface ModelMatch {
  model: User
  fitScore: FitScore
}

export type CastingRoomStatus = "draft" | "active" | "live" | "completed"

export interface CastingRoom {
  id: string
  castingId: string
  casting: Casting
  status: CastingRoomStatus
  members: User[]
  createdAt: Date
  updatedAt: Date
}

export interface RoomEvent {
  id: string
  roomId: string
  type: "created" | "submission" | "shortlisted" | "offer_sent" | "offer_accepted" | "member_added" | "message"
  userId: string
  user: User
  targetUserId?: string
  targetUser?: User
  message?: string
  createdAt: Date
}

export interface RoomFile {
  id: string
  roomId: string
  name: string
  type: "moodboard" | "callsheet" | "contract" | "other"
  url: string
  uploadedBy: User
  createdAt: Date
}

export interface RoomScheduleItem {
  id: string
  roomId: string
  title: string
  date: Date
  time: string
  location?: string
  notes?: string
}

// Message system
export interface Message {
  id: string
  conversationId: string
  senderId: string
  content: string
  type: "text" | "casting_invite" | "offer" | "contract"
  metadata?: {
    castingId?: string
    offerId?: string
  }
  read: boolean
  createdAt: Date
}

export interface Conversation {
  id: string
  participants: User[]
  lastMessage: Message
  unreadCount: number
  updatedAt: Date
  type: "direct" | "casting" | "booking"
}

export interface Notification {
  id: string
  userId: string
  type: "casting_invite" | "offer" | "shortlisted" | "accepted" | "message" | "follow" | "room_update"
  title: string
  message: string
  read: boolean
  actionUrl?: string
  metadata?: {
    castingId?: string
    roomId?: string
    userId?: string
    relatedId?: string
    relatedType?: string
    [key: string]: unknown
  }
  createdAt: Date
}

// Job offer system
export interface JobOffer {
  id: string
  castingId?: string
  casting?: Casting
  senderId: string
  sender: User
  modelId: string
  model: User
  title: string
  description: string
  dates: {
    start: Date
    end: Date
  }
  pay: {
    amount: number
    currency: string
    type: "hourly" | "flat"
  }
  location: string
  status: "pending" | "accepted" | "declined" | "expired"
  expiresAt: Date
  createdAt: Date
}

export interface Post {
  id: string
  userId: string
  user: User
  type: "photo" | "video" | "carousel"
  media: string[]
  caption: string
  likes: number
  comments: number
  bookmarked: boolean
  liked: boolean
  createdAt: Date
  tags?: string[]
}

export interface UserLimits {
  userId: string
  weeklyApplications: number
  weeklyApplicationsMax: number
  weekStartDate: Date
  castingSubmissions: Record<string, number> // castingId -> count
}
[V0_FILE]typescript:file="lib/upload.ts"
/**
 * Simple file upload — posts directly to /api/media/upload
 * Returns the public URL on success, null on failure.
 */
export async function uploadFile(file: File, type: string = "portfolio"): Promise<string | null> {
  try {
    const formData = new FormData()
    formData.append("file", file)
    formData.append("type", type)

const res = await fetch("/api/media/upload", {
      method: "POST",
      credentials: "include",
      body: formData,
    })

if (!res.ok) return null
    const data = await res.json()
    return data.url || null
  } catch (error) {
    console.error("Upload failed:", error)
    return null
  }
}

export async function uploadAvatar(file: File): Promise<string | null> {
  return uploadFile(file, "avatar")
}

export async function uploadPortfolioImage(file: File): Promise<string | null> {
  return uploadFile(file, "portfolio")
}

export async function uploadPostImage(file: File): Promise<string | null> {
  return uploadFile(file, "post")
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="lib/validations.ts"
import { z } from "zod"

// Auth validations
export const signupSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(8, "Password must be at least 8 characters"),
  role: z.enum(["model", "brand", "agency", "client"]),
  username: z
    .string()
    .min(3, "Username must be at least 3 characters")
    .max(30, "Username must be at most 30 characters")
    .regex(/^[a-zA-Z0-9_]+$/, "Username can only contain letters, numbers, and underscores"),
  displayName: z.string().min(1, "Display name is required").max(100),
})

export const loginSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(1, "Password is required"),
})

// AvailabilityStatus enum
export const availabilityStatusEnum = z.enum(["AVAILABLE", "HOLD", "BOOKED"])
export type AvailabilityStatus = z.infer<typeof availabilityStatusEnum>

// Profile validations
export const updateProfileSchema = z.object({
  displayName: z.string().min(1).max(40).optional(),
  bio: z.string().max(160).optional(),
  locationCity: z.string().max(100).optional(),
  avatarUrl: z.string().url().optional(),
})

export const updateModelProfileSchema = z.object({
  heightCm: z.number().int().min(120).max(220).optional(),
  bustCm: z.number().int().min(50).max(200).optional(),
  waistCm: z.number().int().min(40).max(150).optional(),
  hipsCm: z.number().int().min(50).max(200).optional(),
  shoeSize: z.string().max(10).optional(),
  hair: z.string().max(50).optional(),
  eyes: z.string().max(50).optional(),
  languages: z.array(z.string()).optional(),
  availability: availabilityStatusEnum.optional(),
  details: z
    .object({
      dressSize: z.string().max(20).optional(),
      skinTone: z.string().max(50).optional(),
      experience: z.array(z.string().max(100)).optional(),
    })
    .optional(),
  measurements: z.record(z.unknown()).optional(), // JSON for additional measurements (legacy)
})

// Onboarding validations
export const onboardingCompleteSchema = z.object({
  displayName: z.string().min(1).max(100),
  bio: z.string().max(500).optional(),
  locationCity: z.string().max(100).optional(),
  avatarUrl: z.string().url().optional(),
  // Model-specific
  heightCm: z.number().int().min(100).max(250).optional(),
  bustCm: z.number().int().min(50).max(200).optional(),
  waistCm: z.number().int().min(40).max(150).optional(),
  hipsCm: z.number().int().min(50).max(200).optional(),
  shoeSize: z.string().max(10).optional(),
  hair: z.string().max(50).optional(),
  eyes: z.string().max(50).optional(),
  // Brand/Agency
  companyName: z.string().max(200).optional(),
  website: z.string().url().optional(),
})

// Casting validations
export const createCastingSchema = z.object({
  title: z.string().min(1, "Title is required").max(200),
  type: z.enum(["RUNWAY", "CAMPAIGN", "EDITORIAL", "EVENT", "OTHER"]),
  description: z.string().max(5000).optional(),
  location: z.string().max(200).optional(),
  startDate: z.string().datetime().optional(),
  endDate: z.string().datetime().optional(),
  payMin: z.number().int().min(0).optional(),
  payMax: z.number().int().min(0).optional(),
  deadline: z.string().datetime().optional(),
  verifiedOnly: z.boolean().optional(),
  requireDigitalTwin: z.boolean().optional(),
  maxSubmissionsPerAgency: z.number().int().min(1).max(100).optional(),
  requirements: z
    .object({
      minHeightCm: z.number().int().min(100).max(250).optional(),
      maxHeightCm: z.number().int().min(100).max(250).optional(),
      tags: z.array(z.string()).optional(),
      notes: z.string().max(1000).optional(),
    })
    .optional(),
})

export const updateCastingSchema = createCastingSchema.partial()

// Submission validations
export const applyToCastingSchema = z.object({
  note: z.string().max(1000).optional(),
  portfolioUrls: z.array(z.string().url()).max(10).optional(),
})

export const submitModelsToCastingSchema = z.object({
  modelIds: z.array(z.string().uuid()).min(1).max(50),
  note: z.string().max(1000).optional(),
})

export const updateSubmissionStatusSchema = z.object({
  status: z.enum(["SHORTLISTED", "OFFERED", "REJECTED"]),
  note: z.string().max(1000).optional(),
})

// Message validations
export const sendMessageSchema = z.object({
  body: z.string().min(1, "Message cannot be empty").max(5000),
  attachmentUrl: z.string().url().optional(),
})

// Media validations
export const mediaPresignSchema = z.object({
  type: z.enum(["AVATAR", "PORTFOLIO", "POLAROID", "DOCUMENT", "TWIN_INPUT", "TWIN_OUTPUT"]),
  filename: z.string().min(1).max(255),
  contentType: z.string().regex(/^(image|video|application)\/.+$/),
})

export const mediaConfirmSchema = z.object({
  url: z.string().min(1, "URL is required"),
  type: z.enum(["AVATAR", "PORTFOLIO", "POLAROID", "DOCUMENT", "TWIN_INPUT", "TWIN_OUTPUT"]),
  meta: z.record(z.unknown()).optional(),
})

// Settings validations (maps to UserSettings: pushNotifs, emailNotifs, darkMode, privacyMode)
export const updateSettingsSchema = z.object({
  darkMode: z.boolean().optional(),
  pushNotifs: z.boolean().optional(),
  emailNotifs: z.boolean().optional(),
  privacyMode: z.enum(["public", "verified_only", "private"]).optional(),
  notifications: z
    .object({
      email: z.boolean().optional(),
      push: z.boolean().optional(),
      castingInvites: z.boolean().optional(),
      messages: z.boolean().optional(),
      offers: z.boolean().optional(),
    })
    .optional(),
  privacy: z
    .object({
      profileVisibility: z.enum(["public", "verified_only", "private"]).optional(),
      showMeasurements: z.boolean().optional(),
      showLocation: z.boolean().optional(),
    })
    .optional(),
})

// Digital Twin validations
export const startDigitalTwinSchema = z.object({
  inputType: z.enum(["photos", "video", "lidar"]).optional(),
})

export const twinStatusEnum = z.enum(["NONE", "PENDING", "PROCESSING", "READY", "FAILED"])
export type TwinStatus = z.infer<typeof twinStatusEnum>

export const uploadCompleteSchema = z.object({
  inputUrls: z.array(z.string().url()).min(1).max(20),
})

// Helper function to validate request body
export async function validateBody<T>(
  request: Request,
  schema: z.ZodSchema<T>,
): Promise<{ success: true; data: T } | { success: false; error: string }> {
  try {
    const body = await request.json()
    const result = schema.safeParse(body)

if (!result.success) {
      const errors = result.error.errors.map((e) => `${e.path.join(".")}: ${e.message}`).join(", ")
      return { success: false, error: errors }
    }

return { success: true, data: result.data }
  } catch {
    return { success: false, error: "Invalid JSON body" }
  }
}

// Helper function to validate query params
export function validateQuery<T>(
  searchParams: URLSearchParams,
  schema: z.ZodSchema<T>,
): { success: true; data: T } | { success: false; error: string } {
  const params: Record<string, string> = {}
  searchParams.forEach((value, key) => {
    params[key] = value
  })

const result = schema.safeParse(params)

if (!result.success) {
    const errors = result.error.errors.map((e) => `${e.path.join(".")}: ${e.message}`).join(", ")
    return { success: false, error: errors }
  }

return { success: true, data: result.data }
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
 
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "prisma generate && next build",
    "postinstall": "prisma generate",
    "db:migrate": "prisma migrate dev",
    "db:push": "prisma db push",
    "db:reset": "prisma migrate reset --force",
    "db:seed": "prisma migrate deploy && prisma db seed",
    "db:seed:only": "prisma db seed",
    "dev": "next dev",
    "lint": "eslint .",
    "seed": "prisma generate && npx ts-node --compiler-options '{\"module\":\"CommonJS\"}' prisma/seed.ts",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/is-prop-valid": "latest",
    "@hookform/resolvers": "^3.10.0",
    "@neondatabase/serverless": "1.0.2",
    "@prisma/client": "^6.0.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@upstash/redis": "1.36.1",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "bcryptjs": "3.0.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "framer-motion": "12.26.2",
    "input-otp": "1.4.1",
    "jose": "6.1.3",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "swr": "2.3.8",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "13.0.0",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "dotenv": "^16.4.5",
    "postcss": "^8.5",
    "prisma": "^6.0.0",
    "tailwindcss": "^4.1.9",
    "ts-node": "^10.9.2",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  },
  "prisma": {
    "seed": "node scripts/run-seed.cjs"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]typescript:file="prisma.config.ts"
/**
 * Prisma 7+ uses this so the CLI finds the schema.
 * When this file exists, Prisma skips auto-loading .env, so we load it here.
 */
import dotenv from "dotenv"
import path from "path"

dotenv.config({ path: path.join(process.cwd(), ".env") })
dotenv.config({ path: path.join(process.cwd(), ".env.local") })

export default {
  schema: "prisma/schema.prisma",
}
[V0_FILE]sql:file="prisma/migrations/20260129175143_20250129_init/migration.sql"
-- CreateEnum
CREATE TYPE "Role" AS ENUM ('MODEL', 'AGENCY', 'BRAND', 'CLIENT', 'ADMIN');

-- CreateEnum
CREATE TYPE "VerificationLevel" AS ENUM ('UNVERIFIED', 'AGENCY_VERIFIED', 'LUXLANE_VERIFIED');

-- CreateEnum
CREATE TYPE "AvailabilityStatus" AS ENUM ('AVAILABLE', 'HOLD', 'BOOKED');

-- CreateEnum
CREATE TYPE "CastingStatus" AS ENUM ('DRAFT', 'ACTIVE', 'CLOSED');

-- CreateEnum
CREATE TYPE "CastingType" AS ENUM ('RUNWAY', 'CAMPAIGN', 'EDITORIAL', 'EVENT', 'OTHER');

-- CreateEnum
CREATE TYPE "SubmissionStatus" AS ENUM ('APPLIED', 'SUBMITTED', 'SHORTLISTED', 'OFFERED', 'ACCEPTED', 'DECLINED', 'CONFIRMED', 'REJECTED');

-- CreateEnum
CREATE TYPE "NotificationType" AS ENUM ('INVITE', 'OFFER', 'SHORTLISTED', 'CONFIRMED', 'SYSTEM');

-- CreateEnum
CREATE TYPE "MediaType" AS ENUM ('AVATAR', 'PORTFOLIO', 'POLAROID', 'DOCUMENT', 'TWIN_INPUT', 'TWIN_OUTPUT');

-- CreateEnum
CREATE TYPE "TwinStatus" AS ENUM ('NONE', 'PENDING', 'PROCESSING', 'READY', 'FAILED');

-- CreateTable
CREATE TABLE "users" (
    "id" TEXT NOT NULL,
    "email" TEXT NOT NULL,
    "username" TEXT NOT NULL,
    "passwordHash" TEXT NOT NULL,
    "role" "Role" NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "users_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "profiles" (
    "userId" TEXT NOT NULL,
    "displayName" TEXT NOT NULL,
    "bio" TEXT,
    "location" TEXT,
    "height" TEXT,
    "hair" TEXT,
    "eyes" TEXT,
    "experience" TEXT,
    "verificationStatus" "VerificationLevel" NOT NULL DEFAULT 'UNVERIFIED',
    "score" INTEGER NOT NULL DEFAULT 0,
    "avatarUrl" TEXT,
    "coverUrl" TEXT,
    "updatedAt" TIMESTAMP(3) NOT NULL,

CONSTRAINT "profiles_pkey" PRIMARY KEY ("userId")
);

-- CreateTable
CREATE TABLE "refresh_tokens" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "tokenHash" TEXT NOT NULL,
    "revoked" BOOLEAN NOT NULL DEFAULT false,
    "expiresAt" TIMESTAMP(3) NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "refresh_tokens_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "model_profiles" (
    "userId" TEXT NOT NULL,
    "heightCm" INTEGER,
    "bustCm" INTEGER,
    "waistCm" INTEGER,
    "hipsCm" INTEGER,
    "shoeSize" TEXT,
    "hair" TEXT,
    "eyes" TEXT,
    "languages" TEXT[],
    "availability" "AvailabilityStatus" NOT NULL DEFAULT 'AVAILABLE',
    "agencyId" TEXT,
    "verificationLevel" "VerificationLevel" NOT NULL DEFAULT 'UNVERIFIED',
    "luxlaneScore" INTEGER NOT NULL DEFAULT 0,

CONSTRAINT "model_profiles_pkey" PRIMARY KEY ("userId")
);

-- CreateTable
CREATE TABLE "agency_profiles" (
    "userId" TEXT NOT NULL,
    "agencyName" TEXT NOT NULL,
    "website" TEXT,
    "verified" BOOLEAN NOT NULL DEFAULT false,

CONSTRAINT "agency_profiles_pkey" PRIMARY KEY ("userId")
);

-- CreateTable
CREATE TABLE "brand_profiles" (
    "userId" TEXT NOT NULL,
    "brandName" TEXT NOT NULL,
    "website" TEXT,
    "verified" BOOLEAN NOT NULL DEFAULT false,

CONSTRAINT "brand_profiles_pkey" PRIMARY KEY ("userId")
);

-- CreateTable
CREATE TABLE "follows" (
    "followerId" TEXT NOT NULL,
    "followingId" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "follows_pkey" PRIMARY KEY ("followerId","followingId")
);

-- CreateTable
CREATE TABLE "castings" (
    "id" TEXT NOT NULL,
    "createdBy" TEXT NOT NULL,
    "title" TEXT NOT NULL,
    "type" "CastingType" NOT NULL,
    "description" TEXT,
    "location" TEXT,
    "startDate" TIMESTAMP(3),
    "endDate" TIMESTAMP(3),
    "payMin" INTEGER,
    "payMax" INTEGER,
    "deadline" TIMESTAMP(3),
    "status" "CastingStatus" NOT NULL DEFAULT 'DRAFT',
    "verifiedOnly" BOOLEAN NOT NULL DEFAULT false,
    "requireDigitalTwin" BOOLEAN NOT NULL DEFAULT false,
    "maxSubmissionsPerAgency" INTEGER,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,

CONSTRAINT "castings_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "casting_requirements" (
    "castingId" TEXT NOT NULL,
    "minHeightCm" INTEGER,
    "maxHeightCm" INTEGER,
    "tags" TEXT[],
    "notes" TEXT,

CONSTRAINT "casting_requirements_pkey" PRIMARY KEY ("castingId")
);

-- CreateTable
CREATE TABLE "submissions" (
    "id" TEXT NOT NULL,
    "castingId" TEXT NOT NULL,
    "modelId" TEXT NOT NULL,
    "submittedBy" TEXT NOT NULL,
    "status" "SubmissionStatus" NOT NULL DEFAULT 'APPLIED',
    "note" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,

CONSTRAINT "submissions_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "conversations" (
    "id" TEXT NOT NULL,
    "type" TEXT NOT NULL,
    "castingId" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "conversations_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "conversation_members" (
    "conversationId" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "joinedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "conversation_members_pkey" PRIMARY KEY ("conversationId","userId")
);

-- CreateTable
CREATE TABLE "messages" (
    "id" TEXT NOT NULL,
    "conversationId" TEXT NOT NULL,
    "senderId" TEXT NOT NULL,
    "body" TEXT NOT NULL,
    "attachmentUrl" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "messages_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "notifications" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "type" "NotificationType" NOT NULL,
    "payload" JSONB NOT NULL,
    "read" BOOLEAN NOT NULL DEFAULT false,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "notifications_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "media_assets" (
    "id" TEXT NOT NULL,
    "ownerId" TEXT NOT NULL,
    "type" "MediaType" NOT NULL,
    "url" TEXT NOT NULL,
    "meta" JSONB,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "media_assets_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "digital_twins" (
    "userId" TEXT NOT NULL,
    "status" "TwinStatus" NOT NULL DEFAULT 'NONE',
    "summary" JSONB,
    "previewUrl" TEXT,
    "updatedAt" TIMESTAMP(3) NOT NULL,

CONSTRAINT "digital_twins_pkey" PRIMARY KEY ("userId")
);

-- CreateTable
CREATE TABLE "user_settings" (
    "userId" TEXT NOT NULL,
    "pushNotifs" BOOLEAN NOT NULL DEFAULT true,
    "emailNotifs" BOOLEAN NOT NULL DEFAULT true,
    "darkMode" BOOLEAN NOT NULL DEFAULT true,
    "privacyMode" TEXT NOT NULL DEFAULT 'public',
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,

CONSTRAINT "user_settings_pkey" PRIMARY KEY ("userId")
);

-- CreateIndex
CREATE UNIQUE INDEX "users_email_key" ON "users"("email");

-- CreateIndex
CREATE UNIQUE INDEX "users_username_key" ON "users"("username");

-- CreateIndex
CREATE INDEX "refresh_tokens_userId_idx" ON "refresh_tokens"("userId");

-- CreateIndex
CREATE INDEX "follows_followingId_idx" ON "follows"("followingId");

-- CreateIndex
CREATE INDEX "castings_status_idx" ON "castings"("status");

-- CreateIndex
CREATE INDEX "castings_createdBy_idx" ON "castings"("createdBy");

-- CreateIndex
CREATE INDEX "submissions_castingId_status_idx" ON "submissions"("castingId", "status");

-- CreateIndex
CREATE INDEX "submissions_modelId_status_idx" ON "submissions"("modelId", "status");

-- CreateIndex
CREATE UNIQUE INDEX "submissions_castingId_modelId_key" ON "submissions"("castingId", "modelId");

-- CreateIndex
CREATE INDEX "conversation_members_userId_idx" ON "conversation_members"("userId");

-- CreateIndex
CREATE INDEX "messages_conversationId_createdAt_idx" ON "messages"("conversationId", "createdAt");

-- CreateIndex
CREATE INDEX "notifications_userId_read_createdAt_idx" ON "notifications"("userId", "read", "createdAt");

-- CreateIndex
CREATE INDEX "media_assets_ownerId_type_idx" ON "media_assets"("ownerId", "type");

-- AddForeignKey
ALTER TABLE "profiles" ADD CONSTRAINT "profiles_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "refresh_tokens" ADD CONSTRAINT "refresh_tokens_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "model_profiles" ADD CONSTRAINT "model_profiles_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "agency_profiles" ADD CONSTRAINT "agency_profiles_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "brand_profiles" ADD CONSTRAINT "brand_profiles_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "follows" ADD CONSTRAINT "follows_followerId_fkey" FOREIGN KEY ("followerId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "follows" ADD CONSTRAINT "follows_followingId_fkey" FOREIGN KEY ("followingId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "castings" ADD CONSTRAINT "castings_createdBy_fkey" FOREIGN KEY ("createdBy") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "casting_requirements" ADD CONSTRAINT "casting_requirements_castingId_fkey" FOREIGN KEY ("castingId") REFERENCES "castings"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "submissions" ADD CONSTRAINT "submissions_castingId_fkey" FOREIGN KEY ("castingId") REFERENCES "castings"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "submissions" ADD CONSTRAINT "submissions_modelId_fkey" FOREIGN KEY ("modelId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "conversations" ADD CONSTRAINT "conversations_castingId_fkey" FOREIGN KEY ("castingId") REFERENCES "castings"("id") ON DELETE SET NULL ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "conversation_members" ADD CONSTRAINT "conversation_members_conversationId_fkey" FOREIGN KEY ("conversationId") REFERENCES "conversations"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "conversation_members" ADD CONSTRAINT "conversation_members_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "messages" ADD CONSTRAINT "messages_conversationId_fkey" FOREIGN KEY ("conversationId") REFERENCES "conversations"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "messages" ADD CONSTRAINT "messages_senderId_fkey" FOREIGN KEY ("senderId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "notifications" ADD CONSTRAINT "notifications_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "media_assets" ADD CONSTRAINT "media_assets_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "digital_twins" ADD CONSTRAINT "digital_twins_userId_fkey" FOREIGN KEY ("userId") REFERENCES "model_profiles"("userId") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "user_settings" ADD CONSTRAINT "user_settings_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
[V0_FILE]sql:file="prisma/migrations/20260129210000_add_model_profile_details/migration.sql"
-- AlterTable
ALTER TABLE "model_profiles" ADD COLUMN IF NOT EXISTS "details" JSONB;
[V0_FILE]sql:file="prisma/migrations/20260129210500_add_posts_tables/migration.sql"
-- CreateTable
CREATE TABLE "posts" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "imageUrl" TEXT NOT NULL,
    "caption" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "posts_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "post_likes" (
    "userId" TEXT NOT NULL,
    "postId" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "post_likes_pkey" PRIMARY KEY ("userId","postId")
);

-- CreateTable
CREATE TABLE "post_saves" (
    "userId" TEXT NOT NULL,
    "postId" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "post_saves_pkey" PRIMARY KEY ("userId","postId")
);

-- CreateTable
CREATE TABLE "comments" (
    "id" TEXT NOT NULL,
    "postId" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "body" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "comments_pkey" PRIMARY KEY ("id")
);

-- CreateIndex
CREATE INDEX "posts_userId_idx" ON "posts"("userId");

-- CreateIndex
CREATE INDEX "post_likes_postId_idx" ON "post_likes"("postId");

-- CreateIndex
CREATE INDEX "post_saves_postId_idx" ON "post_saves"("postId");

-- CreateIndex
CREATE INDEX "comments_postId_idx" ON "comments"("postId");

-- AddForeignKey
ALTER TABLE "posts" ADD CONSTRAINT "posts_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "post_likes" ADD CONSTRAINT "post_likes_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "post_likes" ADD CONSTRAINT "post_likes_postId_fkey" FOREIGN KEY ("postId") REFERENCES "posts"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "post_saves" ADD CONSTRAINT "post_saves_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "post_saves" ADD CONSTRAINT "post_saves_postId_fkey" FOREIGN KEY ("postId") REFERENCES "posts"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "comments" ADD CONSTRAINT "comments_postId_fkey" FOREIGN KEY ("postId") REFERENCES "posts"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "comments" ADD CONSTRAINT "comments_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
[V0_FILE]sql:file="prisma/migrations/20260130120000_profile_snake_case/migration.sql"
-- Map profiles columns to snake_case for compatibility with DBs that use snake_case (e.g. Vercel Postgres)
-- Rename columns if they exist with camelCase (from initial migration)
DO $$
BEGIN
  IF EXISTS (SELECT 1 FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'profiles' AND column_name = 'userId') THEN
    ALTER TABLE "profiles" RENAME COLUMN "userId" TO "user_id";
  END IF;
  IF EXISTS (SELECT 1 FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'profiles' AND column_name = 'displayName') THEN
    ALTER TABLE "profiles" RENAME COLUMN "displayName" TO "display_name";
  END IF;
  IF EXISTS (SELECT 1 FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'profiles' AND column_name = 'verificationStatus') THEN
    ALTER TABLE "profiles" RENAME COLUMN "verificationStatus" TO "verification_status";
  END IF;
  IF EXISTS (SELECT 1 FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'profiles' AND column_name = 'avatarUrl') THEN
    ALTER TABLE "profiles" RENAME COLUMN "avatarUrl" TO "avatar_url";
  END IF;
  IF EXISTS (SELECT 1 FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'profiles' AND column_name = 'coverUrl') THEN
    ALTER TABLE "profiles" RENAME COLUMN "coverUrl" TO "cover_url";
  END IF;
  IF EXISTS (SELECT 1 FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'profiles' AND column_name = 'updatedAt') THEN
    ALTER TABLE "profiles" RENAME COLUMN "updatedAt" TO "updated_at";
    ALTER TABLE "profiles" ALTER COLUMN "updated_at" DROP NOT NULL;
  END IF;
END $$;
[V0_FILE]sql:file="prisma/migrations/20260320120000_add_client_profile/migration.sql"
-- CreateTable
CREATE TABLE "client_profiles" (
    "userId" TEXT NOT NULL,
    "clientName" TEXT NOT NULL,
    "website" TEXT,
    "industry" TEXT,
    "verified" BOOLEAN NOT NULL DEFAULT false,

CONSTRAINT "client_profiles_pkey" PRIMARY KEY ("userId")
);

-- AddForeignKey
ALTER TABLE "client_profiles" ADD CONSTRAINT "client_profiles_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
[V0_FILE]sql:file="prisma/migrations/20260320130000_add_agency_applications/migration.sql"
-- CreateTable
CREATE TABLE "agency_applications" (
    "id" TEXT NOT NULL,
    "modelId" TEXT NOT NULL,
    "agencyId" TEXT NOT NULL,
    "status" TEXT NOT NULL DEFAULT 'PENDING',
    "note" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" TIMESTAMP(3) NOT NULL,

CONSTRAINT "agency_applications_pkey" PRIMARY KEY ("id")
);

-- CreateIndex
CREATE INDEX "agency_applications_agencyId_status_idx" ON "agency_applications"("agencyId", "status");

-- CreateIndex
CREATE UNIQUE INDEX "agency_applications_modelId_agencyId_key" ON "agency_applications"("modelId", "agencyId");

-- AddForeignKey
ALTER TABLE "agency_applications" ADD CONSTRAINT "agency_applications_modelId_fkey" FOREIGN KEY ("modelId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "agency_applications" ADD CONSTRAINT "agency_applications_agencyId_fkey" FOREIGN KEY ("agencyId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
[V0_FILE]sql:file="prisma/migrations/20260320140000_add_availability_dates/migration.sql"
-- CreateTable
CREATE TABLE "availability_dates" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "date" TIMESTAMP(3) NOT NULL,
    "status" TEXT NOT NULL DEFAULT 'AVAILABLE',

CONSTRAINT "availability_dates_pkey" PRIMARY KEY ("id")
);

-- CreateIndex
CREATE INDEX "availability_dates_userId_idx" ON "availability_dates"("userId");

-- CreateIndex
CREATE UNIQUE INDEX "availability_dates_userId_date_key" ON "availability_dates"("userId", "date");

-- AddForeignKey
ALTER TABLE "availability_dates" ADD CONSTRAINT "availability_dates_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
[V0_FILE]sql:file="prisma/migrations/20260320150000_add_casting_room_models/migration.sql"
-- AlterTable: add status column to conversations
ALTER TABLE "conversations" ADD COLUMN "status" TEXT NOT NULL DEFAULT 'active';

-- CreateTable
CREATE TABLE "room_events" (
    "id" TEXT NOT NULL,
    "roomId" TEXT NOT NULL,
    "type" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "targetUserId" TEXT,
    "message" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "room_events_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "room_files" (
    "id" TEXT NOT NULL,
    "roomId" TEXT NOT NULL,
    "name" TEXT NOT NULL,
    "type" TEXT NOT NULL,
    "url" TEXT NOT NULL,
    "uploadedBy" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "room_files_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "room_schedule_items" (
    "id" TEXT NOT NULL,
    "roomId" TEXT NOT NULL,
    "title" TEXT NOT NULL,
    "date" TIMESTAMP(3) NOT NULL,
    "time" TEXT NOT NULL,
    "location" TEXT,
    "notes" TEXT,

CONSTRAINT "room_schedule_items_pkey" PRIMARY KEY ("id")
);

-- CreateIndex
CREATE INDEX "room_events_roomId_createdAt_idx" ON "room_events"("roomId", "createdAt");

-- CreateIndex
CREATE INDEX "room_files_roomId_idx" ON "room_files"("roomId");

-- CreateIndex
CREATE INDEX "room_schedule_items_roomId_idx" ON "room_schedule_items"("roomId");

-- AddForeignKey
ALTER TABLE "room_events" ADD CONSTRAINT "room_events_roomId_fkey" FOREIGN KEY ("roomId") REFERENCES "conversations"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "room_files" ADD CONSTRAINT "room_files_roomId_fkey" FOREIGN KEY ("roomId") REFERENCES "conversations"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "room_schedule_items" ADD CONSTRAINT "room_schedule_items_roomId_fkey" FOREIGN KEY ("roomId") REFERENCES "conversations"("id") ON DELETE CASCADE ON UPDATE CASCADE;
[V0_FILE]sql:file="prisma/migrations/20260320160000_phase2_block_report_saved_models_portfolio/migration.sql"
-- AlterTable: add sortOrder to media_assets
ALTER TABLE "media_assets" ADD COLUMN "sortOrder" INTEGER NOT NULL DEFAULT 0;

-- CreateTable
CREATE TABLE "blocks" (
    "blockerId" TEXT NOT NULL,
    "blockedId" TEXT NOT NULL,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "blocks_pkey" PRIMARY KEY ("blockerId","blockedId")
);

-- CreateTable
CREATE TABLE "reports" (
    "id" TEXT NOT NULL,
    "reporterId" TEXT NOT NULL,
    "targetId" TEXT NOT NULL,
    "reason" TEXT NOT NULL,
    "details" TEXT,
    "status" TEXT NOT NULL DEFAULT 'PENDING',
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "reports_pkey" PRIMARY KEY ("id")
);

-- CreateTable
CREATE TABLE "saved_models" (
    "userId" TEXT NOT NULL,
    "modelId" TEXT NOT NULL,
    "note" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "saved_models_pkey" PRIMARY KEY ("userId","modelId")
);

-- CreateIndex
CREATE INDEX "blocks_blockedId_idx" ON "blocks"("blockedId");

-- CreateIndex
CREATE INDEX "reports_targetId_status_idx" ON "reports"("targetId", "status");

-- CreateIndex
CREATE INDEX "saved_models_modelId_idx" ON "saved_models"("modelId");

-- AddForeignKey
ALTER TABLE "blocks" ADD CONSTRAINT "blocks_blockerId_fkey" FOREIGN KEY ("blockerId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "blocks" ADD CONSTRAINT "blocks_blockedId_fkey" FOREIGN KEY ("blockedId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "reports" ADD CONSTRAINT "reports_reporterId_fkey" FOREIGN KEY ("reporterId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "reports" ADD CONSTRAINT "reports_targetId_fkey" FOREIGN KEY ("targetId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "saved_models" ADD CONSTRAINT "saved_models_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- AddForeignKey
ALTER TABLE "saved_models" ADD CONSTRAINT "saved_models_modelId_fkey" FOREIGN KEY ("modelId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
[V0_FILE]sql:file="prisma/migrations/20260320170000_phase3_analytics_earnings_stories/migration.sql"
-- Phase 3: Analytics, Earnings, Stories/Highlights

-- Profile views (analytics)
CREATE TABLE "profile_views" (
    "id" TEXT NOT NULL,
    "profileId" TEXT NOT NULL,
    "viewerId" TEXT,
    "source" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "profile_views_pkey" PRIMARY KEY ("id")
);

CREATE INDEX "profile_views_profileId_createdAt_idx" ON "profile_views"("profileId", "createdAt");
CREATE INDEX "profile_views_viewerId_idx" ON "profile_views"("viewerId");

ALTER TABLE "profile_views" ADD CONSTRAINT "profile_views_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
ALTER TABLE "profile_views" ADD CONSTRAINT "profile_views_viewerId_fkey" FOREIGN KEY ("viewerId") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;

-- Casting views (analytics)
CREATE TABLE "casting_views" (
    "id" TEXT NOT NULL,
    "castingId" TEXT NOT NULL,
    "viewerId" TEXT,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "casting_views_pkey" PRIMARY KEY ("id")
);

CREATE INDEX "casting_views_castingId_createdAt_idx" ON "casting_views"("castingId", "createdAt");
CREATE INDEX "casting_views_viewerId_idx" ON "casting_views"("viewerId");

ALTER TABLE "casting_views" ADD CONSTRAINT "casting_views_castingId_fkey" FOREIGN KEY ("castingId") REFERENCES "castings"("id") ON DELETE CASCADE ON UPDATE CASCADE;
ALTER TABLE "casting_views" ADD CONSTRAINT "casting_views_viewerId_fkey" FOREIGN KEY ("viewerId") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;

-- Earnings
CREATE TABLE "earnings" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "castingId" TEXT,
    "amount" INTEGER NOT NULL,
    "currency" TEXT NOT NULL DEFAULT 'EUR',
    "description" TEXT,
    "status" TEXT NOT NULL DEFAULT 'PENDING',
    "paidAt" TIMESTAMP(3),
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "earnings_pkey" PRIMARY KEY ("id")
);

CREATE INDEX "earnings_userId_status_idx" ON "earnings"("userId", "status");
CREATE INDEX "earnings_castingId_idx" ON "earnings"("castingId");

ALTER TABLE "earnings" ADD CONSTRAINT "earnings_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
ALTER TABLE "earnings" ADD CONSTRAINT "earnings_castingId_fkey" FOREIGN KEY ("castingId") REFERENCES "castings"("id") ON DELETE SET NULL ON UPDATE CASCADE;

-- Stories
CREATE TABLE "stories" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "mediaUrl" TEXT NOT NULL,
    "mediaType" TEXT NOT NULL DEFAULT 'image',
    "caption" TEXT,
    "expiresAt" TIMESTAMP(3) NOT NULL,
    "viewCount" INTEGER NOT NULL DEFAULT 0,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "highlightId" TEXT,

CONSTRAINT "stories_pkey" PRIMARY KEY ("id")
);

CREATE INDEX "stories_userId_createdAt_idx" ON "stories"("userId", "createdAt");
CREATE INDEX "stories_expiresAt_idx" ON "stories"("expiresAt");

ALTER TABLE "stories" ADD CONSTRAINT "stories_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- Story views
CREATE TABLE "story_views" (
    "storyId" TEXT NOT NULL,
    "viewerId" TEXT NOT NULL,
    "viewedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "story_views_pkey" PRIMARY KEY ("storyId","viewerId")
);

ALTER TABLE "story_views" ADD CONSTRAINT "story_views_storyId_fkey" FOREIGN KEY ("storyId") REFERENCES "stories"("id") ON DELETE CASCADE ON UPDATE CASCADE;
ALTER TABLE "story_views" ADD CONSTRAINT "story_views_viewerId_fkey" FOREIGN KEY ("viewerId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- Story highlights
CREATE TABLE "story_highlights" (
    "id" TEXT NOT NULL,
    "userId" TEXT NOT NULL,
    "title" TEXT NOT NULL,
    "coverUrl" TEXT,
    "sortOrder" INTEGER NOT NULL DEFAULT 0,
    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,

CONSTRAINT "story_highlights_pkey" PRIMARY KEY ("id")
);

CREATE INDEX "story_highlights_userId_sortOrder_idx" ON "story_highlights"("userId", "sortOrder");

ALTER TABLE "story_highlights" ADD CONSTRAINT "story_highlights_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

-- Add highlight FK to stories
ALTER TABLE "stories" ADD CONSTRAINT "stories_highlightId_fkey" FOREIGN KEY ("highlightId") REFERENCES "story_highlights"("id") ON DELETE SET NULL ON UPDATE CASCADE;
[V0_FILE]sql:file="prisma/migrations/20260321100000_commission_direct_booking/migration.sql"
-- Add commission fields to agency profiles
ALTER TABLE agency_profiles ADD COLUMN commission_rate DECIMAL(5,2) DEFAULT 20.00;

-- Add direct booking table
CREATE TABLE direct_bookings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  brand_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  model_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  description TEXT,
  location TEXT,
  start_date TIMESTAMP,
  end_date TIMESTAMP,
  pay_amount INT, -- cents
  pay_currency TEXT DEFAULT 'EUR',
  status TEXT DEFAULT 'PENDING', -- PENDING, ACCEPTED, DECLINED, CONFIRMED, COMPLETED, CANCELLED
  created_at TIMESTAMP DEFAULT now(),
  updated_at TIMESTAMP DEFAULT now()
);

CREATE INDEX idx_direct_bookings_brand ON direct_bookings(brand_id);
CREATE INDEX idx_direct_bookings_model ON direct_bookings(model_id);

-- Add social links to profiles table
ALTER TABLE profiles ADD COLUMN social_links JSONB DEFAULT '{}';

-- Add budget field to castings
ALTER TABLE castings ADD COLUMN budget INT; -- total budget in cents
[V0_FILE]sql:file="prisma/migrations/20260324100000_phase2_schema_upgrades/migration.sql"
-- Phase 2 Schema Upgrades

-- 1. ModelAgency junction table (multi-agency support with contract status)
CREATE TABLE IF NOT EXISTS "model_agencies" (
  "id" TEXT NOT NULL DEFAULT gen_random_uuid(),
  "model_id" TEXT NOT NULL,
  "agency_id" TEXT NOT NULL,
  "status" TEXT NOT NULL DEFAULT 'PENDING',
  "contract_status" TEXT NOT NULL DEFAULT 'NONE',
  "joined_at" TIMESTAMP(3),
  "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  CONSTRAINT "model_agencies_pkey" PRIMARY KEY ("id"),
  CONSTRAINT "model_agencies_model_id_fkey" FOREIGN KEY ("model_id") REFERENCES "users"("id") ON DELETE CASCADE,
  CONSTRAINT "model_agencies_agency_id_fkey" FOREIGN KEY ("agency_id") REFERENCES "users"("id") ON DELETE CASCADE
);
CREATE UNIQUE INDEX IF NOT EXISTS "model_agencies_model_id_agency_id_key" ON "model_agencies"("model_id", "agency_id");
CREATE INDEX IF NOT EXISTS "model_agencies_agency_id_status_idx" ON "model_agencies"("agency_id", "status");

-- 2. isDemo + authProvider on User
ALTER TABLE "users" ADD COLUMN IF NOT EXISTS "is_demo" BOOLEAN NOT NULL DEFAULT false;
ALTER TABLE "users" ADD COLUMN IF NOT EXISTS "auth_provider" TEXT NOT NULL DEFAULT 'credentials';

-- 3. parentCommentId on Comment (threaded replies)
ALTER TABLE "comments" ADD COLUMN IF NOT EXISTS "parent_id" TEXT;
ALTER TABLE "comments" ADD CONSTRAINT "comments_parent_id_fkey" FOREIGN KEY ("parent_id") REFERENCES "comments"("id") ON DELETE SET NULL;

-- 4. Post: mediaUrls JSON array + mediaType (keep imageUrl for backward compat)
ALTER TABLE "posts" ADD COLUMN IF NOT EXISTS "media_urls" JSONB DEFAULT '[]';
ALTER TABLE "posts" ADD COLUMN IF NOT EXISTS "media_type" TEXT DEFAULT 'image';
[V0_FILE]sql:file="prisma/migrations/20260324110000_phase5_industry_features/migration.sql"
-- Phase 5: Industry Features

-- Work History / Credits
CREATE TABLE IF NOT EXISTS "work_credits" (
  "id" TEXT NOT NULL DEFAULT gen_random_uuid(),
  "model_id" TEXT NOT NULL,
  "brand_name" TEXT NOT NULL,
  "project_title" TEXT NOT NULL,
  "role" TEXT,
  "photographer" TEXT,
  "year" INT,
  "type" TEXT NOT NULL DEFAULT 'campaign',
  "confirmed_by" TEXT,
  "confirmed_at" TIMESTAMP(3),
  "image_url" TEXT,
  "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  CONSTRAINT "work_credits_pkey" PRIMARY KEY ("id"),
  CONSTRAINT "work_credits_model_id_fkey" FOREIGN KEY ("model_id") REFERENCES "users"("id") ON DELETE CASCADE,
  CONSTRAINT "work_credits_confirmed_by_fkey" FOREIGN KEY ("confirmed_by") REFERENCES "users"("id") ON DELETE SET NULL
);
CREATE INDEX IF NOT EXISTS "work_credits_model_id_idx" ON "work_credits"("model_id");

-- Endorsements
CREATE TABLE IF NOT EXISTS "endorsements" (
  "id" TEXT NOT NULL DEFAULT gen_random_uuid(),
  "model_id" TEXT NOT NULL,
  "endorser_id" TEXT NOT NULL,
  "text" TEXT NOT NULL,
  "tags" TEXT[] DEFAULT '{}',
  "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  CONSTRAINT "endorsements_pkey" PRIMARY KEY ("id"),
  CONSTRAINT "endorsements_model_id_fkey" FOREIGN KEY ("model_id") REFERENCES "users"("id") ON DELETE CASCADE,
  CONSTRAINT "endorsements_endorser_id_fkey" FOREIGN KEY ("endorser_id") REFERENCES "users"("id") ON DELETE CASCADE
);
CREATE UNIQUE INDEX IF NOT EXISTS "endorsements_model_id_endorser_id_key" ON "endorsements"("model_id", "endorser_id");
CREATE INDEX IF NOT EXISTS "endorsements_model_id_idx" ON "endorsements"("model_id");

-- Job Alerts
CREATE TABLE IF NOT EXISTS "job_alerts" (
  "id" TEXT NOT NULL DEFAULT gen_random_uuid(),
  "user_id" TEXT NOT NULL,
  "criteria" JSONB NOT NULL DEFAULT '{}',
  "active" BOOLEAN NOT NULL DEFAULT true,
  "last_notified" TIMESTAMP(3),
  "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
  CONSTRAINT "job_alerts_pkey" PRIMARY KEY ("id"),
  CONSTRAINT "job_alerts_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE
);
CREATE INDEX IF NOT EXISTS "job_alerts_user_id_idx" ON "job_alerts"("user_id");
[V0_FILE]plaintext:file="prisma/migrations/migration_lock.toml"
# Please do not edit this file manually
# It should be added in your version-control system (e.g., Git)
provider = "postgresql"
[V0_FILE]plaintext:file="prisma/schema.prisma"
datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

generator client {
  provider = "prisma-client-js"
}

enum Role {
  MODEL
  AGENCY
  BRAND
  CLIENT
  ADMIN
}

enum VerificationLevel {
  UNVERIFIED
  AGENCY_VERIFIED
  LUXLANE_VERIFIED
}

enum AvailabilityStatus {
  AVAILABLE
  HOLD
  BOOKED
}

enum CastingStatus {
  DRAFT
  ACTIVE
  CLOSED
}

enum CastingType {
  RUNWAY
  CAMPAIGN
  EDITORIAL
  EVENT
  OTHER
}

enum SubmissionStatus {
  APPLIED
  SUBMITTED
  SHORTLISTED
  OFFERED
  ACCEPTED
  DECLINED
  CONFIRMED
  REJECTED
}

enum NotificationType {
  INVITE
  OFFER
  SHORTLISTED
  CONFIRMED
  SYSTEM
}

enum MediaType {
  AVATAR
  PORTFOLIO
  POLAROID
  DOCUMENT
  TWIN_INPUT
  TWIN_OUTPUT
}

enum TwinStatus {
  NONE
  PENDING
  PROCESSING
  READY
  FAILED
}

model User {
  id              String    @id @default(uuid())
  email           String    @unique
  username        String    @unique
  passwordHash    String    @map("password_hash")
  displayName     String    @map("display_name")
  role            Role
  bio             String?
  locationCity    String?   @map("location_city")
  avatarUrl       String?   @map("avatar_url")
  isDemo          Boolean   @default(false) @map("is_demo")
  authProvider    String    @default("credentials") @map("auth_provider")
  onboardingComplete Boolean? @default(false) @map("onboarding_complete")
  createdAt       DateTime? @default(now()) @map("created_at")
  updatedAt       DateTime? @updatedAt @map("updated_at")

profile             Profile?
  modelProfile        ModelProfile?
  agencyProfile       AgencyProfile?
  brandProfile        BrandProfile?
  clientProfile       ClientProfile?
  refreshTokens       RefreshToken[]
  followers           Follow[]              @relation("followers")
  following           Follow[]              @relation("following")
  agencyAppsAsModel   AgencyApplication[]   @relation("agencyApplicationsAsModel")
  agencyAppsAsAgency  AgencyApplication[]   @relation("agencyApplicationsAsAgency")
  availabilityDates   AvailabilityDate[]
  notifications       Notification[]
  conversationMembers ConversationMember[]
  messages            Message[]             @relation("sentMessages")
  castings            Casting[]             @relation("createdCastings")
  submissions         Submission[]          @relation("modelSubmissions")
  savedCastings       SavedCasting[]
  savedModels         SavedModel[]          @relation("savedModelsByUser")
  savedByUsers        SavedModel[]          @relation("savedModelsOfUser")
  mediaAssets         MediaAsset[]
  settings            UserSettings?
  posts               Post[]
  postLikes           PostLike[]
  postSaves           PostSave[]
  comments            Comment[]
  blockedUsers        Block[]               @relation("blockerUser")
  blockedByUsers      Block[]               @relation("blockedUser")
  reportsCreated      Report[]              @relation("reportCreator")
  reportsReceived     Report[]              @relation("reportTarget")
  profileViews        ProfileView[]         @relation("profileViews")
  profileViewsBy      ProfileView[]         @relation("profileViewsBy")
  castingViewsBy      CastingView[]         @relation("castingViewsBy")
  earnings            Earning[]             @relation("userEarnings")
  stories             Story[]               @relation("userStories")
  storyViewsBy        StoryView[]           @relation("storyViewsBy")
  highlights          StoryHighlight[]      @relation("userHighlights")
  brandBookings       DirectBooking[]       @relation("brandBookings")
  modelBookings       DirectBooking[]       @relation("modelBookings")
  modelAgenciesAsModel  ModelAgency[]       @relation("modelAgencyModel")
  modelAgenciesAsAgency ModelAgency[]       @relation("modelAgencyAgency")
  workCredits           WorkCredit[]        @relation("modelCredits")
  confirmedCredits      WorkCredit[]        @relation("confirmedCredits")
  endorsementsReceived  Endorsement[]       @relation("endorsementsReceived")
  endorsementsGiven     Endorsement[]       @relation("endorsementsGiven")
  jobAlerts             JobAlert[]

@@map("users")
}

model Profile {
  userId             String    @id @map("user_id")
  displayName        String    @map("display_name")
  bio                String?
  location           String?
  height             String?
  hair               String?
  eyes               String?
  experience         String?
  verificationStatus VerificationLevel @default(UNVERIFIED) @map("verification_status")
  score              Int       @default(0)
  avatarUrl          String?   @map("avatar_url")
  coverUrl           String?   @map("cover_url")
  socialLinks        Json?     @default("{}") @map("social_links")
  updatedAt          DateTime? @updatedAt @map("updated_at")

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@map("profiles")
}

model RefreshToken {
  id        String   @id @default(uuid())
  userId    String   @map("user_id")
  tokenHash String   @map("token_hash")
  revoked   Boolean  @default(false)
  expiresAt DateTime @map("expires_at")
  createdAt DateTime @default(now()) @map("created_at")

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@index([userId])
  @@map("refresh_tokens")
}

model ModelProfile {
  userId            String             @id @map("user_id")
  heightCm          Int?               @map("height_cm")
  bustCm            Int?               @map("bust_cm")
  waistCm           Int?               @map("waist_cm")
  hipsCm            Int?               @map("hips_cm")
  shoeSize          String?            @map("shoe_size")
  hair              String?
  eyes              String?
  languages         String[]
  availability      AvailabilityStatus @default(AVAILABLE)
  agencyId          String?            @map("agency_id")
  verificationLevel VerificationLevel  @default(UNVERIFIED) @map("verification_level")
  luxlaneScore      Int                @default(0) @map("luxlane_score")

user        User         @relation(fields: [userId], references: [id], onDelete: Cascade)
  digitalTwin DigitalTwin?

@@map("model_profiles")
}

model AgencyProfile {
  userId         String   @id
  agencyName     String
  website        String?
  verified       Boolean  @default(false)
  commissionRate Decimal? @default(20.00) @map("commission_rate")

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@map("agency_profiles")
}

model BrandProfile {
  userId    String  @id @map("user_id")
  brandName String  @map("brand_name")
  website   String?
  verified  Boolean @default(false)

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@map("brand_profiles")
}

model ClientProfile {
  userId     String  @id
  clientName String
  website    String?
  industry   String?
  verified   Boolean @default(false)

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@map("client_profiles")
}

model AgencyApplication {
  id        String   @id @default(uuid())
  modelId   String
  agencyId  String
  status    String   @default("PENDING") // PENDING, ACCEPTED, REJECTED
  note      String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

model  User @relation("agencyApplicationsAsModel", fields: [modelId], references: [id], onDelete: Cascade)
  agency User @relation("agencyApplicationsAsAgency", fields: [agencyId], references: [id], onDelete: Cascade)

@@unique([modelId, agencyId])
  @@index([agencyId, status])
  @@map("agency_applications")
}

model ModelAgency {
  id             String    @id @default(uuid())
  modelId        String    @map("model_id")
  agencyId       String    @map("agency_id")
  status         String    @default("PENDING") // PENDING, INVITED, APPROVED, WAITING_CONTRACT, ACTIVE, DECLINED
  contractStatus String    @default("NONE") @map("contract_status") // NONE, PENDING, SIGNED, EXPIRED
  joinedAt       DateTime? @map("joined_at")
  createdAt      DateTime  @default(now()) @map("created_at")
  updatedAt      DateTime  @default(now()) @updatedAt @map("updated_at")

model  User @relation("modelAgencyModel", fields: [modelId], references: [id], onDelete: Cascade)
  agency User @relation("modelAgencyAgency", fields: [agencyId], references: [id], onDelete: Cascade)

@@unique([modelId, agencyId])
  @@index([agencyId, status])
  @@map("model_agencies")
}

model AvailabilityDate {
  id     String   @id @default(uuid())
  userId String
  date   DateTime
  status String   @default("AVAILABLE") // AVAILABLE, HOLD, BOOKED

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@unique([userId, date])
  @@index([userId])
  @@map("availability_dates")
}

model Follow {
  followerId  String   @map("follower_id")
  followingId String   @map("following_id")
  createdAt   DateTime @default(now()) @map("created_at")

follower  User @relation("following", fields: [followerId], references: [id], onDelete: Cascade)
  following User @relation("followers", fields: [followingId], references: [id], onDelete: Cascade)

@@id([followerId, followingId])
  @@index([followingId])
  @@map("follows")
}

model Casting {
  id          String        @id @default(uuid())
  createdBy   String        @map("created_by")
  title       String
  type        CastingType
  description String?
  location    String?
  startDate   DateTime?     @map("start_date")
  endDate     DateTime?     @map("end_date")
  payMin      Int?          @map("pay_min")
  payMax      Int?          @map("pay_max")
  deadline    DateTime?
  status      CastingStatus @default(DRAFT)

verifiedOnly            Boolean @default(false) @map("verified_only")
  requireDigitalTwin      Boolean @default(false) @map("require_digital_twin")
  maxSubmissionsPerAgency Int?    @map("max_submissions_per_agency")

requirements   CastingRequirement?
  submissions    Submission[]
  savedBy        SavedCasting[]
  rooms          Conversation[] @relation("castingRooms")
  views          CastingView[]
  earnings       Earning[]
  budget         Int?
  creator        User           @relation("createdCastings", fields: [createdBy], references: [id], onDelete: Cascade)

createdAt DateTime @default(now()) @map("created_at")
  updatedAt DateTime @updatedAt @map("updated_at")

@@index([status])
  @@index([createdBy])
  @@map("castings")
}

model SavedCasting {
  userId    String   @map("user_id")
  castingId String   @map("casting_id")
  createdAt DateTime @default(now()) @map("created_at")

user    User    @relation(fields: [userId], references: [id], onDelete: Cascade)
  casting Casting @relation(fields: [castingId], references: [id], onDelete: Cascade)

@@id([userId, castingId])
  @@index([castingId])
  @@map("saved_castings")
}

model CastingRequirement {
  castingId   String   @id @map("casting_id")
  minHeightCm Int?     @map("min_height_cm")
  maxHeightCm Int?     @map("max_height_cm")
  tags        String[]
  notes       String?

casting Casting @relation(fields: [castingId], references: [id], onDelete: Cascade)

@@map("casting_requirements")
}

model Submission {
  id          String           @id @default(uuid())
  castingId   String           @map("casting_id")
  modelId     String           @map("model_id")
  submittedBy String           @map("submitted_by")
  status      SubmissionStatus @default(APPLIED)
  note        String?

casting Casting @relation(fields: [castingId], references: [id], onDelete: Cascade)
  model   User    @relation("modelSubmissions", fields: [modelId], references: [id], onDelete: Cascade)

createdAt DateTime @default(now()) @map("created_at")
  updatedAt DateTime @updatedAt @map("updated_at")

@@unique([castingId, modelId])
  @@index([castingId, status])
  @@index([modelId, status])
  @@map("submissions")
}

model Conversation {
  id        String   @id @default(uuid())
  type      String // "direct" | "casting_room"
  castingId String?  @map("casting_id")
  createdAt DateTime @default(now()) @map("created_at")

members       ConversationMember[]
  messages      Message[]
  casting       Casting?             @relation("castingRooms", fields: [castingId], references: [id], onDelete: SetNull)
  roomEvents    RoomEvent[]
  roomFiles     RoomFile[]
  roomSchedules RoomScheduleItem[]

@@map("conversations")
}

model RoomEvent {
  id           String   @id @default(uuid())
  roomId       String
  type         String   // "created" | "submission" | "shortlisted" | "offer_sent" | "offer_accepted" | "member_added" | "message"
  userId       String
  targetUserId String?
  message      String?
  createdAt    DateTime @default(now())

room Conversation @relation(fields: [roomId], references: [id], onDelete: Cascade)

@@index([roomId, createdAt])
  @@map("room_events")
}

model RoomFile {
  id         String   @id @default(uuid())
  roomId     String
  name       String
  type       String   // "moodboard" | "callsheet" | "contract" | "other"
  url        String
  uploadedBy String
  createdAt  DateTime @default(now())

room Conversation @relation(fields: [roomId], references: [id], onDelete: Cascade)

@@index([roomId])
  @@map("room_files")
}

model RoomScheduleItem {
  id       String   @id @default(uuid())
  roomId   String
  title    String
  date     DateTime
  time     String
  location String?
  notes    String?

room Conversation @relation(fields: [roomId], references: [id], onDelete: Cascade)

@@index([roomId])
  @@map("room_schedule_items")
}

model ConversationMember {
  conversationId String   @map("conversation_id")
  userId         String   @map("user_id")
  joinedAt       DateTime @default(now()) @map("joined_at")

conversation Conversation @relation(fields: [conversationId], references: [id], onDelete: Cascade)
  user         User         @relation(fields: [userId], references: [id], onDelete: Cascade)

@@id([conversationId, userId])
  @@index([userId])
  @@map("conversation_members")
}

model Message {
  id             String   @id @default(uuid())
  conversationId String   @map("conversation_id")
  senderId       String   @map("sender_id")
  body           String
  attachmentUrl  String?  @map("attachment_url")
  createdAt      DateTime @default(now()) @map("created_at")

conversation Conversation @relation(fields: [conversationId], references: [id], onDelete: Cascade)
  sender       User         @relation("sentMessages", fields: [senderId], references: [id], onDelete: Cascade)

@@index([conversationId, createdAt])
  @@map("messages")
}

model Notification {
  id        String           @id @default(uuid())
  userId    String           @map("user_id")
  type      NotificationType
  payload   Json
  read      Boolean          @default(false)
  createdAt DateTime         @default(now()) @map("created_at")

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@index([userId, read, createdAt])
  @@map("notifications")
}

model MediaAsset {
  id        String    @id @default(uuid())
  ownerId   String    @map("owner_id")
  type      MediaType
  url       String
  meta      Json?
  createdAt DateTime  @default(now()) @map("created_at")

owner User @relation(fields: [ownerId], references: [id], onDelete: Cascade)

@@index([ownerId, type])
  @@map("media_assets")
}

model DigitalTwin {
  userId     String     @id @map("user_id")
  status     TwinStatus @default(NONE)
  summary    Json?
  previewUrl String?    @map("preview_url")
  updatedAt  DateTime   @updatedAt @map("updated_at")

user ModelProfile @relation(fields: [userId], references: [userId], onDelete: Cascade)

@@map("digital_twins")
}

model UserSettings {
  userId        String   @id @map("user_id")
  notifications Json?    @default("{\"push\": true, \"email\": true}")
  darkMode      Boolean  @default(true) @map("dark_mode")
  privacy       Json?    @default("{\"mode\": \"public\"}")
  createdAt     DateTime @default(now()) @map("created_at")
  updatedAt     DateTime @updatedAt @map("updated_at")

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@map("user_settings")
}

model Post {
  id        String   @id @default(uuid())
  userId    String   @map("user_id")
  imageUrl  String   @map("image_url") // Primary image (backward compat)
  mediaUrls Json     @default("[]") @map("media_urls") // JSON array for carousel
  mediaType String   @default("image") @map("media_type") // "image" | "video" | "carousel"
  caption   String?
  createdAt DateTime @default(now()) @map("created_at")

user     User         @relation(fields: [userId], references: [id], onDelete: Cascade)
  likes    PostLike[]
  saves    PostSave[]
  comments Comment[]

@@index([userId])
  @@map("posts")
}

model PostLike {
  userId    String   @map("user_id")
  postId    String   @map("post_id")
  createdAt DateTime @default(now()) @map("created_at")

user User @relation(fields: [userId], references: [id], onDelete: Cascade)
  post Post @relation(fields: [postId], references: [id], onDelete: Cascade)

@@id([userId, postId])
  @@index([postId])
  @@map("post_likes")
}

model PostSave {
  userId    String   @map("user_id")
  postId    String   @map("post_id")
  createdAt DateTime @default(now()) @map("created_at")

user User @relation(fields: [userId], references: [id], onDelete: Cascade)
  post Post @relation(fields: [postId], references: [id], onDelete: Cascade)

@@id([userId, postId])
  @@index([postId])
  @@map("post_saves")
}

model Comment {
  id        String   @id @default(uuid())
  postId    String   @map("post_id")
  userId    String   @map("user_id")
  body      String
  parentId  String?  @map("parent_id")
  createdAt DateTime @default(now()) @map("created_at")

post    Post      @relation(fields: [postId], references: [id], onDelete: Cascade)
  user    User      @relation(fields: [userId], references: [id], onDelete: Cascade)
  parent  Comment?  @relation("CommentReplies", fields: [parentId], references: [id], onDelete: SetNull)
  replies Comment[] @relation("CommentReplies")

@@index([postId])
  @@index([parentId])
  @@map("comments")
}

model Block {
  blockerId String
  blockedId String
  createdAt DateTime @default(now())

blocker User @relation("blockerUser", fields: [blockerId], references: [id], onDelete: Cascade)
  blocked User @relation("blockedUser", fields: [blockedId], references: [id], onDelete: Cascade)

@@id([blockerId, blockedId])
  @@index([blockedId])
  @@map("blocks")
}

model Report {
  id        String   @id @default(uuid())
  reporterId String
  targetId   String
  reason     String   // "spam" | "harassment" | "inappropriate" | "fake" | "other"
  details    String?
  status     String   @default("PENDING") // PENDING, REVIEWED, RESOLVED, DISMISSED
  createdAt  DateTime @default(now())

reporter User @relation("reportCreator", fields: [reporterId], references: [id], onDelete: Cascade)
  target   User @relation("reportTarget", fields: [targetId], references: [id], onDelete: Cascade)

@@index([targetId, status])
  @@map("reports")
}

model SavedModel {
  userId  String
  modelId String
  note    String?
  createdAt DateTime @default(now())

user  User @relation("savedModelsByUser", fields: [userId], references: [id], onDelete: Cascade)
  model User @relation("savedModelsOfUser", fields: [modelId], references: [id], onDelete: Cascade)

@@id([userId, modelId])
  @@index([modelId])
  @@map("saved_models")
}

// ─── Phase 3: Growth Features ───

model ProfileView {
  id        String   @id @default(uuid())
  profileId String
  viewerId  String?
  source    String?  // "discover" | "casting" | "search" | "direct"
  createdAt DateTime @default(now())

profile User @relation("profileViews", fields: [profileId], references: [id], onDelete: Cascade)
  viewer  User? @relation("profileViewsBy", fields: [viewerId], references: [id], onDelete: SetNull)

@@index([profileId, createdAt])
  @@index([viewerId])
  @@map("profile_views")
}

model CastingView {
  id        String   @id @default(uuid())
  castingId String
  viewerId  String?
  createdAt DateTime @default(now())

casting Casting @relation(fields: [castingId], references: [id], onDelete: Cascade)
  viewer  User?   @relation("castingViewsBy", fields: [viewerId], references: [id], onDelete: SetNull)

@@index([castingId, createdAt])
  @@index([viewerId])
  @@map("casting_views")
}

model Earning {
  id          String   @id @default(uuid())
  userId      String
  castingId   String?
  amount      Int      // in cents
  currency    String   @default("EUR")
  description String?
  status      String   @default("PENDING") // PENDING, PAID, CANCELLED
  paidAt      DateTime?
  createdAt   DateTime @default(now())

user    User     @relation("userEarnings", fields: [userId], references: [id], onDelete: Cascade)
  casting Casting? @relation(fields: [castingId], references: [id], onDelete: SetNull)

@@index([userId, status])
  @@index([castingId])
  @@map("earnings")
}

model Story {
  id          String    @id @default(uuid())
  userId      String
  mediaUrl    String
  mediaType   String    @default("image") // "image" | "video"
  caption     String?
  expiresAt   DateTime
  viewCount   Int       @default(0)
  createdAt   DateTime  @default(now())
  highlightId String?

user      User            @relation("userStories", fields: [userId], references: [id], onDelete: Cascade)
  highlight StoryHighlight? @relation(fields: [highlightId], references: [id], onDelete: SetNull)
  views     StoryView[]

@@index([userId, createdAt])
  @@index([expiresAt])
  @@map("stories")
}

model StoryView {
  storyId  String
  viewerId String
  viewedAt DateTime @default(now())

story  Story @relation(fields: [storyId], references: [id], onDelete: Cascade)
  viewer User  @relation("storyViewsBy", fields: [viewerId], references: [id], onDelete: Cascade)

@@id([storyId, viewerId])
  @@map("story_views")
}

model StoryHighlight {
  id        String   @id @default(uuid())
  userId    String
  title     String
  coverUrl  String?
  sortOrder Int      @default(0)
  createdAt DateTime @default(now())

user    User    @relation("userHighlights", fields: [userId], references: [id], onDelete: Cascade)
  stories Story[]

@@index([userId, sortOrder])
  @@map("story_highlights")
}

// ─── Direct Bookings ───

model DirectBooking {
  id          String    @id @default(uuid())
  brandId     String    @map("brand_id")
  modelId     String    @map("model_id")
  title       String
  description String?
  location    String?
  startDate   DateTime? @map("start_date")
  endDate     DateTime? @map("end_date")
  payAmount   Int?      @map("pay_amount")
  payCurrency String    @default("EUR") @map("pay_currency")
  status      String    @default("PENDING")
  createdAt   DateTime  @default(now()) @map("created_at")
  updatedAt   DateTime  @updatedAt @map("updated_at")

brand User @relation("brandBookings", fields: [brandId], references: [id], onDelete: Cascade)
  model User @relation("modelBookings", fields: [modelId], references: [id], onDelete: Cascade)

@@index([brandId])
  @@index([modelId])
  @@map("direct_bookings")
}

// ── Phase 5: Industry Features ──

model WorkCredit {
  id           String    @id @default(uuid())
  modelId      String    @map("model_id")
  brandName    String    @map("brand_name")
  projectTitle String    @map("project_title")
  role         String?
  photographer String?
  year         Int?
  type         String    @default("campaign") // campaign, editorial, runway, commercial, video
  confirmedBy  String?   @map("confirmed_by")
  confirmedAt  DateTime? @map("confirmed_at")
  imageUrl     String?   @map("image_url")
  createdAt    DateTime  @default(now()) @map("created_at")

model     User  @relation("modelCredits", fields: [modelId], references: [id], onDelete: Cascade)
  confirmer User? @relation("confirmedCredits", fields: [confirmedBy], references: [id], onDelete: SetNull)

@@index([modelId])
  @@map("work_credits")
}

model Endorsement {
  id         String   @id @default(uuid())
  modelId    String   @map("model_id")
  endorserId String   @map("endorser_id")
  text       String
  tags       String[] @default([])
  createdAt  DateTime @default(now()) @map("created_at")

model    User @relation("endorsementsReceived", fields: [modelId], references: [id], onDelete: Cascade)
  endorser User @relation("endorsementsGiven", fields: [endorserId], references: [id], onDelete: Cascade)

@@unique([modelId, endorserId])
  @@index([modelId])
  @@map("endorsements")
}

model JobAlert {
  id           String    @id @default(uuid())
  userId       String    @map("user_id")
  criteria     Json      @default("{}")
  active       Boolean   @default(true)
  lastNotified DateTime? @map("last_notified")
  createdAt    DateTime  @default(now()) @map("created_at")

user User @relation(fields: [userId], references: [id], onDelete: Cascade)

@@index([userId])
  @@map("job_alerts")
}
[V0_FILE]typescript:file="prisma/seed.ts"
import dotenv from "dotenv"
import path from "path"

const root = process.cwd()
dotenv.config({ path: path.join(root, ".env") })
dotenv.config({ path: path.join(root, ".env.local") })

if (!process.env.DATABASE_URL) {
  console.error("DATABASE_URL is not set. Create a .env or .env.local file with DATABASE_URL=...")
  process.exit(1)
}

import { PrismaClient, Role } from "@prisma/client"
import bcrypt from "bcryptjs"
import { TEST_PASSWORD, TEST_ACCOUNTS } from "../lib/test-credentials"

let prisma: PrismaClient

async function main() {
  prisma = new PrismaClient()

console.log("Clearing existing data...")
  // Clear in dependency order
  await prisma.$executeRawUnsafe(`
    DO $$ BEGIN
      DELETE FROM post_likes;
      DELETE FROM post_saves;
      DELETE FROM comments;
      DELETE FROM posts;
      DELETE FROM messages;
      DELETE FROM conversation_members;
      DELETE FROM conversations;
      DELETE FROM notifications;
      DELETE FROM submissions;
      DELETE FROM casting_requirements;
      DELETE FROM castings;
      DELETE FROM media_assets;
      DELETE FROM follows;
      DELETE FROM refresh_tokens;
      DELETE FROM user_settings;
      DELETE FROM digital_twins;
      DELETE FROM agency_applications;
      DELETE FROM availability_dates;
      DELETE FROM blocks;
      DELETE FROM reports;
      DELETE FROM saved_models;
      DELETE FROM profile_views;
      DELETE FROM casting_views;
      DELETE FROM earnings;
      DELETE FROM story_views;
      DELETE FROM stories;
      DELETE FROM story_highlights;
      DELETE FROM direct_bookings;
      DELETE FROM room_events;
      DELETE FROM room_files;
      DELETE FROM room_schedule_items;
      DELETE FROM model_profiles;
      DELETE FROM agency_profiles;
      DELETE FROM brand_profiles;
      DELETE FROM client_profiles;
      DELETE FROM profiles;
      DELETE FROM users;
    EXCEPTION WHEN undefined_table THEN NULL;
    END $$;
  `)

const hash = await bcrypt.hash(TEST_PASSWORD, 12)
  console.log("Password hashed. Creating 40 accounts...")

// ── BRANDS (10) ──
  const brandData = [
    { ...TEST_ACCOUNTS.brands[0], bio: "Maison Christian Dior. Haute Couture, Ready-to-Wear, Beauty.", location: "Paris, France", website: "https://dior.com" },
    { ...TEST_ACCOUNTS.brands[1], bio: "Founded in Florence in 1921. One of the world's leading luxury fashion brands.", location: "Florence, Italy", website: "https://gucci.com" },
    { ...TEST_ACCOUNTS.brands[2], bio: "Iconic French fashion house. Timeless elegance since 1910.", location: "Paris, France", website: "https://chanel.com" },
    { ...TEST_ACCOUNTS.brands[3], bio: "Italian luxury fashion house. Challenging conventions since 1913.", location: "Milan, Italy", website: "https://prada.com" },
    { ...TEST_ACCOUNTS.brands[4], bio: "British luxury brand. Heritage, innovation, and craftsmanship.", location: "London, UK", website: "https://burberry.com" },
    { ...TEST_ACCOUNTS.brands[5], bio: "Bold Italian glamour. Versace is not just fashion, it's a lifestyle.", location: "Milan, Italy", website: "https://versace.com" },
    { ...TEST_ACCOUNTS.brands[6], bio: "Avant-garde fashion house. Pushing boundaries since 1917.", location: "Paris, France", website: "https://balenciaga.com" },
    { ...TEST_ACCOUNTS.brands[7], bio: "Roman luxury house known for fur, leather goods, and accessories.", location: "Rome, Italy", website: "https://fendi.com" },
    { ...TEST_ACCOUNTS.brands[8], bio: "French luxury goods manufacturer. Artisanship since 1837.", location: "Paris, France", website: "https://hermes.com" },
    { ...TEST_ACCOUNTS.brands[9], bio: "Global fashion powerhouse. Art, travel, and craftsmanship.", location: "Paris, France", website: "https://louisvuitton.com" },
  ]

const brands: string[] = []
  for (const b of brandData) {
    const user = await prisma.user.create({
      data: {
        email: b.email,
        username: b.username,
        passwordHash: hash,
        displayName: b.name,
        role: Role.BRAND,
        isDemo: true,
        authProvider: "demo",
        profile: { create: { displayName: b.name, bio: b.bio, location: b.location, verificationStatus: "LUXLANE_VERIFIED", avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(b.name)}&background=1a1a2e&color=e94560&size=200&bold=true` } },
        brandProfile: { create: { brandName: b.name, website: b.website, verified: true } },
        settings: { create: { darkMode: true } },
      },
    })
    brands.push(user.id)
    console.log(`  Brand: ${b.name} (${b.email})`)
  }

// ── AGENCIES (10) ──
  const agencyData = [
    { ...TEST_ACCOUNTS.agencies[0], bio: "The world's leading model management agency. Discovering beauty since 1972.", location: "New York, NY", website: "https://elitemodel.com" },
    { ...TEST_ACCOUNTS.agencies[1], bio: "Next Model Management. Offices in NY, LA, Paris, Milan, London.", location: "New York, NY", website: "https://nextmodels.com" },
    { ...TEST_ACCOUNTS.agencies[2], bio: "IMG Models is the international leader in talent discovery.", location: "New York, NY", website: "https://imgmodels.com" },
    { ...TEST_ACCOUNTS.agencies[3], bio: "Wilhelmina Models. Representing top talent across fashion, beauty, and entertainment.", location: "New York, NY", website: "https://wilhelmina.com" },
    { ...TEST_ACCOUNTS.agencies[4], bio: "Ford Models. Pioneering the modeling industry since 1946.", location: "New York, NY", website: "https://fordmodels.com" },
    { ...TEST_ACCOUNTS.agencies[5], bio: "Storm Model Management. Discovering and developing exceptional talent.", location: "London, UK", website: "https://stormmodels.com" },
    { ...TEST_ACCOUNTS.agencies[6], bio: "Women Management. Premier model agency in NYC, Paris, Milan.", location: "New York, NY", website: "https://womenmanagement.com" },
    { ...TEST_ACCOUNTS.agencies[7], bio: "Select Model Management. London's leading boutique agency.", location: "London, UK", website: "https://selectmodel.com" },
    { ...TEST_ACCOUNTS.agencies[8], bio: "Marilyn Agency. Representing the finest talent in Paris.", location: "Paris, France", website: "https://marilynagency.com" },
    { ...TEST_ACCOUNTS.agencies[9], bio: "DNA Model Management. Curating unique, diverse beauty.", location: "New York, NY", website: "https://dnamodels.com" },
  ]

const agencies: string[] = []
  for (const a of agencyData) {
    const user = await prisma.user.create({
      data: {
        email: a.email,
        username: a.username,
        passwordHash: hash,
        displayName: a.name,
        role: Role.AGENCY,
        isDemo: true,
        authProvider: "demo",
        profile: { create: { displayName: a.name, bio: a.bio, location: a.location, verificationStatus: "LUXLANE_VERIFIED", avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(a.name)}&background=0d1b2a&color=00b4d8&size=200&bold=true` } },
        agencyProfile: { create: { agencyName: a.name, website: a.website, verified: true, commissionRate: 20.0 } },
        settings: { create: { darkMode: true } },
      },
    })
    agencies.push(user.id)
    console.log(`  Agency: ${a.name} (${a.email})`)
  }

// ── MODELS (10) — all independent, no agency assignments ──
  const modelData = [
    { ...TEST_ACCOUNTS.models[0], bio: "International runway model. Paris, Milan, NYC.", location: "Paris, France", heightCm: 180, bustCm: 81, waistCm: 61, hipsCm: 86, hair: "Brunette", eyes: "Green", shoe: "40 EU", score: 94, exp: ["Dior SS24", "Chanel Resort", "Prada FW23"] },
    { ...TEST_ACCOUNTS.models[1], bio: "Shanghai-born, London-based. Editorial and high fashion.", location: "London, UK", heightCm: 178, bustCm: 80, waistCm: 60, hipsCm: 87, hair: "Black", eyes: "Brown", shoe: "39 EU", score: 88, exp: ["Valentino", "Bottega Veneta", "Vogue China Cover"] },
    { ...TEST_ACCOUNTS.models[2], bio: "Aspiring model. NYC based. Open to collaborations.", location: "Brooklyn, NY", heightCm: 175, bustCm: 81, waistCm: 64, hipsCm: 89, hair: "Blonde", eyes: "Blue", shoe: "38 EU", score: 42, exp: [] },
    { ...TEST_ACCOUNTS.models[3], bio: "Scandinavian beauty. Stockholm & Paris.", location: "Stockholm, Sweden", heightCm: 177, bustCm: 83, waistCm: 62, hipsCm: 90, hair: "Blonde", eyes: "Blue", shoe: "39 EU", score: 78, exp: ["H&M Global", "COS Campaign"] },
    { ...TEST_ACCOUNTS.models[4], bio: "Milan Fashion Week regular. Gucci, Prada, Versace.", location: "Milan, Italy", heightCm: 178, bustCm: 84, waistCm: 61, hipsCm: 89, hair: "Black", eyes: "Brown", shoe: "39 EU", score: 87, exp: ["Gucci FW24", "Prada SS24", "Versace Resort"] },
    { ...TEST_ACCOUNTS.models[5], bio: "Parisian chic. Commercial and editorial.", location: "Paris, France", heightCm: 176, bustCm: 82, waistCm: 62, hipsCm: 88, hair: "Auburn", eyes: "Hazel", shoe: "38 EU", score: 72, exp: ["L'Oréal Paris", "Dior Beauty"] },
    { ...TEST_ACCOUNTS.models[6], bio: "Top model. Specializing in haute couture and runway.", location: "Moscow, Russia", heightCm: 182, bustCm: 80, waistCm: 59, hipsCm: 87, hair: "Blonde", eyes: "Blue", shoe: "41 EU", score: 98, exp: ["Chanel Couture", "Louis Vuitton", "Balenciaga"] },
    { ...TEST_ACCOUNTS.models[7], bio: "French model. Runway and beauty.", location: "Lyon, France", heightCm: 179, bustCm: 81, waistCm: 60, hipsCm: 87, hair: "Brown", eyes: "Green", shoe: "39 EU", score: 75, exp: ["YSL", "Celine"] },
    { ...TEST_ACCOUNTS.models[8], bio: "Nigerian-British model. London & Lagos.", location: "London, UK", heightCm: 181, bustCm: 82, waistCm: 60, hipsCm: 88, hair: "Black", eyes: "Brown", shoe: "40 EU", score: 91, exp: ["Burberry AW24", "Alexander McQueen"] },
    { ...TEST_ACCOUNTS.models[9], bio: "Korean-American. Fashion and commercial.", location: "Seoul, South Korea", heightCm: 174, bustCm: 80, waistCm: 61, hipsCm: 86, hair: "Black", eyes: "Brown", shoe: "37 EU", score: 69, exp: ["Samsung", "Gentle Monster"] },
  ]

const models: string[] = []
  for (const m of modelData) {
    const user = await prisma.user.create({
      data: {
        email: m.email,
        username: m.username,
        passwordHash: hash,
        displayName: m.name,
        role: Role.MODEL,
        isDemo: true,
        authProvider: "demo",
        profile: {
          create: {
            displayName: m.name,
            bio: m.bio,
            location: m.location,
            height: `${m.heightCm} cm`,
            hair: m.hair,
            eyes: m.eyes,
            experience: m.exp.join(", "),
            verificationStatus: m.score > 70 ? "LUXLANE_VERIFIED" : m.score > 40 ? "AGENCY_VERIFIED" : "UNVERIFIED",
            score: m.score,
            avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(m.name)}&background=2d2d3f&color=f8c291&size=200&bold=true`,
          },
        },
        modelProfile: {
          create: {
            heightCm: m.heightCm,
            bustCm: m.bustCm,
            waistCm: m.waistCm,
            hipsCm: m.hipsCm,
            shoeSize: m.shoe,
            hair: m.hair,
            eyes: m.eyes,
            languages: ["English"],
            verificationLevel: m.score > 70 ? "LUXLANE_VERIFIED" : m.score > 40 ? "AGENCY_VERIFIED" : "UNVERIFIED",
            luxlaneScore: m.score,
          },
        },
        settings: { create: { darkMode: true } },
      },
    })
    models.push(user.id)
    console.log(`  Model: ${m.name} (${m.email}) — independent`)
  }

// ── CLIENTS (10) ──
  const clientData = [
    { ...TEST_ACCOUNTS.clients[0], bio: "Fashion Photographer. Vogue, Harper's Bazaar, Elle.", location: "Los Angeles, CA", industry: "Photography" },
    { ...TEST_ACCOUNTS.clients[1], bio: "Legendary fashion photographer. 40+ years in the industry.", location: "New York, NY", industry: "Photography" },
    { ...TEST_ACCOUNTS.clients[2], bio: "Creative Director. Brand campaigns and editorial production.", location: "London, UK", industry: "Creative Direction" },
    { ...TEST_ACCOUNTS.clients[3], bio: "Fashion designer and creative visionary.", location: "New York, NY", industry: "Fashion Design" },
    { ...TEST_ACCOUNTS.clients[4], bio: "Stylist and creative consultant. Editorial and commercial.", location: "London, UK", industry: "Styling" },
    { ...TEST_ACCOUNTS.clients[5], bio: "Production manager. Fashion shows and photoshoots.", location: "Paris, France", industry: "Production" },
    { ...TEST_ACCOUNTS.clients[6], bio: "Casting director. 15 years in fashion casting.", location: "New York, NY", industry: "Casting" },
    { ...TEST_ACCOUNTS.clients[7], bio: "Film director and commercial producer.", location: "Seoul, South Korea", industry: "Film & Video" },
    { ...TEST_ACCOUNTS.clients[8], bio: "Beauty and wellness brand founder.", location: "Miami, FL", industry: "Beauty" },
    { ...TEST_ACCOUNTS.clients[9], bio: "Music video and concert tour production.", location: "London, UK", industry: "Entertainment" },
  ]

const clients: string[] = []
  for (const c of clientData) {
    const user = await prisma.user.create({
      data: {
        email: c.email,
        username: c.username,
        passwordHash: hash,
        displayName: c.name,
        role: Role.CLIENT,
        isDemo: true,
        authProvider: "demo",
        profile: { create: { displayName: c.name, bio: c.bio, location: c.location, verificationStatus: "AGENCY_VERIFIED", avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(c.name)}&background=1b1b2f&color=a29bfe&size=200&bold=true` } },
        clientProfile: { create: { clientName: c.name, industry: c.industry } },
        settings: { create: { darkMode: true } },
      },
    })
    clients.push(user.id)
    console.log(`  Client: ${c.name} (${c.email})`)
  }

// ── FOLLOW RELATIONSHIPS ──
  console.log("Creating follow relationships...")
  const followPairs: [string, string][] = [
    // Brands follow each other
    [brands[0], brands[1]], [brands[1], brands[0]], [brands[2], brands[0]],
    // Agencies follow brands
    [agencies[0], brands[0]], [agencies[0], brands[1]], [agencies[1], brands[0]],
    [agencies[2], brands[1]], [agencies[3], brands[2]], [agencies[4], brands[3]],
    // Models follow brands
    [models[0], brands[0]], [models[0], brands[1]], [models[1], brands[0]],
    [models[2], brands[1]], [models[3], brands[2]], [models[4], brands[0]],
    [models[4], brands[1]], [models[5], brands[2]], [models[6], brands[0]],
    // Models follow agencies
    [models[0], agencies[0]], [models[1], agencies[1]], [models[2], agencies[2]],
    [models[3], agencies[0]], [models[4], agencies[1]], [models[5], agencies[2]],
    // Models follow each other
    [models[0], models[1]], [models[1], models[0]], [models[2], models[0]],
    [models[3], models[4]], [models[4], models[3]], [models[5], models[6]],
    [models[6], models[7]], [models[7], models[8]], [models[8], models[9]],
    // Brands follow models
    [brands[0], models[0]], [brands[0], models[4]], [brands[0], models[6]],
    [brands[1], models[0]], [brands[1], models[1]], [brands[1], models[4]],
    [brands[2], models[6]], [brands[2], models[8]],
    // Clients follow models and brands
    [clients[0], models[0]], [clients[0], brands[0]], [clients[1], models[6]],
  ]
  for (const [a, b] of followPairs) {
    await prisma.follow.create({ data: { followerId: a, followingId: b } }).catch(() => {})
  }

// ── CASTINGS (8) ──
  console.log("Creating castings...")
  const now = new Date()
  const futureDate = (days: number) => new Date(now.getTime() + days * 86400000)

const castingDefs = [
    { createdBy: brands[0], title: "Dior Spring 2025 Campaign", type: "CAMPAIGN" as const, desc: "Seeking diverse female models for our upcoming Spring 2025 campaign. Shot by Steven Meisel in Paris.", location: "Paris, France", payMin: 15000, payMax: 15000, start: futureDate(30), end: futureDate(35), deadline: futureDate(20), minH: 175, maxH: 185, tags: ["runway", "editorial"] },
    { createdBy: brands[1], title: "Gucci Milan Fashion Week", type: "RUNWAY" as const, desc: "Gucci runway show for Milan Fashion Week. Strong walk required.", location: "Milan, Italy", payMin: 5000, payMax: 5000, start: futureDate(40), end: futureDate(41), deadline: futureDate(30), minH: 175, maxH: 185, tags: ["runway"] },
    { createdBy: brands[2], title: "Chanel Haute Couture Fitting", type: "EVENT" as const, desc: "Fitting session for Chanel Haute Couture collection. Paris atelier.", location: "Paris, France", payMin: 800, payMax: 800, start: futureDate(15), end: futureDate(16), deadline: futureDate(10), minH: 172, maxH: 182, tags: ["couture", "fitting"] },
    { createdBy: brands[3], title: "Prada Resort Lookbook", type: "EDITORIAL" as const, desc: "Prada Resort collection lookbook shoot in Sardinia.", location: "Sardinia, Italy", payMin: 8000, payMax: 8000, start: futureDate(45), end: futureDate(48), deadline: futureDate(35), minH: 174, maxH: 184, tags: ["editorial", "campaign"] },
    { createdBy: agencies[0], title: "Elite New Faces 2025", type: "EVENT" as const, desc: "Annual scouting event. Open to all aspiring models.", location: "New York, NY", payMin: 0, payMax: 0, start: futureDate(60), end: futureDate(61), deadline: futureDate(50), minH: 165, maxH: 190, tags: ["scouting", "open-call"] },
    { createdBy: agencies[1], title: "Next x Zara Campaign", type: "CAMPAIGN" as const, desc: "Next Models casting for Zara global campaign in Barcelona.", location: "Barcelona, Spain", payMin: 8000, payMax: 8000, start: futureDate(25), end: futureDate(29), deadline: futureDate(18), minH: 170, maxH: 185, tags: ["commercial", "campaign"] },
    { createdBy: agencies[2], title: "IMG Worldwide Scouting", type: "EVENT" as const, desc: "IMG Models worldwide talent scouting. Virtual submissions accepted.", location: "Worldwide (Virtual)", payMin: 0, payMax: 0, start: futureDate(30), end: futureDate(60), deadline: futureDate(55), minH: 160, maxH: 195, tags: ["scouting"] },
    { createdBy: brands[4], title: "Burberry Autumn Campaign", type: "CAMPAIGN" as const, desc: "Burberry looking for fresh faces for autumn campaign. London shoot.", location: "London, UK", payMin: 10000, payMax: 10000, start: futureDate(50), end: futureDate(53), deadline: futureDate(40), minH: 175, maxH: 185, tags: ["campaign", "editorial"] },
  ]

const castings: string[] = []
  for (const c of castingDefs) {
    const casting = await prisma.casting.create({
      data: {
        createdBy: c.createdBy,
        title: c.title,
        type: c.type,
        description: c.desc,
        location: c.location,
        payMin: c.payMin,
        payMax: c.payMax,
        startDate: c.start,
        endDate: c.end,
        deadline: c.deadline,
        status: "ACTIVE",
        verifiedOnly: c.payMin > 5000,
        requirements: {
          create: { minHeightCm: c.minH, maxHeightCm: c.maxH, tags: c.tags },
        },
      },
    })
    castings.push(casting.id)
    console.log(`  Casting: ${c.title}`)
  }

// No pre-made submissions — all applications are user-generated

// ── POSTS ──
  console.log("Creating posts...")
  await prisma.post.create({
    data: { userId: brands[0], imageUrl: "/placeholder.svg?height=600&width=400&text=Dior+SS25", caption: "Introducing our Spring 2025 collection. Now casting." },
  })
  await prisma.post.create({
    data: { userId: agencies[0], imageUrl: "/placeholder.svg?height=600&width=400&text=Elite+New+Faces", caption: "Applications for Elite New Faces 2025 are now open! Link in bio." },
  })
  await prisma.post.create({
    data: { userId: brands[1], imageUrl: "/placeholder.svg?height=600&width=400&text=Gucci+MFW", caption: "Milan Fashion Week is calling. Are you ready?" },
  })

console.log("\n✅ Seed complete!")
  console.log(`   ${brands.length} brands, ${agencies.length} agencies, ${models.length} models, ${clients.length} clients`)
  console.log(`   ${castings.length} castings, 0 submissions, 3 posts`)
  console.log(`   All models are independent — no agency assignments`)
  console.log(`\n   Login: any email above + password "${TEST_PASSWORD}"`)
  console.log(`   Example: sofia@luxlane.demo / ${TEST_PASSWORD}`)
}

main()
  .catch((e) => {
    console.error("Seed failed:", e)
    process.exit(1)
  })
  .finally(async () => {
    await prisma?.$disconnect()
  })
[V0_FILE]json:file="prisma/tsconfig.json"
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "../node_modules/.prisma/seed-out",
    "types": ["node"]
  },
  "include": ["seed.ts"]
}
[V0_FILE]sql:file="scripts/001-create-luxlane-tables.sql"
-- Luxlane Database Schema Migration
-- Run this script to create all tables

-- Create enums
CREATE TYPE role AS ENUM ('MODEL', 'AGENCY', 'BRAND', 'CLIENT', 'ADMIN');
CREATE TYPE verification_level AS ENUM ('UNVERIFIED', 'AGENCY_VERIFIED', 'LUXLANE_VERIFIED');
CREATE TYPE availability_status AS ENUM ('AVAILABLE', 'HOLD', 'BOOKED');
CREATE TYPE casting_status AS ENUM ('DRAFT', 'ACTIVE', 'CLOSED');
CREATE TYPE casting_type AS ENUM ('RUNWAY', 'CAMPAIGN', 'EDITORIAL', 'EVENT', 'OTHER');
CREATE TYPE submission_status AS ENUM ('APPLIED', 'SUBMITTED', 'SHORTLISTED', 'OFFERED', 'ACCEPTED', 'DECLINED', 'CONFIRMED', 'REJECTED');
CREATE TYPE notification_type AS ENUM ('INVITE', 'OFFER', 'SHORTLISTED', 'CONFIRMED', 'SYSTEM');
CREATE TYPE media_type AS ENUM ('AVATAR', 'PORTFOLIO', 'POLAROID', 'DOCUMENT', 'TWIN_INPUT', 'TWIN_OUTPUT');

-- Users table
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email TEXT UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  role role NOT NULL,
  username TEXT UNIQUE NOT NULL,
  display_name TEXT NOT NULL,
  bio TEXT,
  location_city TEXT,
  avatar_url TEXT,
  onboarding_complete BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now()
);

CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);
CREATE INDEX idx_users_role ON users(role);

-- Refresh tokens table
CREATE TABLE refresh_tokens (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  token_hash TEXT NOT NULL,
  revoked BOOLEAN DEFAULT false,
  expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now()
);

CREATE INDEX idx_refresh_tokens_user_id ON refresh_tokens(user_id);

-- Model profiles table
CREATE TABLE model_profiles (
  user_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
  height_cm INT,
  bust_cm INT,
  waist_cm INT,
  hips_cm INT,
  shoe_size TEXT,
  hair TEXT,
  eyes TEXT,
  languages TEXT[],
  availability availability_status DEFAULT 'AVAILABLE',
  agency_id UUID REFERENCES users(id),
  verification_level verification_level DEFAULT 'UNVERIFIED',
  luxlane_score INT DEFAULT 0
);

-- Agency profiles table
CREATE TABLE agency_profiles (
  user_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
  agency_name TEXT NOT NULL,
  website TEXT,
  verified BOOLEAN DEFAULT false
);

-- Brand profiles table
CREATE TABLE brand_profiles (
  user_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
  brand_name TEXT NOT NULL,
  website TEXT,
  verified BOOLEAN DEFAULT false
);

-- Follows table
CREATE TABLE follows (
  follower_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  following_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  PRIMARY KEY (follower_id, following_id)
);

CREATE INDEX idx_follows_following_id ON follows(following_id);

-- Castings table
CREATE TABLE castings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  created_by UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  type casting_type NOT NULL,
  description TEXT,
  location TEXT,
  start_date TIMESTAMP WITH TIME ZONE,
  end_date TIMESTAMP WITH TIME ZONE,
  pay_min INT,
  pay_max INT,
  deadline TIMESTAMP WITH TIME ZONE,
  status casting_status DEFAULT 'DRAFT',
  verified_only BOOLEAN DEFAULT false,
  require_digital_twin BOOLEAN DEFAULT false,
  max_submissions_per_agency INT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now()
);

CREATE INDEX idx_castings_status ON castings(status);
CREATE INDEX idx_castings_created_by ON castings(created_by);
CREATE INDEX idx_castings_deadline ON castings(deadline);

-- Casting requirements table
CREATE TABLE casting_requirements (
  casting_id UUID PRIMARY KEY REFERENCES castings(id) ON DELETE CASCADE,
  min_height_cm INT,
  max_height_cm INT,
  tags TEXT[],
  notes TEXT
);

-- Submissions table
CREATE TABLE submissions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  casting_id UUID NOT NULL REFERENCES castings(id) ON DELETE CASCADE,
  model_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  submitted_by UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  status submission_status DEFAULT 'APPLIED',
  note TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  UNIQUE (casting_id, model_id)
);

CREATE INDEX idx_submissions_casting_status ON submissions(casting_id, status);
CREATE INDEX idx_submissions_model_status ON submissions(model_id, status);

-- Conversations table
CREATE TABLE conversations (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  type TEXT NOT NULL, -- 'direct' | 'casting_room'
  casting_id UUID REFERENCES castings(id) ON DELETE SET NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now()
);

-- Conversation members table
CREATE TABLE conversation_members (
  conversation_id UUID NOT NULL REFERENCES conversations(id) ON DELETE CASCADE,
  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  joined_at TIMESTAMP WITH TIME ZONE DEFAULT now(),
  PRIMARY KEY (conversation_id, user_id)
);

CREATE INDEX idx_conversation_members_user_id ON conversation_members(user_id);

-- Messages table
CREATE TABLE messages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  conversation_id UUID NOT NULL REFERENCES conversations(id) ON DELETE CASCADE,
  sender_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  body TEXT NOT NULL,
  attachment_url TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now()
);

CREATE INDEX idx_messages_conversation_created ON messages(conversation_id, created_at);

-- Notifications table
CREATE TABLE notifications (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  type notification_type NOT NULL,
  payload JSONB NOT NULL,
  read BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now()
);

CREATE INDEX idx_notifications_user_read_created ON notifications(user_id, read, created_at);

-- Media assets table
CREATE TABLE media_assets (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  owner_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
  type media_type NOT NULL,
  url TEXT NOT NULL,
  meta JSONB,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT now()
);

CREATE INDEX idx_media_assets_owner_type ON media_assets(owner_id, type);

-- Digital twins table
CREATE TABLE digital_twins (
  user_id UUID PRIMARY KEY REFERENCES model_profiles(user_id) ON DELETE CASCADE,
  status TEXT NOT NULL DEFAULT 'none', -- 'none' | 'pending' | 'processing' | 'ready' | 'failed'
  summary JSONB,
  preview_url TEXT,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT now()
);

-- Function to update updated_at timestamp
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = now();
  RETURN NEW;
END;
$$ language 'plpgsql';

-- Triggers for updated_at
CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
CREATE TRIGGER update_castings_updated_at BEFORE UPDATE ON castings FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
CREATE TRIGGER update_submissions_updated_at BEFORE UPDATE ON submissions FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
CREATE TRIGGER update_digital_twins_updated_at BEFORE UPDATE ON digital_twins FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
[V0_FILE]sql:file="scripts/002-add-user-settings-and-twin-status.sql"
-- Add TwinStatus enum type
DO $$ BEGIN
  CREATE TYPE twin_status AS ENUM ('NONE', 'PENDING', 'PROCESSING', 'READY', 'FAILED');
EXCEPTION
  WHEN duplicate_object THEN null;
END $$;

-- Create user_settings table
CREATE TABLE IF NOT EXISTS user_settings (
  user_id VARCHAR(255) PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
  dark_mode BOOLEAN NOT NULL DEFAULT true,
  notifications JSONB NOT NULL DEFAULT '{}',
  privacy JSONB NOT NULL DEFAULT '{}',
  created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT NOW()
);

-- Update digital_twins.status column to use the enum
-- First, add a temporary column
ALTER TABLE digital_twins 
  ADD COLUMN IF NOT EXISTS status_new twin_status DEFAULT 'NONE';

-- Migrate existing data
UPDATE digital_twins SET status_new = 
  CASE status
    WHEN 'none' THEN 'NONE'::twin_status
    WHEN 'pending' THEN 'PENDING'::twin_status
    WHEN 'processing' THEN 'PROCESSING'::twin_status
    WHEN 'ready' THEN 'READY'::twin_status
    WHEN 'failed' THEN 'FAILED'::twin_status
    ELSE 'NONE'::twin_status
  END;

-- Drop old column and rename new one (only if status is varchar)
DO $$ BEGIN
  IF EXISTS (
    SELECT 1 FROM information_schema.columns 
    WHERE table_name = 'digital_twins' AND column_name = 'status' AND data_type = 'character varying'
  ) THEN
    ALTER TABLE digital_twins DROP COLUMN status;
    ALTER TABLE digital_twins RENAME COLUMN status_new TO status;
  ELSE
    ALTER TABLE digital_twins DROP COLUMN IF EXISTS status_new;
  END IF;
END $$;

-- Create index for settings lookups
CREATE INDEX IF NOT EXISTS idx_user_settings_user_id ON user_settings(user_id);
[V0_FILE]sql:file="scripts/003-user-settings-simple.sql"
-- Create TwinStatus enum if not exists
DO $$ 
BEGIN
  IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'twin_status') THEN
    CREATE TYPE twin_status AS ENUM ('none', 'pending', 'processing', 'ready', 'failed');
  END IF;
END $$;

-- Create user_settings table without foreign key
CREATE TABLE IF NOT EXISTS user_settings (
  user_id UUID PRIMARY KEY,
  dark_mode BOOLEAN DEFAULT true,
  notifications JSONB DEFAULT '{"push": true, "email": true, "casting_alerts": true, "messages": true}'::jsonb,
  privacy JSONB DEFAULT '{"profile_visible": true, "show_measurements": true, "allow_messages": true}'::jsonb,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create index on user_id
CREATE INDEX IF NOT EXISTS idx_user_settings_user_id ON user_settings(user_id);

-- Add trigger for updated_at
DROP TRIGGER IF EXISTS update_user_settings_updated_at ON user_settings;
CREATE TRIGGER update_user_settings_updated_at
  BEFORE UPDATE ON user_settings
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();
[V0_FILE]sql:file="scripts/004-add-enums-and-settings.sql"
-- Add MediaType enum if not exists
DO $$
BEGIN
  IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'media_type') THEN
    CREATE TYPE media_type AS ENUM (
      'AVATAR',
      'PORTFOLIO', 
      'POLAROID',
      'DOCUMENT',
      'TWIN_INPUT',
      'TWIN_OUTPUT'
    );
  END IF;
END
$$;

-- Add TwinStatus enum if not exists
DO $$
BEGIN
  IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'twin_status') THEN
    CREATE TYPE twin_status AS ENUM (
      'NONE',
      'PENDING',
      'PROCESSING',
      'READY',
      'FAILED'
    );
  END IF;
END
$$;

-- Update digital_twins.status to use enum if it's still text
DO $$
BEGIN
  IF EXISTS (
    SELECT 1 FROM information_schema.columns 
    WHERE table_name = 'digital_twins' 
    AND column_name = 'status' 
    AND data_type = 'text'
  ) THEN
    ALTER TABLE digital_twins 
    ALTER COLUMN status TYPE twin_status 
    USING status::twin_status;
  END IF;
END
$$;

-- Create user_settings table if not exists
CREATE TABLE IF NOT EXISTS user_settings (
  user_id UUID PRIMARY KEY,
  dark_mode BOOLEAN NOT NULL DEFAULT true,
  notifications JSONB NOT NULL DEFAULT '{"email": true, "push": true, "castingInvites": true, "messages": true, "offers": true}',
  privacy JSONB NOT NULL DEFAULT '{"profileVisibility": "public", "showMeasurements": true, "showLocation": true}',
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

-- Create updated_at trigger for user_settings
CREATE OR REPLACE FUNCTION update_user_settings_updated_at()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

DROP TRIGGER IF EXISTS user_settings_updated_at ON user_settings;
CREATE TRIGGER user_settings_updated_at
  BEFORE UPDATE ON user_settings
  FOR EACH ROW
  EXECUTE FUNCTION update_user_settings_updated_at();
[V0_FILE]sql:file="scripts/005-fix-enums-and-settings.sql"
-- Create MediaType enum if not exists
DO $$ BEGIN
  CREATE TYPE media_type AS ENUM ('AVATAR', 'PORTFOLIO', 'POLAROID', 'DOCUMENT', 'TWIN_INPUT', 'TWIN_OUTPUT');
EXCEPTION
  WHEN duplicate_object THEN null;
END $$;

-- Create TwinStatus enum if not exists
DO $$ BEGIN
  CREATE TYPE twin_status AS ENUM ('NONE', 'PENDING', 'PROCESSING', 'READY', 'FAILED');
EXCEPTION
  WHEN duplicate_object THEN null;
END $$;

-- Update digital_twins.status column to use the enum
-- First, drop the default, then alter the type with explicit cast, then set new default
ALTER TABLE digital_twins 
  ALTER COLUMN status DROP DEFAULT;

ALTER TABLE digital_twins 
  ALTER COLUMN status TYPE twin_status 
  USING (
    CASE status
      WHEN 'pending' THEN 'PENDING'::twin_status
      WHEN 'processing' THEN 'PROCESSING'::twin_status
      WHEN 'ready' THEN 'READY'::twin_status
      WHEN 'failed' THEN 'FAILED'::twin_status
      ELSE 'NONE'::twin_status
    END
  );

ALTER TABLE digital_twins 
  ALTER COLUMN status SET DEFAULT 'NONE'::twin_status;

-- Update media_assets.type column to use the enum
ALTER TABLE media_assets 
  ALTER COLUMN type DROP DEFAULT;

ALTER TABLE media_assets 
  ALTER COLUMN type TYPE media_type 
  USING (
    CASE type
      WHEN 'avatar' THEN 'AVATAR'::media_type
      WHEN 'portfolio' THEN 'PORTFOLIO'::media_type
      WHEN 'polaroid' THEN 'POLAROID'::media_type
      WHEN 'document' THEN 'DOCUMENT'::media_type
      WHEN 'twin_input' THEN 'TWIN_INPUT'::media_type
      WHEN 'twin_output' THEN 'TWIN_OUTPUT'::media_type
      ELSE 'PORTFOLIO'::media_type
    END
  );

-- Create user_settings table
CREATE TABLE IF NOT EXISTS user_settings (
  user_id UUID PRIMARY KEY,
  dark_mode BOOLEAN NOT NULL DEFAULT true,
  notifications JSONB NOT NULL DEFAULT '{"push": true, "email": true, "casting_updates": true, "messages": true, "marketing": false}'::jsonb,
  privacy JSONB NOT NULL DEFAULT '{"profile_visible": true, "show_measurements": true, "show_portfolio": true, "allow_messages": true}'::jsonb,
  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
);

-- Create updated_at trigger for user_settings
DROP TRIGGER IF EXISTS update_user_settings_updated_at ON user_settings;
CREATE TRIGGER update_user_settings_updated_at
  BEFORE UPDATE ON user_settings
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();
[V0_FILE]sql:file="scripts/006-fix-enum-case.sql"
-- Drop the incorrectly created enum if it exists
DROP TYPE IF EXISTS twin_status CASCADE;
DROP TYPE IF EXISTS media_type CASCADE;

-- Create TwinStatus enum with UPPERCASE values to match existing data
CREATE TYPE twin_status AS ENUM ('NONE', 'PENDING', 'PROCESSING', 'READY', 'FAILED');

-- Create MediaType enum with UPPERCASE values
CREATE TYPE media_type AS ENUM ('AVATAR', 'PORTFOLIO', 'POLAROID', 'DOCUMENT', 'TWIN_INPUT', 'TWIN_OUTPUT');

-- Update digital_twins status column to use the enum
-- First drop the default, convert the column, then re-add the default
ALTER TABLE digital_twins 
  ALTER COLUMN status DROP DEFAULT;

ALTER TABLE digital_twins 
  ALTER COLUMN status TYPE twin_status 
  USING status::twin_status;

ALTER TABLE digital_twins 
  ALTER COLUMN status SET DEFAULT 'NONE'::twin_status;

-- Update media_assets type column to use the enum  
ALTER TABLE media_assets 
  ALTER COLUMN type DROP DEFAULT;

ALTER TABLE media_assets 
  ALTER COLUMN type TYPE media_type 
  USING type::media_type;

-- Create user_settings table if it doesn't exist
CREATE TABLE IF NOT EXISTS user_settings (
  user_id UUID PRIMARY KEY,
  dark_mode BOOLEAN NOT NULL DEFAULT true,
  notifications JSONB NOT NULL DEFAULT '{"push": true, "email": true, "sms": false, "casting_updates": true, "messages": true, "marketing": false}'::jsonb,
  privacy JSONB NOT NULL DEFAULT '{"profile_visible": true, "show_online_status": true, "allow_messages_from": "everyone"}'::jsonb,
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

-- Create index on user_settings
CREATE INDEX IF NOT EXISTS idx_user_settings_user_id ON user_settings(user_id);

-- Create trigger for updated_at
DROP TRIGGER IF EXISTS set_user_settings_updated_at ON user_settings;
CREATE TRIGGER set_user_settings_updated_at
  BEFORE UPDATE ON user_settings
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();
[V0_FILE]sql:file="scripts/007-convert-twin-status.sql"
-- Only convert digital_twins.status from text to enum
-- All other tables and enums already exist

-- Create the twin_status enum if it doesn't exist
DO $$ 
BEGIN
    IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'twin_status') THEN
        CREATE TYPE twin_status AS ENUM ('NONE', 'PENDING', 'PROCESSING', 'READY', 'FAILED');
    END IF;
END $$;

-- Convert digital_twins.status from text to enum
-- First update any existing values to match enum format
UPDATE digital_twins SET status = 'NONE' WHERE status IS NULL OR status = '';
UPDATE digital_twins SET status = UPPER(status) WHERE status IS NOT NULL;

-- Add a new column with the enum type
ALTER TABLE digital_twins ADD COLUMN IF NOT EXISTS status_new twin_status DEFAULT 'NONE';

-- Copy data from old column to new (with casting)
UPDATE digital_twins SET status_new = status::twin_status WHERE status IS NOT NULL AND status != '';

-- Drop old column and rename new one
ALTER TABLE digital_twins DROP COLUMN IF EXISTS status;
ALTER TABLE digital_twins RENAME COLUMN status_new TO status;
[V0_FILE]sql:file="scripts/008-twin-status-with-none.sql"
-- Drop the old enum if it exists (from previous failed attempts)
DROP TYPE IF EXISTS twin_status CASCADE;

-- Create TwinStatus enum with ALL values including NONE
CREATE TYPE twin_status AS ENUM ('NONE', 'PENDING', 'PROCESSING', 'READY', 'FAILED');

-- Convert digital_twins.status from text to enum
ALTER TABLE digital_twins 
  ALTER COLUMN status DROP DEFAULT,
  ALTER COLUMN status TYPE twin_status USING status::twin_status,
  ALTER COLUMN status SET DEFAULT 'NONE'::twin_status;
[V0_FILE]javascript:file="scripts/run-seed.cjs"
"use strict"

const path = require("path")
const { execSync } = require("child_process")
const dotenv = require("dotenv")

// Load .env and .env.local so DATABASE_URL is set before the seed runs
dotenv.config({ path: path.join(process.cwd(), ".env") })
dotenv.config({ path: path.join(process.cwd(), ".env.local") })

if (!process.env.DATABASE_URL) {
  console.error("DATABASE_URL is not set. Create a .env or .env.local file with DATABASE_URL=...")
  process.exit(1)
}

// Run seed with env set (no shell quoting - cross-platform)
execSync("npx ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts", {
  stdio: "inherit",
  env: process.env,
  cwd: process.cwd(),
  shell: true,
})
[V0_FILE]shellscript:file="start.sh"
#!/usr/bin/env bash
# Quick start: cd to project and start Docker Postgres.
# Run from anywhere: /Users/j.pebalemaurice/Desktop/LuxLaneRE-vu/start.sh
# Then from project root: npm run dev

set -e
cd /Users/j.pebalemaurice/Desktop/LuxLaneRE-vu
echo "Starting Postgres (Docker)..."
docker compose up -d
echo "Done. From here run: npm run dev"
[V0_FILE]css:file="styles/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

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

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

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

/* Pinterest-style masonry: multi-column layout, cards don't split */
.pinterest-masonry {
  column-count: 2;
  column-gap: 1rem;
}
@media (min-width: 768px) {
  .pinterest-masonry {
    column-count: 3;
  }
}
.pinterest-masonry > * {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Castings: compact grid – 3 cols mobile, small square-ish tiles */
.pinterest-masonry-castings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
}
@media (min-width: 640px) {
  .pinterest-masonry-castings {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
}
@media (min-width: 1024px) {
  .pinterest-masonry-castings {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.625rem;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
[V0_FILE]jpg:file="public/3d-body-scan.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/IOJsLIYfq53PaDCzte3IMw/public/3d-body-scan.jpg"
[V0_FILE]jpg:file="public/3d-head-scan.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/cintcM7uHsVTgz5pnQsNEe/public/3d-head-scan.jpg"
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png"
[V0_FILE]jpg:file="public/backstage-fashion-model-getting-ready-makeup.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/QpBP032LdkLaUqfd52tKgk/public/backstage-fashion-model-getting-ready-makeup.jpg"
[V0_FILE]jpg:file="public/call-sheet-document.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/Nr4RzpAxWU4zNWkgX4OA6s/public/call-sheet-document.jpg"
[V0_FILE]jpg:file="public/dior-fashion-campaign-spring-aesthetic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/QDpUbu5EvBdmt6wcmKumgS/public/dior-fashion-campaign-spring-aesthetic.jpg"
[V0_FILE]jpg:file="public/dior-haute-couture-dress-detail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/2paro3pEqvrU-Sk0Bcs0KZ/public/dior-haute-couture-dress-detail.jpg"
[V0_FILE]jpg:file="public/dior-luxury-accessories-jewelry.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/FI5iHamk7Uda4IWb7BoDJ5/public/dior-luxury-accessories-jewelry.jpg"
[V0_FILE]jpg:file="public/dior-luxury-brand-logo-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/I0eRDbYNDtBSsAp0CpHBOX/public/dior-luxury-brand-logo-elegant.jpg"
[V0_FILE]jpg:file="public/dior-luxury-fashion-brand-logo-minimal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/URGrSb1BM0atdjnzSVHIoB/public/dior-luxury-fashion-brand-logo-minimal.jpg"
[V0_FILE]jpg:file="public/dior-spring-2024-collection-campaign-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/j3-BkIhxckQbaiRNIqpqoZ/public/dior-spring-2024-collection-campaign-elegant.jpg"
[V0_FILE]jpg:file="public/editorial-fashion-photography-black-and-white.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/osa66fx04-7Zpqlv8oaXlb/public/editorial-fashion-photography-black-and-white.jpg"
[V0_FILE]jpg:file="public/elegant-fashion-model-portrait-sofia.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/FVm9h3xLMmALwr-lYjr6Qj/public/elegant-fashion-model-portrait-sofia.jpg"
[V0_FILE]jpg:file="public/elite-models-agency-logo-professional-minimal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/oHt-EqkynlQRuVWWGf1yVV/public/elite-models-agency-logo-professional-minimal.jpg"
[V0_FILE]jpg:file="public/elite-models-agency-logo-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/iT1QE0FLXhCBMmcYj7V-cA/public/elite-models-agency-logo-professional.jpg"
[V0_FILE]jpg:file="public/fashion-moodboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/dPuqeLWEBkforrowWXce1s/public/fashion-moodboard.jpg"
[V0_FILE]jpg:file="public/fashion-photographer-portrait-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/QaFIQ5KojL491HvjcTSNek/public/fashion-photographer-portrait-professional.jpg"
[V0_FILE]jpg:file="public/gucci-fashion-show-runway-aesthetic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/8tgl1YFOWfMA8s0Q9nQ1IB/public/gucci-fashion-show-runway-aesthetic.jpg"
[V0_FILE]jpg:file="public/gucci-luxury-fashion-brand-logo-minimal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/QDUKmA90V6xwVWJXUqbrMk/public/gucci-luxury-fashion-brand-logo-minimal.jpg"
[V0_FILE]jpg:file="public/high-fashion-editorial-model.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/aCVpfxKDcSigphtB1A0A9A/public/high-fashion-editorial-model.jpg"
[V0_FILE]jpg:file="public/high-fashion-editorial-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/TqlchlHsKVtYzWdSDdaLU1/public/high-fashion-editorial-photo.jpg"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg"
[V0_FILE]jpg:file="public/italian-supermodel-portrait-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/qR4e2eotiCMH_GEFl9DkUW/public/italian-supermodel-portrait-elegant.jpg"
[V0_FILE]jpg:file="public/luxury-brand-campaign-model.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/-S33OLlun44p6itWsh5Xla/public/luxury-brand-campaign-model.jpg"
[V0_FILE]jpg:file="public/luxury-brand-campaign-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/mCON9usfmX4Ld9IsENt-lz/public/luxury-brand-campaign-photo.jpg"
[V0_FILE]jpg:file="public/model-casting-event.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/YC0pFodBpFwCFfn9LrEeAZ/public/model-casting-event.jpg"
[V0_FILE]jpg:file="public/model-headshot-blonde-european.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/pHfFaqjalwPO2D2LiKct0Y/public/model-headshot-blonde-european.jpg"
[V0_FILE]jpg:file="public/model-polaroid-front.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/gOC2gMHhB8WB5HYscyeRcW/public/model-polaroid-front.jpg"
[V0_FILE]jpg:file="public/model-polaroid-full-body.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/pM4m8iAezk_mpy67quBh7g/public/model-polaroid-full-body.jpg"
[V0_FILE]jpg:file="public/model-polaroid-profile.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/NyESZKS23vbvZpA-bU8ypc/public/model-polaroid-profile.jpg"
[V0_FILE]jpg:file="public/paris-fashion-week-runway-model-walking-couture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/bYMvvaiRNixrdRdQq8UCw7/public/paris-fashion-week-runway-model-walking-couture.jpg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"
[V0_FILE]jpg:file="public/professional-model-headshot-woman-brunette.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/HYzY0T6yfaidv_eO5C13mT/public/professional-model-headshot-woman-brunette.jpg"
[V0_FILE]jpg:file="public/professional-model-headshot-woman-italian-dark-hai.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/us0WTgJyeiKMAeo2jUVpsB/public/professional-model-headshot-woman-italian-dark-hai.jpg"
[V0_FILE]jpg:file="public/professional-photographer-portrait-man.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/s-TrbGMM4dy7WfHuM6zhRE/public/professional-photographer-portrait-man.jpg"
[V0_FILE]jpg:file="public/runway-fashion-week-model.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/mCKTnDeTxmUmv4VDI5dGRk/public/runway-fashion-week-model.jpg"
[V0_FILE]jpg:file="public/runway-fashion-week-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/oyC_w5nyUeymOx9O63EgTA/public/runway-fashion-week-photo.jpg"
[V0_FILE]jpg:file="public/vogue-editorial-renaissance.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/mQ4y9K1mrdeJaRtg6NO-eM/public/vogue-editorial-renaissance.jpg"
[V0_FILE]jpg:file="public/young-aspiring-model-portrait-natural.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/WY0gRmOH_ccwbgDqaXoWSq/public/young-aspiring-model-portrait-natural.jpg"
[V0_FILE]jpg:file="public/young-model-headshot-woman-blonde-natural.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_SjAQ9F9HBAXCUswUKgt6CpNPzfGC/Sx8xFF79hGxe7iPpoQSmSj/public/young-model-headshot-woman-blonde-natural.jpg"</article></body></html>