108:"ExplicitChatIdProvider" 109:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"$108"] 10a:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"SWRDataProvider"] 10d:[] 10e:[["b_4FpunKhFL8T",null],["b_y1DOZk3Ovef",null],["b_E4vcXFXrAAS",null],["b_y1PEvy5j8SP",null],["b_ZI4rqQSLzZt",null],["b_dbJqvEhn95V",null],["b_7Zdjg5n2tFZ",null],["b_XsjoIv5TFlj",null],["b_POde8QtG01G",null],["b_3mkGPpu4nKz",null]] 10f:[["b_4FpunKhFL8T",{"templateVersionId":null,"templateCanonId":null}],["b_y1DOZk3Ovef",{"templateVersionId":null,"templateCanonId":null}],["b_E4vcXFXrAAS",{"templateVersionId":null,"templateCanonId":null}],["b_y1PEvy5j8SP",{"templateVersionId":null,"templateCanonId":null}],["b_ZI4rqQSLzZt",{"templateVersionId":null,"templateCanonId":null}],["b_dbJqvEhn95V",{"templateVersionId":null,"templateCanonId":null}],["b_7Zdjg5n2tFZ",{"templateVersionId":null,"templateCanonId":null}],["b_XsjoIv5TFlj",{"templateVersionId":null,"templateCanonId":null}],["b_POde8QtG01G",{"templateVersionId":null,"templateCanonId":null}],["b_3mkGPpu4nKz",{"templateVersionId":null,"templateCanonId":null}]] 110:[["b_PdpkyJ4NT7l","$D2025-09-14T10:12:43.740Z"],["b_Qzrk36YKQc6","$D2025-09-14T10:13:34.933Z"],["b_5hAozX46ELh","$D2025-09-14T10:14:43.566Z"],["b_JEWKpIN1KF4","$D2025-09-14T10:15:42.233Z"],["b_lXRV2OkbiFV","$D2025-09-14T10:16:47.766Z"],["b_rygVvroVntY","$D2025-09-14T10:17:57.011Z"],["b_V77EtK5Dgpd","$D2025-09-14T10:19:13.314Z"],["b_w7vPGkMY42A","$D2025-09-14T10:27:22.558Z"],["b_KUxb523cHqk","$D2025-09-14T10:39:16.868Z"],["b_uIcVFLsWOAU","$D2025-09-14T12:17:07.628Z"],["b_ZX4FmuyfRMx","$D2025-09-14T12:41:51.379Z"],["b_EOcOmZ3ztf4","$D2025-09-14T12:43:07.046Z"],["b_AzM1unQcYiL","$D2025-09-14T12:53:06.122Z"],["b_DF8vbJfnSxq","$D2025-09-14T13:06:03.618Z"],["b_dVftSgu4PGN","$D2025-09-17T09:47:50.624Z"],["b_Oo55PuCE1vI","$D2025-09-17T09:49:33.315Z"],["b_4NUYMk2Fgiz","$D2025-09-17T09:50:14.587Z"],["b_7Oc59RHSdUh","$D2025-09-17T09:51:16.471Z"],["b_tvSRqLsfYJu","$D2025-09-17T09:52:14.840Z"],["b_n4mIIru2WfV","$D2025-09-17T09:53:20.899Z"],["b_5pHnpxuxRvz","$D2025-09-17T09:54:16.355Z"],["b_4FpunKhFL8T","$D2025-09-18T09:46:38.547Z"],["b_y1DOZk3Ovef","$D2025-09-18T09:49:56.469Z"],["b_E4vcXFXrAAS","$D2025-09-18T09:51:49.549Z"],["b_y1PEvy5j8SP","$D2025-09-18T09:53:07.074Z"],["b_ZI4rqQSLzZt","$D2025-09-18T09:54:19.441Z"],["b_dbJqvEhn95V","$D2025-12-05T10:34:35.266Z"],["b_7Zdjg5n2tFZ","$D2025-12-05T10:34:52.108Z"],["b_XsjoIv5TFlj","$D2025-12-05T10:37:08.398Z"],["b_POde8QtG01G","$D2025-12-05T10:40:09.626Z"],["b_3mkGPpu4nKz","$D2025-12-05T10:41:57.024Z"]] 111:[["b_4FpunKhFL8T",false],["b_y1DOZk3Ovef",false],["b_E4vcXFXrAAS",false],["b_y1PEvy5j8SP",false],["b_ZI4rqQSLzZt",false],["b_dbJqvEhn95V",false],["b_7Zdjg5n2tFZ",false],["b_XsjoIv5TFlj",false],["b_POde8QtG01G",false],["b_3mkGPpu4nKz",false]] 112:[["b_4FpunKhFL8T","$undefined"],["b_y1DOZk3Ovef","$undefined"],["b_E4vcXFXrAAS","$undefined"],["b_y1PEvy5j8SP","$undefined"],["b_ZI4rqQSLzZt",{"deploymentId":"dpl_9TL35aQLBDwZ3iPXLMnUAEKmUW7j"}],["b_dbJqvEhn95V","$undefined"],["b_7Zdjg5n2tFZ","$undefined"],["b_XsjoIv5TFlj","$undefined"],["b_POde8QtG01G","$undefined"],["b_3mkGPpu4nKz",{"git":{"ref":"main","sha":"1f4f411fbe633853a464cd5116db534518319216","type":"github","repoId":0,"repoName":"v0-1-GzcYLayPLVR2D8Hzv6ytvPlU-bRGV16bym3S","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"}}]] 113:[["b_4FpunKhFL8T",null],["b_y1DOZk3Ovef",null],["b_E4vcXFXrAAS",null],["b_y1PEvy5j8SP",null],["b_ZI4rqQSLzZt",null],["b_dbJqvEhn95V",null],["b_7Zdjg5n2tFZ",null],["b_XsjoIv5TFlj",null],["b_POde8QtG01G",null],["b_3mkGPpu4nKz",null]] 114:[["b_4FpunKhFL8T",true],["b_y1DOZk3Ovef",true],["b_E4vcXFXrAAS",true],["b_y1PEvy5j8SP",true],["b_ZI4rqQSLzZt",true],["b_dbJqvEhn95V",true],["b_7Zdjg5n2tFZ",true],["b_XsjoIv5TFlj",true],["b_POde8QtG01G",true],["b_3mkGPpu4nKz",true]] 115:[["b_4FpunKhFL8T",true],["b_y1DOZk3Ovef",true],["b_E4vcXFXrAAS",true],["b_y1PEvy5j8SP",true],["b_ZI4rqQSLzZt",true],["b_dbJqvEhn95V",true],["b_7Zdjg5n2tFZ",true],["b_XsjoIv5TFlj",true],["b_POde8QtG01G",true],["b_3mkGPpu4nKz",true]] 116:[] 117:T793d8,[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette for calming healthcare theme */ --background: #ffffff; --foreground: #4f83c2; --card: #f0f4f8; --card-foreground: #374151; --popover: #ffffff; --popover-foreground: #4f83c2; --primary: #4f83c2; --primary-foreground: #ffffff; --secondary: #a8d5ba; --secondary-foreground: #374151; --muted: #b0c4de; --muted-foreground: #374151; --accent: #a8d5ba; --accent-foreground: #374151; --destructive: #dc2626; --destructive-foreground: #ffffff; --border: #d1d5db; --input: #f0f4f8; --ring: #a8d5ba; --chart-1: #4f83c2; --chart-2: #a8d5ba; --chart-3: #b0c4de; --chart-4: #e1f1f3; --chart-5: #f0f4f8; --radius: 0.5rem; --sidebar: #f0f4f8; --sidebar-foreground: #374151; --sidebar-primary: #4f83c2; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #a8d5ba; --sidebar-accent-foreground: #374151; --sidebar-border: #d1d5db; --sidebar-ring: #a8d5ba; } .dark { --background: #1f2937; --foreground: #f9fafb; --card: #374151; --card-foreground: #f9fafb; --popover: #374151; --popover-foreground: #f9fafb; --primary: #60a5fa; --primary-foreground: #1f2937; --secondary: #6ee7b7; --secondary-foreground: #1f2937; --muted: #4b5563; --muted-foreground: #d1d5db; --accent: #6ee7b7; --accent-foreground: #1f2937; --destructive: #ef4444; --destructive-foreground: #f9fafb; --border: #4b5563; --input: #374151; --ring: #6ee7b7; --chart-1: #60a5fa; --chart-2: #6ee7b7; --chart-3: #93c5fd; --chart-4: #a7f3d0; --chart-5: #e5e7eb; --sidebar: #374151; --sidebar-foreground: #f9fafb; --sidebar-primary: #60a5fa; --sidebar-primary-foreground: #1f2937; --sidebar-accent: #6ee7b7; --sidebar-accent-foreground: #1f2937; --sidebar-border: #4b5563; --sidebar-ring: #6ee7b7; } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "pg": "8.16.3", "bcryptjs": "3.0.2", "jsonwebtoken": "9.0.2", "@neondatabase/serverless": "1.0.1", "ai": "5.0.106" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/female-doctor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/female-doctor-tepfbvAfyn1xFgybZj12ofclQdQKPr.png" isMerged="true" [V0_FILE]png:file="public/male-doctor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/male-doctor-cJm9GPB5QM4QDdmjUkVfFmNSMIKbbG.png" isMerged="true" [V0_FILE]png:file="public/female-pediatrician.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/female-pediatrician-ohr87shdDSwtig8AlY1b1o9FdTb3MM.png" isMerged="true" [V0_FILE]typescriptreact:file="app/medicine/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/emergency/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/whatsapp/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, MessageCircle, Copy, Check, Bot, Calendar, Pill, Heart } from "lucide-react" import Link from "next/link" const whatsappNumber = "+91-98765-43210" const whatsappLink = `https://wa.me/${whatsappNumber.replace(/[^0-9]/g, "")}` const quickCommands = [ { code: "0001", description: "Book Doctor Appointment", example: "0001 Cardiologist Apollo Hospital", icon: Calendar, color: "bg-primary/10 text-primary", }, { code: "0002", description: "Find Medicine", example: "0002 Paracetamol 500mg", icon: Pill, color: "bg-secondary/20 text-secondary-foreground", }, { code: "0003", description: "Emergency Assistance", example: "0003 Need ambulance", icon: Heart, color: "bg-destructive/10 text-destructive", }, { code: "0004", description: "Check Appointment Status", example: "0004 Booking ID: 12345", icon: MessageCircle, color: "bg-accent/20 text-accent-foreground", }, ] const chatHistory = [ { type: "user", message: "0001 Cardiologist", time: "10:30 AM", }, { type: "bot", message: "Hi! I found 3 cardiologists near you:\n\n1. Dr. Priya Sharma - Apollo Hospital (2.3km)\n Next slot: 2:30 PM today\n Fee: ₹800\n\n2. Dr. Rajesh Kumar - Max Healthcare (1.8km)\n Next slot: 4:00 PM today\n Fee: ₹600\n\nReply with the number to book (1 or 2)", time: "10:30 AM", }, { type: "user", message: "1", time: "10:31 AM", }, { type: "bot", message: "Perfect! ✅ Appointment booked with Dr. Priya Sharma\n\n📅 Date: Today, 2:30 PM\n🏥 Apollo Hospital\n💰 Fee: ₹800\n📍 2.3km away\n\nBooking ID: APL12345\n\nYou'll receive SMS confirmation shortly. Need directions? Reply 'MAP'", time: "10:31 AM", }, ] export default function WhatsAppPage() { const [copiedCode, setCopiedCode] = useState(null) const [phoneNumber, setPhoneNumber] = useState("") const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text) setCopiedCode(text) setTimeout(() => setCopiedCode(null), 2000) } const openWhatsApp = (message?: string) => { const encodedMessage = message ? encodeURIComponent(message) : "" const url = `${whatsappLink}${message ? `?text=${encodedMessage}` : ""}` window.open(url, "_blank") } return (

{/* Header */}

WhatsApp Booking

AI-powered healthcare assistant

{/* WhatsApp Number */}

MediCheck WhatsApp

{whatsappNumber}

{/* Main Content */}

{/* How it Works */} How WhatsApp Booking Works

Send a Code

Use quick codes like "0001" for instant booking

AI Responds

Get instant replies with available options

Confirm Booking

Simple replies to complete your appointment

{/* Quick Commands */} Quick Command Codes {quickCommands.map((command, index) => (

{command.code} {command.description}

Example: {command.example}

))} {/* Sample Conversation */} Sample Conversation

{chatHistory.map((message, index) => (

{message.message}

{message.time}

))}

{/* Quick Start */}

Ready to Get Started?

Send "0001" to our WhatsApp number to book your first appointment instantly

) } [V0_FILE]typescriptreact:file="app/whatsapp/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/map/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowLeft, MapPin, Navigation, Phone, Clock, Star, Search, Locate } from "lucide-react" import Link from "next/link" // Mock data for nearby locations const nearbyLocations = [ { id: 1, name: "Apollo Hospital", type: "hospital", address: "Sarita Vihar, New Delhi", distance: "1.2 km", estimatedTime: "4 mins", rating: 4.8, phone: "+91-11-2692-5858", coordinates: { lat: 28.5355, lng: 77.291 }, specialties: ["Cardiology", "Emergency", "Trauma"], status: "Open 24/7", }, { id: 2, name: "Apollo Pharmacy", type: "pharmacy", address: "Nehru Place, New Delhi", distance: "0.8 km", estimatedTime: "3 mins", rating: 4.5, phone: "+91-11-2644-2200", coordinates: { lat: 28.5478, lng: 77.291 }, medicines: ["Paracetamol", "Amoxicillin", "Cetirizine"], status: "Open until 11 PM", }, { id: 3, name: "Max Super Speciality Hospital", type: "hospital", address: "Saket, New Delhi", distance: "2.1 km", estimatedTime: "7 mins", rating: 4.6, phone: "+91-11-2651-5050", coordinates: { lat: 28.5244, lng: 77.2066 }, specialties: ["Neurology", "Orthopedic", "Emergency"], status: "Open 24/7", }, { id: 4, name: "MedPlus Pharmacy", type: "pharmacy", address: "Lajpat Nagar, New Delhi", distance: "1.5 km", estimatedTime: "5 mins", rating: 4.3, phone: "+91-11-2984-4400", coordinates: { lat: 28.5677, lng: 77.243 }, medicines: ["Metformin", "Insulin", "Blood pressure meds"], status: "Open until 10 PM", }, { id: 5, name: "Fortis Hospital", type: "hospital", address: "Vasant Kunj, New Delhi", distance: "3.5 km", estimatedTime: "12 mins", rating: 4.7, phone: "+91-11-4277-6222", coordinates: { lat: 28.5167, lng: 77.15 }, specialties: ["Emergency", "Cardiology", "Pediatrics"], status: "Open 24/7", }, ] const filterOptions = ["All", "Hospitals", "Pharmacies", "Open Now", "Emergency"] export default function MapPage() { const [searchQuery, setSearchQuery] = useState("") const [selectedFilter, setSelectedFilter] = useState("All") const [userLocation, setUserLocation] = useState<{ lat: number; lng: number } | null>(null) const [selectedLocation, setSelectedLocation] = useState(null) useEffect(() => { // Simulate getting user location if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { setUserLocation({ lat: position.coords.latitude, lng: position.coords.longitude, }) }, (error) => { console.log("Location access denied") // Use default Delhi location setUserLocation({ lat: 28.5355, lng: 77.291 }) }, ) } }, []) const filteredLocations = nearbyLocations.filter((location) => { const matchesSearch = location.name.toLowerCase().includes(searchQuery.toLowerCase()) || location.address.toLowerCase().includes(searchQuery.toLowerCase()) let matchesFilter = true if (selectedFilter === "Hospitals") matchesFilter = location.type === "hospital" else if (selectedFilter === "Pharmacies") matchesFilter = location.type === "pharmacy" else if (selectedFilter === "Open Now") matchesFilter = location.status.includes("Open") else if (selectedFilter === "Emergency") matchesFilter = location.type === "hospital" return matchesSearch && matchesFilter }) const openGoogleMaps = (location: (typeof nearbyLocations)[0]) => { const url = `https://www.google.com/maps/dir/?api=1&destination=${location.coordinates.lat},${location.coordinates.lng}&travelmode=driving` window.open(url, "_blank") } const getLocationIcon = (type: string) => { return type === "hospital" ? "🏥" : "💊" } const getStatusColor = (status: string) => { if (status.includes("24/7")) return "bg-secondary text-secondary-foreground" if (status.includes("Open")) return "bg-secondary text-secondary-foreground" return "bg-yellow-100 text-yellow-800" } return (

{/* Header */}

Nearby Locations

Find hospitals & pharmacies

{/* Search and Filter */}

setSearchQuery(e.target.value)} className="pl-10 text-base h-12 bg-input border-border" />

{/* Map Placeholder */}

Interactive Google Maps

Showing {filteredLocations.length} nearby locations

{/* Location Markers Overlay */}

{filteredLocations.slice(0, 3).map((location, index) => (

setSelectedLocation(location.id)} > {index + 1}

))}

{/* Location List */}

{filteredLocations.map((location, index) => (

{/* Location Info */}

{getLocationIcon(location.type)}

{location.name}

{location.address}

{location.distance}

{location.estimatedTime}

{location.rating}

{/* Status */}

{location.status} #{index + 1}

{/* Specialties/Medicines */} {location.type === "hospital" && location.specialties && (

{location.specialties.map((specialty, idx) => ( {specialty} ))}

)} {location.type === "pharmacy" && location.medicines && (

Available medicines:

{location.medicines.map((medicine, idx) => ( {medicine} ))}

)} {/* Action Buttons */}

))} {filteredLocations.length === 0 && (

No locations found

Try adjusting your search or filter options

)} {/* Location Services Info */}

Live Location Tracking

Real-time updates on traffic, wait times, and availability. Enable location services for the most accurate results.

) } [V0_FILE]typescriptreact:file="app/map/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/prescription-scanner/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Camera, Upload, Check, AlertCircle, MapPin, ShoppingCart, Eye } from "lucide-react" import Link from "next/link" // Mock OCR results const mockScanResults = [ { id: 1, name: "Paracetamol 500mg", dosage: "1 tablet twice daily", duration: "5 days", quantity: "10 tablets", available: true, price: 45, nearbyPharmacies: 3, }, { id: 2, name: "Amoxicillin 250mg", dosage: "1 capsule three times daily", duration: "7 days", quantity: "21 capsules", available: true, price: 120, nearbyPharmacies: 2, }, { id: 3, name: "Cetirizine 10mg", dosage: "1 tablet once daily", duration: "3 days", quantity: "3 tablets", available: false, price: 35, nearbyPharmacies: 1, }, ] export default function PrescriptionScannerPage() { const [scanStep, setScanStep] = useState<"upload" | "scanning" | "results">("upload") const [selectedImage, setSelectedImage] = useState(null) const [scanResults, setScanResults] = useState(mockScanResults) const fileInputRef = useRef(null) const handleImageUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => { setSelectedImage(e.target?.result as string) setScanStep("scanning") // Simulate AI processing setTimeout(() => { setScanStep("results") }, 3000) } reader.readAsDataURL(file) } } const handleCameraCapture = () => { // In a real app, this would open the camera fileInputRef.current?.click() } const handleRetake = () => { setSelectedImage(null) setScanStep("upload") setScanResults(mockScanResults) } const getAvailabilityStatus = (available: boolean, nearbyPharmacies: number) => { if (!available) return { text: "Out of Stock", color: "bg-destructive text-destructive-foreground" } if (nearbyPharmacies <= 1) return { text: "Limited Stock", color: "bg-yellow-100 text-yellow-800" } return { text: "Available", color: "bg-secondary text-secondary-foreground" } } return (

{/* Header */}

Scan Prescription

AI-powered medicine detection

{/* Main Content */}

{/* Upload Step */} {scanStep === "upload" && ( <>

Scan Your Prescription

Our AI will instantly read your prescription and find all medicines with real-time availability

{/* Tips */} Scanning Tips

Good Lighting

Ensure prescription is well-lit and clearly visible

Flat Surface

Place prescription on a flat, contrasting background

Full Prescription

Capture the entire prescription including doctor's signature

)} {/* Scanning Step */} {scanStep === "scanning" && ( {selectedImage && (

)}

AI is Reading Your Prescription

Analyzing text and identifying medicines...

Text recognition complete

Identifying medicines...

Checking availability...

)} {/* Results Step */} {scanStep === "results" && ( <>

Scan Complete!

Found {scanResults.length} medicines

{selectedImage && (

)} {/* Medicine Results */}

{scanResults.map((medicine) => { const status = getAvailabilityStatus(medicine.available, medicine.nearbyPharmacies) return (

{/* Medicine Info */}

{medicine.name}

Dosage: {medicine.dosage}

Duration: {medicine.duration}

Quantity: {medicine.quantity}

{/* Price and Availability */}

₹{medicine.price} {status.text}

{medicine.nearbyPharmacies} stores

{/* Action Buttons */}

) })}

{/* Summary Actions */}

Complete Order

Order all available medicines from the nearest pharmacy

{/* AI Insights */}

AI Health Insights

This prescription contains antibiotics. Remember to complete the full course even if you feel better. Cetirizine may cause drowsiness - avoid driving.

)}

) } [V0_FILE]typescriptreact:file="app/prescription-scanner/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/emergency/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Phone, MapPin, Clock, AlertTriangle, Navigation, Heart, Ambulance } from "lucide-react" import Link from "next/link" // Mock data for nearby hospitals const nearbyHospitals = [ { id: 1, name: "Apollo Hospital", distance: "1.2 km", estimatedTime: "4 mins", emergencyWaitTime: "8 mins", generalBeds: { available: 12, total: 45, occupied: 33 }, icuBeds: { available: 3, total: 15, occupied: 12 }, emergencyBeds: { available: 5, total: 8, occupied: 3 }, phone: "+91-11-2692-5858", rating: 4.8, specialties: ["Cardiology", "Emergency", "Trauma"], address: "Sector 26, Noida", bookingAvailable: true, }, { id: 2, name: "Max Super Speciality Hospital", distance: "2.1 km", estimatedTime: "7 mins", emergencyWaitTime: "15 mins", generalBeds: { available: 8, total: 60, occupied: 52 }, icuBeds: { available: 1, total: 20, occupied: 19 }, emergencyBeds: { available: 3, total: 10, occupied: 7 }, phone: "+91-11-2651-5050", rating: 4.6, specialties: ["Neurology", "Orthopedic", "Emergency"], address: "Sector 19, Noida", bookingAvailable: true, }, { id: 3, name: "Fortis Hospital", distance: "3.5 km", estimatedTime: "12 mins", emergencyWaitTime: "5 mins", generalBeds: { available: 15, total: 80, occupied: 65 }, icuBeds: { available: 4, total: 25, occupied: 21 }, emergencyBeds: { available: 7, total: 12, occupied: 5 }, phone: "+91-11-4277-6222", rating: 4.7, specialties: ["Emergency", "Cardiology", "Pediatrics"], address: "Sector 62, Noida", bookingAvailable: true, }, { id: 4, name: "Kailash Hospital", distance: "4.2 km", estimatedTime: "15 mins", emergencyWaitTime: "12 mins", generalBeds: { available: 22, total: 100, occupied: 78 }, icuBeds: { available: 6, total: 30, occupied: 24 }, emergencyBeds: { available: 4, total: 15, occupied: 11 }, phone: "+91-11-4567-8900", rating: 4.5, specialties: ["General Medicine", "Surgery", "Emergency"], address: "Sector 27, Noida", bookingAvailable: true, }, ] const emergencyContacts = [ { name: "Ambulance", number: "108", icon: Ambulance }, { name: "Police", number: "100", icon: AlertTriangle }, { name: "Fire", number: "101", icon: AlertTriangle }, { name: "Medical Emergency", number: "102", icon: Heart }, ] export default function EmergencyPage() { const [isEmergencyActive, setIsEmergencyActive] = useState(false) const [countdown, setCountdown] = useState(10) const [selectedHospital, setSelectedHospital] = useState(null) const [selectedBedType, setSelectedBedType] = useState("") useEffect(() => { let interval: NodeJS.Timeout if (isEmergencyActive && countdown > 0) { interval = setInterval(() => { setCountdown((prev) => prev - 1) }, 1000) } return () => clearInterval(interval) }, [isEmergencyActive, countdown]) const handleEmergencyCall = () => { setIsEmergencyActive(true) // In a real app, this would trigger location sharing and emergency contacts } const getBedStatusColor = (available: number, total: number) => { const percentage = (available / total) * 100 if (percentage === 0) return "bg-destructive text-destructive-foreground" if (percentage <= 20) return "bg-yellow-100 text-yellow-800" return "bg-secondary text-secondary-foreground" } const handleBedBooking = (hospitalId: number, bedType: string) => { setSelectedHospital(hospitalId) setSelectedBedType(bedType) } return (

{/* Header */}

Emergency Assistance

Immediate help & hospital bed booking

{/* Emergency Alert */} {isEmergencyActive && (

Emergency Alert Sent!

Your location has been shared with emergency contacts

{countdown > 0 ? countdown : "Connecting..."}

)}

{/* Main Content */}

{/* Emergency Call Button */} {!isEmergencyActive && (

Instantly alerts emergency contacts & shares your location

)} {/* Quick Emergency Numbers */} Emergency Numbers {emergencyContacts.map((contact, index) => ( ))} {/* Nearby Hospitals */} Nearby Hospitals & Bed Availability {nearbyHospitals.map((hospital) => (

{/* Hospital Info */}

{hospital.name}

{hospital.distance}

{hospital.estimatedTime}

{hospital.address}

{/* Emergency Wait Time */}

Emergency Wait Time {hospital.emergencyWaitTime}

Bed Availability & Booking

{/* General Beds */}

General Ward {hospital.generalBeds.available} available

Available: {hospital.generalBeds.available} Occupied: {hospital.generalBeds.occupied} Total: {hospital.generalBeds.total}

{/* ICU Beds */}

ICU {hospital.icuBeds.available} available

Available: {hospital.icuBeds.available} Occupied: {hospital.icuBeds.occupied} Total: {hospital.icuBeds.total}

{/* Emergency Beds */}

Emergency {hospital.emergencyBeds.available} available

Available: {hospital.emergencyBeds.available} Occupied: {hospital.emergencyBeds.occupied} Total: {hospital.emergencyBeds.total}

{/* Specialties */}

{hospital.specialties.map((specialty, index) => ( {specialty} ))}

{/* Action Buttons */}

))} {/* AI Emergency Insights */}

AI Emergency Insights

Fortis Hospital has the most available beds (26 total) and shortest emergency wait time (5 mins). Kailash Hospital has the highest general bed availability (22 beds).

{selectedHospital && (

Book Hospital Bed

{(() => { const hospital = nearbyHospitals.find((h) => h.id === selectedHospital) if (!hospital) return null return (

{hospital.name}

{hospital.address}

{hospital.distance} • {hospital.estimatedTime}

Bed Type: {selectedBedType.toUpperCase()}

Available Beds: {selectedBedType === "general" && hospital.generalBeds.available} {selectedBedType === "icu" && hospital.icuBeds.available} {selectedBedType === "emergency" && hospital.emergencyBeds.available}

Estimated Cost: {selectedBedType === "general" && "₹2,500/day"} {selectedBedType === "icu" && "₹8,500/day"} {selectedBedType === "emergency" && "₹1,500/day"}

Advance Payment: {selectedBedType === "general" && "₹5,000"} {selectedBedType === "icu" && "₹15,000"} {selectedBedType === "emergency" && "₹3,000"}

Booking confirmation will be sent via SMS. Hospital will hold the bed for 2 hours.

) })()}

)}

) } [V0_FILE]png:file="public/placeholder-ocf87.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-p5uee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Calendar, Pill, Phone, MapPin, Clock, Heart, Search, Camera, MessageCircle, Navigation, Building2, CreditCard, Bell, Star, Users, User, Mail, Lock, MessageSquare, X, AlertCircle, CheckCircle, FileText, TestTube, Video, Bot, Folder, } from "lucide-react" export default function MediCheckHome() { const [searchQuery, setSearchQuery] = useState("") const [showOPBooking, setShowOPBooking] = useState(false) const [selectedHospital, setSelectedHospital] = useState(null) const [selectedDate, setSelectedDate] = useState("") const [selectedTime, setSelectedTime] = useState("") const [showPayment, setShowPayment] = useState(false) const [hospitalSearch, setHospitalSearch] = useState("") const [showSearchResults, setShowSearchResults] = useState(false) const [showLogin, setShowLogin] = useState(false) const [isLogin, setIsLogin] = useState(true) const [isLoggedIn, setIsLoggedIn] = useState(false) const [showProfile, setShowProfile] = useState(false) const [loginData, setLoginData] = useState({ email: "", password: "", name: "" }) const [showSuccessModal, setShowSuccessModal] = useState(false) const [successMessage, setSuccessMessage] = useState("") useEffect(() => { const savedLoginStatus = localStorage.getItem("medicheck_logged_in") if (savedLoginStatus === "true") { setIsLoggedIn(true) } }, []) const userProfile = { name: "Nandha", gender: "Male", age: 20, email: "nandha@example.com", phone: "+91 98765 43214", location: "Chennai, Tamil Nadu", } const handleButtonClick = (action) => { if (!isLoggedIn) { setShowLogin(true) return } action() } const handleAuth = () => { if (isLogin) { if (loginData.email && loginData.password) { setIsLoggedIn(true) localStorage.setItem("medicheck_logged_in", "true") setShowLogin(false) setSuccessMessage("Welcome back! Login successful.") setShowSuccessModal(true) setTimeout(() => setShowSuccessModal(false), 3000) } } else { if (loginData.name && loginData.email && loginData.password) { setIsLoggedIn(true) localStorage.setItem("medicheck_logged_in", "true") setShowLogin(false) setSuccessMessage("Account created successfully! Welcome to MediCheck.") setShowSuccessModal(true) setTimeout(() => setShowSuccessModal(false), 3000) } } } const searchData = { doctors: [ { id: 1, name: "Dr. Priya Sharma", specialty: "Cardiologist", hospital: "Apollo Hospital", type: "doctor" }, { id: 2, name: "Dr. Rajesh Kumar", specialty: "General Physician", hospital: "Max Healthcare", type: "doctor" }, { id: 3, name: "Dr. Anita Patel", specialty: "Pediatrician", hospital: "Fortis Hospital", type: "doctor" }, { id: 4, name: "Dr. Suresh Reddy", specialty: "Orthopedic", hospital: "MIOT Hospital", type: "doctor" }, ], medicines: [ { id: 1, name: "Paracetamol", category: "Pain Relief", type: "medicine" }, { id: 2, name: "Amoxicillin", category: "Antibiotic", type: "medicine" }, { id: 3, name: "Omeprazole", category: "Gastric", type: "medicine" }, { id: 4, name: "Metformin", category: "Diabetes", type: "medicine" }, ], hospitals: [ { id: 1, name: "Apollo Hospital", location: "Greams Road, Chennai", type: "hospital" }, { id: 2, name: "Fortis Hospital", location: "Vadapalani, Chennai", type: "hospital" }, { id: 3, name: "Max Healthcare", location: "Saket, Delhi", type: "hospital" }, { id: 4, name: "MIOT Hospital", location: "Manapakkam, Chennai", type: "hospital" }, ], } const getSearchResults = () => { if (!searchQuery.trim()) return [] const query = searchQuery.toLowerCase() const results = [] searchData.doctors.forEach((doctor) => { if ( doctor.name.toLowerCase().includes(query) || doctor.specialty.toLowerCase().includes(query) || doctor.hospital.toLowerCase().includes(query) ) { results.push(doctor) } }) searchData.medicines.forEach((medicine) => { if (medicine.name.toLowerCase().includes(query) || medicine.category.toLowerCase().includes(query)) { results.push(medicine) } }) searchData.hospitals.forEach((hospital) => { if (hospital.name.toLowerCase().includes(query) || hospital.location.toLowerCase().includes(query)) { results.push(hospital) } }) return results } const searchResults = getSearchResults() const nearbyHospitals = [ { id: 1, name: "Apollo Hospital", distance: "0.8 km", rating: 4.8, waitTime: "15 mins", queueCount: 12, address: "Greams Road, Chennai", specialties: ["Cardiology", "Neurology", "Orthopedics"], opFee: 500, }, { id: 2, name: "Fortis Hospital", distance: "1.2 km", rating: 4.6, waitTime: "25 mins", queueCount: 18, address: "Vadapalani, Chennai", specialties: ["General Medicine", "Pediatrics", "Gynecology"], opFee: 400, }, { id: 3, name: "MIOT Hospital", distance: "2.1 km", rating: 4.7, waitTime: "20 mins", queueCount: 15, address: "Manapakkam, Chennai", specialties: ["Oncology", "Gastroenterology", "Urology"], opFee: 600, }, ] const timeSlots = [ "09:00 AM", "09:30 AM", "10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM", "02:00 PM", "02:30 PM", "03:00 PM", "03:30 PM", "04:00 PM", "04:30 PM", ] const filteredHospitals = nearbyHospitals.filter( (hospital) => hospital.name.toLowerCase().includes(hospitalSearch.toLowerCase()) || hospital.specialties.some((specialty) => specialty.toLowerCase().includes(hospitalSearch.toLowerCase())), ) const handleBookingConfirmation = () => { setSuccessMessage( `Booking confirmed! You will receive a notification 10 minutes before your appointment at ${selectedTime}. Estimated wait time: ${selectedHospital.waitTime}`, ) setShowSuccessModal(true) setTimeout(() => setShowSuccessModal(false), 4000) setShowOPBooking(false) setSelectedHospital(null) setSelectedDate("") setSelectedTime("") setShowPayment(false) } if (showOPBooking) { return (

OP Booking

{!selectedHospital ? (

setHospitalSearch(e.target.value)} className="pl-10 text-base h-12" />

Nearby Hospitals

{filteredHospitals.map((hospital) => ( setSelectedHospital(hospital)} >

{hospital.name}

{hospital.address}

{hospital.distance}

{hospital.rating}

Wait: {hospital.waitTime}

{hospital.queueCount} in queue

{hospital.specialties.slice(0, 2).map((specialty) => ( {specialty} ))} {hospital.specialties.length > 2 && ( +{hospital.specialties.length - 2} more )}

OP Fee: ₹{hospital.opFee}

))}

) : !showPayment ? (

Selected Hospital

{selectedHospital.name}

{selectedHospital.address}

Wait: {selectedHospital.waitTime} Fee: ₹{selectedHospital.opFee}

Select Date setSelectedDate(e.target.value)} min={new Date().toISOString().split("T")[0]} className="text-base h-12" /> {selectedDate && ( Available Time Slots

{timeSlots.map((time) => ( ))}

)} {selectedTime && (

AI Estimation

Based on current queue ({selectedHospital.queueCount} patients) and historical data:

• Estimated wait time: {selectedHospital.waitTime}
• You'll receive a notification 10 minutes before your turn
• Appointment duration: ~15-20 minutes

)} {selectedDate && selectedTime && ( )}

) : (

Booking Summary

Hospital: {selectedHospital.name}

Date: {selectedDate}

Time: {selectedTime}

Estimated Wait: {selectedHospital.waitTime}

Total Amount: ₹{selectedHospital.opFee}

Payment Options

)}

) } return (

{/* Header */}

MediCheck

Your Healthcare Assistant

{isLoggedIn ? ( ) : ( )} Online

{/* Search Bar */}

{ setSearchQuery(e.target.value) setShowSearchResults(e.target.value.trim().length > 0) }} className="pl-10 text-base h-12 bg-input border-border" /> {showSearchResults && searchResults.length > 0 && (

{searchResults.map((result) => (

{ if (result.type === "doctor") { handleButtonClick(() => (window.location.href = "/booking")) } else if (result.type === "medicine") { handleButtonClick(() => (window.location.href = "/medicine")) } else if (result.type === "hospital") { handleButtonClick(() => setShowOPBooking(true)) } setShowSearchResults(false) setSearchQuery("") }} >

{result.type === "doctor" && } {result.type === "medicine" && } {result.type === "hospital" && }

{result.name}

{result.type === "doctor" && `${result.specialty} • ${result.hospital}`} {result.type === "medicine" && result.category} {result.type === "hospital" && result.location}

{result.type}

))}

)} {showSearchResults && searchQuery.trim() && searchResults.length === 0 && (

No results found for "{searchQuery}"

)}

{showSearchResults &&

setShowSearchResults(false)} />} {/* Main Content */}

{/* Emergency Button */}

Instant access to nearby hospitals & ambulances

{/* OP Booking as primary feature */}

AI-powered scheduling with real-time wait times

{/* Quick Actions */}

handleButtonClick(() => setShowOPBooking(true))} >

OP Booking

Book hospital slots

handleButtonClick(() => (window.location.href = "/booking"))} >

Find Doctor

By specialty

handleButtonClick(() => (window.location.href = "/medicine"))} >

Medicine

Order & track

handleButtonClick(() => (window.location.href = "/emergency"))} >

Emergency

Get help now

Healthcare Services

handleButtonClick(() => (window.location.href = "/consultation"))} >

Video Consultation

Consult doctors online from home

handleButtonClick(() => (window.location.href = "/lab-tests"))} >

Lab Tests

Book blood tests & health checkups

handleButtonClick(() => (window.location.href = "/prescriptions"))} >

My Prescriptions

View & manage e-prescriptions

handleButtonClick(() => (window.location.href = "/health-vault"))} >

Health Vault

Store all your medical records securely

handleButtonClick(() => (window.location.href = "/ai-assistant"))} >

AI Health Assistant

Symptom checker & health tips

{/* Additional Features */}

Quick Tools

handleButtonClick(() => (window.location.href = "/prescription-scanner"))} >

Scan Prescription

AI reads & finds medicines instantly

handleButtonClick(() => (window.location.href = "/whatsapp"))} >

WhatsApp Booking

Send "0001" to book appointments

handleButtonClick(() => (window.location.href = "/map"))} >

Track & Navigate

Live location of doctors & pharmacies

{/* Status Indicators */} Live Status

Nearby Hospitals 12 Available

Pharmacies Open 8 Open Now

Emergency Response Active

{/* Bottom Navigation */}

{/* Login Modal */} {showLogin && (

{isLogin ? "Welcome Back" : "Join MediCheck"}

{isLogin ? "Sign in to access your healthcare dashboard" : "Create your account to get started"}

{!isLogin && (

Full Name setLoginData({ ...loginData, name: e.target.value })} className="text-base h-12 border-border focus:border-primary" />

)}

Email Address

setLoginData({ ...loginData, email: e.target.value })} className="pl-10 text-base h-12 border-border focus:border-primary" />

Password

setLoginData({ ...loginData, password: e.target.value })} className="pl-10 text-base h-12 border-border focus:border-primary" />

)} {/* Success Modal */} {showSuccessModal && (

Success!

{successMessage}

)} {/* Profile Modal */} {showProfile && (

Profile

Name

{userProfile.name}

Gender

{userProfile.gender}

Age

{userProfile.age} years

{userProfile.email}

Phone

{userProfile.phone}

Location

{userProfile.location}

)}

) } [V0_FILE]typescriptreact:file="app/medicine/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowLeft, Search, MapPin, Pill, Navigation, Phone, Camera, ShoppingCart, AlertCircle } from "lucide-react" import Link from "next/link" import Textarea from "@/components/ui/textarea" const medicines = [ { id: 1, name: "Paracetamol 500mg", genericName: "Acetaminophen", manufacturer: "Cipla", price: 45, category: "Pain Relief", inStock: true, totalStock: 156, nearbyPharmacies: [ { name: "Apollo Pharmacy", distance: "0.8 km", price: 45, stock: 25, address: "Sector 18, Noida", phone: "+91-120-4567890", openUntil: "11:00 PM", }, { name: "MedPlus", distance: "1.2 km", price: 42, stock: 18, address: "City Centre Mall, Noida", phone: "+91-120-4567891", openUntil: "10:30 PM", }, { name: "Fortis Pharmacy", distance: "1.5 km", price: 47, stock: 32, address: "Fortis Hospital, Noida", phone: "+91-120-4567892", openUntil: "24 Hours", }, { name: "Max Pharmacy", distance: "2.1 km", price: 44, stock: 12, address: "Max Hospital, Noida", phone: "+91-120-4567893", openUntil: "24 Hours", }, { name: "1mg Pharmacy", distance: "2.8 km", price: 43, stock: 69, address: "DLF Mall, Noida", phone: "+91-120-4567894", openUntil: "9:00 PM", }, ], }, { id: 2, name: "Amoxicillin 250mg", genericName: "Amoxicillin", manufacturer: "Sun Pharma", price: 120, category: "Antibiotic", inStock: true, totalStock: 89, nearbyPharmacies: [ { name: "Fortis Pharmacy", distance: "1.5 km", price: 120, stock: 15, address: "Fortis Hospital, Noida", phone: "+91-120-4567892", openUntil: "24 Hours", }, { name: "Max Pharmacy", distance: "2.1 km", price: 115, stock: 8, address: "Max Hospital, Noida", phone: "+91-120-4567893", openUntil: "24 Hours", }, { name: "Apollo Pharmacy", distance: "0.8 km", price: 125, stock: 22, address: "Sector 18, Noida", phone: "+91-120-4567890", openUntil: "11:00 PM", }, { name: "MedPlus", distance: "1.2 km", price: 118, stock: 6, address: "City Centre Mall, Noida", phone: "+91-120-4567891", openUntil: "10:30 PM", }, { name: "Netmeds", distance: "3.2 km", price: 122, stock: 38, address: "Sector 62, Noida", phone: "+91-120-4567895", openUntil: "10:00 PM", }, ], }, { id: 3, name: "Cetirizine 10mg", genericName: "Cetirizine HCl", manufacturer: "Dr. Reddy's", price: 35, category: "Allergy", inStock: true, totalStock: 203, nearbyPharmacies: [ { name: "1mg Pharmacy", distance: "2.8 km", price: 35, stock: 45, address: "DLF Mall, Noida", phone: "+91-120-4567894", openUntil: "9:00 PM", }, { name: "Netmeds", distance: "3.2 km", price: 38, stock: 67, address: "Sector 62, Noida", phone: "+91-120-4567895", openUntil: "10:00 PM", }, { name: "Apollo Pharmacy", distance: "0.8 km", price: 36, stock: 28, address: "Sector 18, Noida", phone: "+91-120-4567890", openUntil: "11:00 PM", }, { name: "MedPlus", distance: "1.2 km", price: 34, stock: 41, address: "City Centre Mall, Noida", phone: "+91-120-4567891", openUntil: "10:30 PM", }, { name: "Max Pharmacy", distance: "2.1 km", price: 37, stock: 22, address: "Max Hospital, Noida", phone: "+91-120-4567893", openUntil: "24 Hours", }, ], }, { id: 4, name: "Metformin 500mg", genericName: "Metformin HCl", manufacturer: "Lupin", price: 85, category: "Diabetes", inStock: true, totalStock: 134, nearbyPharmacies: [ { name: "Apollo Pharmacy", distance: "0.8 km", price: 85, stock: 35, address: "Sector 18, Noida", phone: "+91-120-4567890", openUntil: "11:00 PM", }, { name: "MedPlus", distance: "1.2 km", price: 82, stock: 29, address: "City Centre Mall, Noida", phone: "+91-120-4567891", openUntil: "10:30 PM", }, { name: "Fortis Pharmacy", distance: "1.5 km", price: 88, stock: 18, address: "Fortis Hospital, Noida", phone: "+91-120-4567892", openUntil: "24 Hours", }, { name: "1mg Pharmacy", distance: "2.8 km", price: 83, stock: 52, address: "DLF Mall, Noida", phone: "+91-120-4567894", openUntil: "9:00 PM", }, ], }, ] const categories = [ "All Categories", "Pain Relief", "Antibiotic", "Allergy", "Diabetes", "Heart", "Blood Pressure", "Vitamins", ] export default function MedicinePage() { const [searchQuery, setSearchQuery] = useState("") const [selectedCategory, setSelectedCategory] = useState("All Categories") const [selectedMedicine, setSelectedMedicine] = useState(null) const [showAllStores, setShowAllStores] = useState(null) const [cart, setCart] = useState([]) const [showCart, setShowCart] = useState(false) const [selectedPharmacy, setSelectedPharmacy] = useState(null) const [orderQuantity, setOrderQuantity] = useState(1) const [deliveryAddress, setDeliveryAddress] = useState("") const [showCheckout, setShowCheckout] = useState(false) const filteredMedicines = medicines.filter((medicine) => { const matchesSearch = medicine.name.toLowerCase().includes(searchQuery.toLowerCase()) || medicine.genericName.toLowerCase().includes(searchQuery.toLowerCase()) || medicine.manufacturer.toLowerCase().includes(searchQuery.toLowerCase()) const matchesCategory = selectedCategory === "All Categories" || medicine.category === selectedCategory return matchesSearch && matchesCategory }) const getStockStatus = (totalStock: number, inStock: boolean) => { if (!inStock || totalStock === 0) return { text: "Out of Stock", color: "bg-destructive text-destructive-foreground" } if (totalStock <= 20) return { text: `Low Stock: ${totalStock} total`, color: "bg-yellow-100 text-yellow-800" } return { text: `In Stock: ${totalStock} total available`, color: "bg-secondary text-secondary-foreground" } } const addToCart = (medicine, pharmacy, quantity) => { const cartItem = { id: Date.now(), medicine, pharmacy, quantity, totalPrice: pharmacy.price * quantity, } setCart([...cart, cartItem]) setSelectedMedicine(null) setSelectedPharmacy(null) setOrderQuantity(1) } const removeFromCart = (itemId) => { setCart(cart.filter((item) => item.id !== itemId)) } const getTotalCartValue = () => { return cart.reduce((total, item) => total + item.totalPrice, 0) } const getCartItemCount = () => { return cart.reduce((total, item) => total + item.quantity, 0) } return (

{/* Header */}

Find Medicine

Real-time availability & prices

{/* Search and Filter */}

setSearchQuery(e.target.value)} className="pl-10 text-base h-12 bg-input border-border" />

{/* Medicine List */}

{filteredMedicines.map((medicine) => { const stockStatus = getStockStatus(medicine.totalStock, medicine.inStock) return (

{/* Medicine Info */}

{medicine.name}

{medicine.genericName}

{medicine.manufacturer}

{/* Price and Stock */}

₹{medicine.price} {medicine.category}

{stockStatus.text}

Available at {medicine.nearbyPharmacies.length} stores:

{(showAllStores === medicine.id ? medicine.nearbyPharmacies : medicine.nearbyPharmacies.slice(0, 2) ).map((pharmacy, index) => (

{pharmacy.name}

{pharmacy.distance}

₹{pharmacy.price}

{pharmacy.stock > 0 ? ( {pharmacy.stock} in stock ) : ( Out of stock )}

{showAllStores === medicine.id && (

📍 {pharmacy.address}

📞 {pharmacy.phone}

🕒 Open until {pharmacy.openUntil}

)}

))}

{/* Action Buttons */}

) })} {filteredMedicines.length === 0 && (

No medicines found

Try adjusting your search or category filter

)} {/* AI Prediction Alert */}

AI Stock Prediction

Based on seasonal trends, Paracetamol demand may increase by 40% next week. Apollo Pharmacy has the highest stock (25 units) in your area.

{/* Order Modal */} {selectedMedicine && (

Select Pharmacy & Quantity

Quantity

{orderQuantity}

{/* Pharmacy Options */}

Choose Pharmacy {medicines .find((m) => m.id === selectedMedicine) ?.nearbyPharmacies.map((pharmacy, index) => ( ))}

Free delivery for orders above ₹200

)} {showCart && (

Your Cart ({getCartItemCount()} items)

{cart.length === 0 ? (

Your cart is empty

Add medicines to get started

) : (

{cart.map((item) => (

{item.medicine.name}

{item.pharmacy.name}

{item.pharmacy.distance}

Qty: {item.quantity} × ₹{item.pharmacy.price}

₹{item.totalPrice}

))}

)}

{cart.length > 0 && (

Total ₹{getTotalCartValue()}

{getTotalCartValue() < 200 && (

Add ₹{200 - getTotalCartValue()} more for free delivery

)}

)} {showCheckout && (

Checkout

{/* Delivery Address */}

Delivery Address

setDeliveryAddress(e.target.value)}
                  className="min-h-[80px]"
                />
              </div>

{/* Order Summary */}
              <div>
                <h4 className="font-semibold text-card-foreground mb-3">Order Summary</h4>
                <div className="space-y-2">
                  {cart.map((item) => (
                    <div key={item.id} className="flex items-center justify-between text-sm">
                      <span className="text-muted-foreground">
                        {item.medicine.name} × {item.quantity}
                      </span>
                      <span className="font-medium">₹{item.totalPrice}</span>
                    </div>
                  ))}
                  <hr />
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">Subtotal</span>
                    <span className="font-medium">₹{getTotalCartValue()}</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">Delivery Fee</span>
                    <span className="font-medium">{getTotalCartValue() >= 200 ? "FREE" : "₹50"}</span>
                  </div>
                  <hr />
                  <div className="flex items-center justify-between">
                    <span className="font-semibold text-card-foreground">Total</span>
                    <span className="font-bold text-primary">
                      ₹{getTotalCartValue() + (getTotalCartValue() >= 200 ? 0 : 50)}
                    </span>
                  </div>
                </div>
              </div>

{/* Payment Options */}
              <div>
                <h4 className="font-semibold text-card-foreground mb-3">Payment Method</h4>
                <div className="space-y-2">
                  <Button variant="outline" className="w-full justify-start h-12 bg-transparent">
                    💳 Credit/Debit Card
                  </Button>
                  <Button variant="outline" className="w-full justify-start h-12 bg-transparent">
                    📱 UPI Payment
                  </Button>
                  <Button variant="outline" className="w-full justify-start h-12 bg-transparent">
                    💰 Cash on Delivery
                  </Button>
                </div>
              </div>
            </div>

<div className="p-6 border-t border-border">
              <Button
                className="w-full h-12 text-base"
                disabled={!deliveryAddress.trim()}
                onClick={() => {
                  // Handle order placement
                  setShowCheckout(false)
                  setCart([])
                  // Show success message
                }}
              >
                Place Order - ₹{getTotalCartValue() + (getTotalCartValue() >= 200 ? 0 : 50)}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { Suspense } from "react"
import "./globals.css"

export const metadata: Metadata = {
  title: "MediCheck - Smart Healthcare Assistant",
  description: "AI-powered healthcare app for OPD booking, medicine tracking, and emergency assistance in India",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <Suspense fallback={null}>{children}</Suspense>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]sql:file="scripts/01-create-database-schema.sql" isMerged="true"
-- Creating comprehensive database schema for MediCheck healthcare app
-- Users table for authentication and profiles
CREATE TABLE IF NOT EXISTS users (
    id SERIAL PRIMARY KEY,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    name VARCHAR(255) NOT NULL,
    phone VARCHAR(20),
    gender VARCHAR(10),
    age INTEGER,
    location TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Hospitals table
CREATE TABLE IF NOT EXISTS hospitals (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    address TEXT NOT NULL,
    phone VARCHAR(20),
    email VARCHAR(255),
    latitude DECIMAL(10, 8),
    longitude DECIMAL(11, 8),
    rating DECIMAL(3, 2) DEFAULT 0,
    total_beds INTEGER DEFAULT 0,
    available_beds INTEGER DEFAULT 0,
    emergency_contact VARCHAR(20),
    specialties TEXT[], -- Array of specialties
    op_fee INTEGER DEFAULT 500,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Doctors table
CREATE TABLE IF NOT EXISTS doctors (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255),
    phone VARCHAR(20) NOT NULL,
    specialty VARCHAR(255) NOT NULL,
    degrees TEXT[], -- Array of degrees
    experience_years INTEGER DEFAULT 0,
    hospital_id INTEGER REFERENCES hospitals(id),
    consultation_fee INTEGER DEFAULT 500,
    rating DECIMAL(3, 2) DEFAULT 0,
    profile_image_url TEXT,
    available_days TEXT[], -- Array of days like ['Monday', 'Tuesday']
    available_times TEXT[], -- Array of time slots
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Pharmacies table
CREATE TABLE IF NOT EXISTS pharmacies (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    address TEXT NOT NULL,
    phone VARCHAR(20),
    latitude DECIMAL(10, 8),
    longitude DECIMAL(11, 8),
    is_24_hours BOOLEAN DEFAULT FALSE,
    opening_time TIME,
    closing_time TIME,
    rating DECIMAL(3, 2) DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Medicines table
CREATE TABLE IF NOT EXISTS medicines (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    generic_name VARCHAR(255),
    category VARCHAR(255),
    manufacturer VARCHAR(255),
    description TEXT,
    dosage_form VARCHAR(100), -- tablet, capsule, syrup, etc.
    strength VARCHAR(100),
    price DECIMAL(10, 2),
    requires_prescription BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Pharmacy inventory table
CREATE TABLE IF NOT EXISTS pharmacy_inventory (
    id SERIAL PRIMARY KEY,
    pharmacy_id INTEGER REFERENCES pharmacies(id),
    medicine_id INTEGER REFERENCES medicines(id),
    stock_quantity INTEGER DEFAULT 0,
    price DECIMAL(10, 2),
    expiry_date DATE,
    batch_number VARCHAR(100),
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(pharmacy_id, medicine_id, batch_number)
);

-- Appointments table
CREATE TABLE IF NOT EXISTS appointments (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id),
    doctor_id INTEGER REFERENCES doctors(id),
    hospital_id INTEGER REFERENCES hospitals(id),
    appointment_date DATE NOT NULL,
    appointment_time TIME NOT NULL,
    status VARCHAR(50) DEFAULT 'scheduled', -- scheduled, confirmed, completed, cancelled
    appointment_type VARCHAR(50) DEFAULT 'op', -- op, emergency, home_visit
    consultation_fee INTEGER,
    payment_status VARCHAR(50) DEFAULT 'pending', -- pending, paid, refunded
    payment_method VARCHAR(50),
    notes TEXT,
    queue_position INTEGER,
    estimated_wait_time INTEGER, -- in minutes
    notification_sent BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Home visit requests table
CREATE TABLE IF NOT EXISTS home_visits (
    id SERIAL PRIMARY KEY,
    appointment_id INTEGER REFERENCES appointments(id),
    patient_address TEXT NOT NULL,
    street_name VARCHAR(255),
    door_number VARCHAR(50),
    landmark TEXT,
    latitude DECIMAL(10, 8),
    longitude DECIMAL(11, 8),
    visit_fee INTEGER,
    travel_distance DECIMAL(5, 2), -- in km
    status VARCHAR(50) DEFAULT 'requested', -- requested, accepted, in_progress, completed
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Prescriptions table
CREATE TABLE IF NOT EXISTS prescriptions (
    id SERIAL PRIMARY KEY,
    appointment_id INTEGER REFERENCES appointments(id),
    doctor_id INTEGER REFERENCES doctors(id),
    user_id INTEGER REFERENCES users(id),
    prescription_text TEXT,
    image_url TEXT, -- for scanned prescriptions
    medicines JSONB, -- structured medicine data
    instructions TEXT,
    valid_until DATE,
    status VARCHAR(50) DEFAULT 'active', -- active, expired, fulfilled
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Emergency requests table
CREATE TABLE IF NOT EXISTS emergency_requests (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id),
    emergency_type VARCHAR(100) NOT NULL,
    location_latitude DECIMAL(10, 8),
    location_longitude DECIMAL(11, 8),
    address TEXT,
    description TEXT,
    status VARCHAR(50) DEFAULT 'active', -- active, responded, resolved
    priority_level INTEGER DEFAULT 1, -- 1-5, 5 being highest
    assigned_hospital_id INTEGER REFERENCES hospitals(id),
    response_time TIMESTAMP,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Notifications table
CREATE TABLE IF NOT EXISTS notifications (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id),
    title VARCHAR(255) NOT NULL,
    message TEXT NOT NULL,
    type VARCHAR(50) DEFAULT 'info', -- info, appointment, emergency, medicine
    is_read BOOLEAN DEFAULT FALSE,
    scheduled_for TIMESTAMP,
    sent_at TIMESTAMP,
    data JSONB, -- additional structured data
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- WhatsApp integration table
CREATE TABLE IF NOT EXISTS whatsapp_sessions (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id),
    phone_number VARCHAR(20) NOT NULL,
    session_id VARCHAR(255) UNIQUE NOT NULL,
    status VARCHAR(50) DEFAULT 'active', -- active, expired
    last_message_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    context JSONB, -- conversation context
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    expires_at TIMESTAMP DEFAULT (CURRENT_TIMESTAMP + INTERVAL '24 hours')
);

-- Hospital queue management
CREATE TABLE IF NOT EXISTS hospital_queues (
    id SERIAL PRIMARY KEY,
    hospital_id INTEGER REFERENCES hospitals(id),
    doctor_id INTEGER REFERENCES doctors(id),
    current_queue_length INTEGER DEFAULT 0,
    average_wait_time INTEGER DEFAULT 15, -- in minutes
    last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(hospital_id, doctor_id)
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_users_email ON users(email);
CREATE INDEX IF NOT EXISTS idx_appointments_user_date ON appointments(user_id, appointment_date);
CREATE INDEX IF NOT EXISTS idx_appointments_doctor_date ON appointments(doctor_id, appointment_date);
CREATE INDEX IF NOT EXISTS idx_pharmacy_inventory_medicine ON pharmacy_inventory(medicine_id);
CREATE INDEX IF NOT EXISTS idx_notifications_user_unread ON notifications(user_id, is_read);
CREATE INDEX IF NOT EXISTS idx_emergency_requests_status ON emergency_requests(status);
CREATE INDEX IF NOT EXISTS idx_hospitals_location ON hospitals(latitude, longitude);
CREATE INDEX IF NOT EXISTS idx_pharmacies_location ON pharmacies(latitude, longitude);
[V0_FILE]sql:file="scripts/02-seed-sample-data.sql" isMerged="true"
-- Seeding sample data for MediCheck app testing
-- Insert sample hospitals
INSERT INTO hospitals (name, address, phone, latitude, longitude, rating, total_beds, available_beds, emergency_contact, specialties, op_fee) VALUES
('Apollo Hospital', 'Greams Road, Chennai, Tamil Nadu 600006', '+91-44-2829-3333', 13.0569, 80.2497, 4.8, 500, 45, '+91-44-2829-4444', ARRAY['Cardiology', 'Neurology', 'Orthopedics', 'Oncology'], 500),
('Fortis Hospital', 'Vadapalani, Chennai, Tamil Nadu 600026', '+91-44-3988-4444', 13.0389, 80.2095, 4.6, 300, 28, '+91-44-3988-5555', ARRAY['General Medicine', 'Pediatrics', 'Gynecology', 'Gastroenterology'], 400),
('MIOT Hospital', 'Manapakkam, Chennai, Tamil Nadu 600089', '+91-44-2249-7777', 12.9716, 80.1936, 4.7, 400, 35, '+91-44-2249-8888', ARRAY['Oncology', 'Gastroenterology', 'Urology', 'Nephrology'], 600),
('Max Healthcare', 'Saket, New Delhi 110017', '+91-11-2651-5050', 28.5245, 77.2066, 4.5, 350, 42, '+91-11-2651-6060', ARRAY['Cardiology', 'Neurosurgery', 'Orthopedics'], 550);

-- Insert sample doctors including Dr. Samaram
INSERT INTO doctors (name, email, phone, specialty, degrees, experience_years, hospital_id, consultation_fee, rating, available_days, available_times) VALUES
('Dr. Priya Sharma', 'priya.sharma@apollo.com', '+91-98765-43210', 'Cardiologist', ARRAY['MBBS', 'MD Cardiology', 'DM Interventional Cardiology'], 15, 1, 800, 4.9, ARRAY['Monday', 'Tuesday', 'Wednesday', 'Friday'], ARRAY['09:00', '10:00', '11:00', '14:00', '15:00']),
('Dr. Rajesh Kumar', 'rajesh.kumar@max.com', '+91-98765-43211', 'General Physician', ARRAY['MBBS', 'MD General Medicine'], 12, 4, 500, 4.7, ARRAY['Monday', 'Tuesday', 'Thursday', 'Friday', 'Saturday'], ARRAY['09:00', '09:30', '10:00', '10:30', '11:00']),
('Dr. Anita Patel', 'anita.patel@fortis.com', '+91-98765-43212', 'Pediatrician', ARRAY['MBBS', 'MD Pediatrics'], 10, 2, 600, 4.8, ARRAY['Monday', 'Wednesday', 'Thursday', 'Saturday'], ARRAY['09:00', '10:00', '11:00', '14:00', '15:00', '16:00']),
('Dr. Suresh Reddy', 'suresh.reddy@miot.com', '+91-98765-43213', 'Orthopedic', ARRAY['MBBS', 'MS Orthopedics'], 18, 3, 700, 4.6, ARRAY['Tuesday', 'Wednesday', 'Thursday', 'Friday'], ARRAY['09:00', '10:00', '11:00', '14:00', '15:00']),
('Dr. Samaram', 'samaram@apollo.com', '+91-98765-43214', 'General Medicine & Sexology', ARRAY['MBBS', 'MD General Medicine', 'Diploma in Sexology'], 20, 1, 650, 4.8, ARRAY['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], ARRAY['09:00', '09:30', '10:00', '10:30', '11:00', '14:00', '14:30', '15:00']);

-- Insert sample pharmacies
INSERT INTO pharmacies (name, address, phone, latitude, longitude, is_24_hours, opening_time, closing_time, rating) VALUES
('Apollo Pharmacy', 'Greams Road, Chennai', '+91-44-2829-5555', 13.0569, 80.2497, true, '00:00', '23:59', 4.5),
('MedPlus', 'Vadapalani, Chennai', '+91-44-3988-6666', 13.0389, 80.2095, false, '08:00', '22:00', 4.3),
('Fortis Pharmacy', 'Manapakkam, Chennai', '+91-44-2249-9999', 12.9716, 80.1936, false, '07:00', '23:00', 4.4),
('Max Pharmacy', 'Saket, Delhi', '+91-11-2651-7070', 28.5245, 77.2066, true, '00:00', '23:59', 4.2);

-- Insert sample medicines
INSERT INTO medicines (name, generic_name, category, manufacturer, description, dosage_form, strength, price, requires_prescription) VALUES
('Paracetamol', 'Acetaminophen', 'Pain Relief', 'GSK', 'Pain and fever relief medication', 'Tablet', '500mg', 25.50, false),
('Amoxicillin', 'Amoxicillin', 'Antibiotic', 'Cipla', 'Broad-spectrum antibiotic', 'Capsule', '250mg', 85.00, true),
('Omeprazole', 'Omeprazole', 'Gastric', 'Dr. Reddys', 'Proton pump inhibitor for acid reflux', 'Capsule', '20mg', 45.75, true),
('Metformin', 'Metformin HCl', 'Diabetes', 'Sun Pharma', 'Type 2 diabetes medication', 'Tablet', '500mg', 32.00, true),
('Cetirizine', 'Cetirizine HCl', 'Antihistamine', 'Ranbaxy', 'Allergy relief medication', 'Tablet', '10mg', 18.50, false),
('Aspirin', 'Acetylsalicylic Acid', 'Pain Relief', 'Bayer', 'Pain relief and blood thinner', 'Tablet', '75mg', 22.00, false);

-- Insert pharmacy inventory
INSERT INTO pharmacy_inventory (pharmacy_id, medicine_id, stock_quantity, price, expiry_date, batch_number) VALUES
(1, 1, 500, 25.50, '2025-12-31', 'PAR001'),
(1, 2, 200, 85.00, '2025-06-30', 'AMX001'),
(1, 3, 150, 45.75, '2025-09-15', 'OME001'),
(1, 4, 300, 32.00, '2025-11-20', 'MET001'),
(2, 1, 400, 26.00, '2025-12-31', 'PAR002'),
(2, 5, 250, 18.50, '2025-08-10', 'CET001'),
(2, 6, 180, 22.00, '2025-10-05', 'ASP001'),
(3, 2, 100, 87.00, '2025-06-30', 'AMX002'),
(3, 3, 120, 46.00, '2025-09-15', 'OME002'),
(3, 4, 200, 33.00, '2025-11-20', 'MET002');

-- Initialize hospital queues
INSERT INTO hospital_queues (hospital_id, doctor_id, current_queue_length, average_wait_time) VALUES
(1, 1, 12, 15),
(1, 5, 8, 12),
(2, 3, 18, 25),
(3, 4, 15, 20),
(4, 2, 10, 18);

-- Insert sample user (for testing)
INSERT INTO users (email, password_hash, name, phone, gender, age, location) VALUES
('nandha@example.com', '$2b$10$example_hash_here', 'Nandha', '+91-98765-43214', 'Male', 20, 'Chennai, Tamil Nadu');
[V0_FILE]typescriptreact:file="lib/auth.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import bcrypt from "bcryptjs"
import jwt from "jsonwebtoken"
import { DatabaseService } from "./database"
import { query } from "./database" // Declare the query variable

const JWT_SECRET = process.env.JWT_SECRET || "medicheck-secret-key-change-in-production"
const JWT_EXPIRES_IN = "7d"

export interface AuthUser {
  id: number
  email: string
  name: string
  phone?: string
  gender?: string
  age?: number
  location?: string
}

export interface LoginCredentials {
  email: string
  password: string
}

export interface RegisterData {
  name: string
  email: string
  password: string
  phone?: string
  gender?: string
  age?: number
  location?: string
}

export class AuthService {
  // Hash password
  static async hashPassword(password: string): Promise<string> {
    const saltRounds = 12
    return await bcrypt.hash(password, saltRounds)
  }

// Verify password
  static async verifyPassword(password: string, hashedPassword: string): Promise<boolean> {
    return await bcrypt.compare(password, hashedPassword)
  }

// Generate JWT token
  static generateToken(user: AuthUser): string {
    const payload = {
      id: user.id,
      email: user.email,
      name: user.name,
    }
    return jwt.sign(payload, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN })
  }

// Verify JWT token
  static verifyToken(token: string): AuthUser | null {
    try {
      const decoded = jwt.verify(token, JWT_SECRET) as any
      return {
        id: decoded.id,
        email: decoded.email,
        name: decoded.name,
      }
    } catch (error) {
      console.error("[v0] Token verification failed:", error)
      return null
    }
  }

// Register new user
  static async register(userData: RegisterData): Promise<{ user: AuthUser; token: string }> {
    try {
      // Check if user already exists
      const existingUser = await DatabaseService.getUserByEmail(userData.email)
      if (existingUser) {
        throw new Error("User already exists with this email")
      }

// Hash password
      const hashedPassword = await this.hashPassword(userData.password)

// Create user
      const newUser = await DatabaseService.createUser({
        ...userData,
        password_hash: hashedPassword,
      })

// Remove password from response
      const { password_hash, ...userWithoutPassword } = newUser as any
      const authUser: AuthUser = userWithoutPassword

// Generate token
      const token = this.generateToken(authUser)

console.log("[v0] User registered successfully:", authUser.email)
      return { user: authUser, token }
    } catch (error) {
      console.error("[v0] Registration error:", error)
      throw error
    }
  }

// Login user
  static async login(credentials: LoginCredentials): Promise<{ user: AuthUser; token: string }> {
    try {
      // Get user by email
      const user = await DatabaseService.getUserByEmail(credentials.email)
      if (!user) {
        throw new Error("Invalid email or password")
      }

// Verify password
      const isValidPassword = await this.verifyPassword(credentials.password, (user as any).password_hash)
      if (!isValidPassword) {
        throw new Error("Invalid email or password")
      }

// Remove password from response
      const { password_hash, ...userWithoutPassword } = user as any
      const authUser: AuthUser = userWithoutPassword

// Generate token
      const token = this.generateToken(authUser)

console.log("[v0] User logged in successfully:", authUser.email)
      return { user: authUser, token }
    } catch (error) {
      console.error("[v0] Login error:", error)
      throw error
    }
  }

// Get user profile
  static async getProfile(userId: number): Promise<AuthUser | null> {
    try {
      const user = await DatabaseService.getUserById(userId)
      if (!user) {
        return null
      }

// Remove password from response
      const { password_hash, ...userWithoutPassword } = user as any
      return userWithoutPassword
    } catch (error) {
      console.error("[v0] Get profile error:", error)
      throw error
    }
  }

// Update user profile
  static async updateProfile(userId: number, updateData: Partial<AuthUser>): Promise<AuthUser> {
    try {
      // Remove sensitive fields
      const { id, email, ...safeUpdateData } = updateData

const result = await query(
        `UPDATE users 
         SET name = COALESCE($2, name),
             phone = COALESCE($3, phone),
             gender = COALESCE($4, gender),
             age = COALESCE($5, age),
             location = COALESCE($6, location),
             updated_at = CURRENT_TIMESTAMP
         WHERE id = $1 
         RETURNING *`,
        [
          userId,
          safeUpdateData.name,
          safeUpdateData.phone,
          safeUpdateData.gender,
          safeUpdateData.age,
          safeUpdateData.location,
        ],
      )

if (result.rows.length === 0) {
        throw new Error("User not found")
      }

const { password_hash, ...userWithoutPassword } = result.rows[0]
      console.log("[v0] User profile updated:", userWithoutPassword.email)
      return userWithoutPassword
    } catch (error) {
      console.error("[v0] Update profile error:", error)
      throw error
    }
  }
}

// Middleware to verify authentication
export function verifyAuth(token: string): AuthUser | null {
  if (!token) {
    return null
  }

// Remove 'Bearer ' prefix if present
  const cleanToken = token.startsWith("Bearer ") ? token.slice(7) : token

return AuthService.verifyToken(cleanToken)
}

// Extract user from request headers
export function getUserFromRequest(request: Request): AuthUser | null {
  const authHeader = request.headers.get("authorization")
  if (!authHeader) {
    return null
  }

return verifyAuth(authHeader)
}
[V0_FILE]typescriptreact:file="app/api/auth/register/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { AuthService } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { name, email, password, phone, gender, age, location } = body

// Validate required fields
    if (!name || !email || !password) {
      return NextResponse.json({ error: "Name, email, and password are required" }, { status: 400 })
    }

// Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(email)) {
      return NextResponse.json({ error: "Invalid email format" }, { status: 400 })
    }

// Validate password strength
    if (password.length < 6) {
      return NextResponse.json({ error: "Password must be at least 6 characters long" }, { status: 400 })
    }

// Register user
    const result = await AuthService.register({
      name,
      email,
      password,
      phone,
      gender,
      age: age ? Number.parseInt(age) : undefined,
      location,
    })

console.log("[v0] User registration successful:", result.user.email)

return NextResponse.json({
      success: true,
      message: "Account created successfully",
      user: result.user,
      token: result.token,
    })
  } catch (error: any) {
    console.error("[v0] Registration API error:", error)

if (error.message === "User already exists with this email") {
      return NextResponse.json({ error: "An account with this email already exists" }, { status: 409 })
    }

return NextResponse.json({ error: "Registration failed. Please try again." }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/login/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { AuthService } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { email, password } = body

// Validate required fields
    if (!email || !password) {
      return NextResponse.json({ error: "Email and password are required" }, { status: 400 })
    }

// Login user
    const result = await AuthService.login({ email, password })

console.log("[v0] User login successful:", result.user.email)

return NextResponse.json({
      success: true,
      message: "Login successful",
      user: result.user,
      token: result.token,
    })
  } catch (error: any) {
    console.error("[v0] Login API error:", error)

if (error.message === "Invalid email or password") {
      return NextResponse.json({ error: "Invalid email or password" }, { status: 401 })
    }

return NextResponse.json({ error: "Login failed. Please try again." }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/profile/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { AuthService, getUserFromRequest } from "@/lib/auth"

export async function GET(request: NextRequest) {
  try {
    const user = getUserFromRequest(request)
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

const profile = await AuthService.getProfile(user.id)
    if (!profile) {
      return NextResponse.json({ error: "User not found" }, { status: 404 })
    }

return NextResponse.json({
      success: true,
      user: profile,
    })
  } catch (error: any) {
    console.error("[v0] Get profile API error:", error)
    return NextResponse.json({ error: "Failed to fetch profile" }, { status: 500 })
  }
}

export async function PUT(request: NextRequest) {
  try {
    const user = getUserFromRequest(request)
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

const body = await request.json()
    const { name, phone, gender, age, location } = body

const updatedProfile = await AuthService.updateProfile(user.id, {
      name,
      phone,
      gender,
      age: age ? Number.parseInt(age) : undefined,
      location,
    })

console.log("[v0] Profile update successful:", updatedProfile.email)

return NextResponse.json({
      success: true,
      message: "Profile updated successfully",
      user: updatedProfile,
    })
  } catch (error: any) {
    console.error("[v0] Update profile API error:", error)
    return NextResponse.json({ error: "Failed to update profile" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/verify/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUserFromRequest } from "@/lib/auth"

export async function GET(request: NextRequest) {
  try {
    const user = getUserFromRequest(request)

if (!user) {
      return NextResponse.json({ error: "Invalid or expired token" }, { status: 401 })
    }

return NextResponse.json({
      success: true,
      user: user,
      message: "Token is valid",
    })
  } catch (error: any) {
    console.error("[v0] Token verification API error:", error)
    return NextResponse.json({ error: "Token verification failed" }, { status: 401 })
  }
}
[V0_FILE]typescriptreact:file="app/api/doctors/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const { searchParams } = new URL(request.url)
    const search = searchParams.get("search")
    const hospitalId = searchParams.get("hospitalId")

let doctors = []

if (search) {
      // Search doctors by name, specialty, or hospital
      doctors = await DatabaseService.searchDoctors(search)
      console.log("[v0] Doctor search completed:", { query: search, results: doctors.length })
    } else if (hospitalId) {
      // Get doctors by hospital
      doctors = await DatabaseService.getDoctorsByHospital(Number.parseInt(hospitalId))
      console.log("[v0] Doctors fetched by hospital:", { hospitalId, results: doctors.length })
    } else {
      // Get all doctors with hospital info
      const result = await DatabaseService.query(`
        SELECT d.*, h.name as hospital_name, h.address as hospital_address 
        FROM doctors d 
        JOIN hospitals h ON d.hospital_id = h.id 
        ORDER BY d.rating DESC, d.name
      `)
      doctors = result.rows
      console.log("[v0] All doctors fetched:", doctors.length)
    }

return NextResponse.json({
      success: true,
      doctors: doctors,
    })
  } catch (error: any) {
    console.error("[v0] Doctors API error:", error)
    return NextResponse.json({ error: "Failed to fetch doctors" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/doctors/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const user = getUserFromRequest(request)
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

const doctorId = Number.parseInt(params.id)
    if (isNaN(doctorId)) {
      return NextResponse.json({ error: "Invalid doctor ID" }, { status: 400 })
    }

// Get doctor with hospital details
    const result = await DatabaseService.query(
      `
      SELECT d.*, h.name as hospital_name, h.address as hospital_address, 
             h.phone as hospital_phone, h.rating as hospital_rating
      FROM doctors d 
      JOIN hospitals h ON d.hospital_id = h.id 
      WHERE d.id = $1
    `,
      [doctorId],
    )

if (result.rows.length === 0) {
      return NextResponse.json({ error: "Doctor not found" }, { status: 404 })
    }

const doctor = result.rows[0]

// Get doctor's current queue info
    const queueResult = await DatabaseService.query(
      `
      SELECT current_queue_length, average_wait_time 
      FROM hospital_queues 
      WHERE hospital_id = $1 AND doctor_id = $2
    `,
      [doctor.hospital_id, doctorId],
    )

const queueInfo = queueResult.rows[0] || {
      current_queue_length: 0,
      average_wait_time: 15,
    }

console.log("[v0] Doctor details fetched:", { doctorId, name: doctor.name })

return NextResponse.json({
      success: true,
      doctor: {
        ...doctor,
        queue_length: queueInfo.current_queue_length,
        estimated_wait_time: queueInfo.average_wait_time,
      },
    })
  } catch (error: any) {
    console.error("[v0] Doctor details API error:", error)
    return NextResponse.json({ error: "Failed to fetch doctor details" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/appointments/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const appointmentId = Number.parseInt(params.id)
    if (isNaN(appointmentId)) {
      return NextResponse.json({ error: "Invalid appointment ID" }, { status: 400 })
    }

const result = await DatabaseService.query(
      `
      SELECT a.*, d.name as doctor_name, d.specialty, d.phone as doctor_phone,
             h.name as hospital_name, h.address as hospital_address, h.phone as hospital_phone
      FROM appointments a
      JOIN doctors d ON a.doctor_id = d.id
      JOIN hospitals h ON a.hospital_id = h.id
      WHERE a.id = $1 AND a.user_id = $2
    `,
      [appointmentId, user.id],
    )

if (result.rows.length === 0) {
      return NextResponse.json({ error: "Appointment not found" }, { status: 404 })
    }

const appointment = result.rows[0]

console.log("[v0] Appointment details fetched:", { appointmentId, userId: user.id })

return NextResponse.json({
      success: true,
      appointment: appointment,
    })
  } catch (error: any) {
    console.error("[v0] Get appointment API error:", error)
    return NextResponse.json({ error: "Failed to fetch appointment details" }, { status: 500 })
  }
}

export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const user = getUserFromRequest(request)
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

const appointmentId = Number.parseInt(params.id)
    if (isNaN(appointmentId)) {
      return NextResponse.json({ error: "Invalid appointment ID" }, { status: 400 })
    }

const body = await request.json()
    const { status, notes } = body

// Verify appointment belongs to user
    const existingAppointment = await DatabaseService.query(
      `
      SELECT id FROM appointments WHERE id = $1 AND user_id = $2
    `,
      [appointmentId, user.id],
    )

if (existingAppointment.rows.length === 0) {
      return NextResponse.json({ error: "Appointment not found" }, { status: 404 })
    }

// Update appointment
    const result = await DatabaseService.query(
      `
      UPDATE appointments 
      SET status = COALESCE($2, status),
          notes = COALESCE($3, notes),
          updated_at = CURRENT_TIMESTAMP
      WHERE id = $1 AND user_id = $4
      RETURNING *
    `,
      [appointmentId, status, notes, user.id],
    )

const updatedAppointment = result.rows[0]

// Create notification for status change
    if (status) {
      await DatabaseService.createNotification({
        user_id: user.id,
        title: "Appointment Updated",
        message: `Your appointment status has been updated to: ${status}`,
        type: "appointment",
        data: { appointment_id: appointmentId, new_status: status },
      })
    }

console.log("[v0] Appointment updated:", { appointmentId, status, userId: user.id })

return NextResponse.json({
      success: true,
      message: "Appointment updated successfully",
      appointment: updatedAppointment,
    })
  } catch (error: any) {
    console.error("[v0] Update appointment API error:", error)
    return NextResponse.json({ error: "Failed to update appointment" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const user = getUserFromRequest(request)
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

const appointmentId = Number.parseInt(params.id)
    if (isNaN(appointmentId)) {
      return NextResponse.json({ error: "Invalid appointment ID" }, { status: 400 })
    }

// Cancel appointment (soft delete)
    const result = await DatabaseService.query(
      `
      UPDATE appointments 
      SET status = 'cancelled', updated_at = CURRENT_TIMESTAMP
      WHERE id = $1 AND user_id = $2 AND status NOT IN ('completed', 'cancelled')
      RETURNING *
    `,
      [appointmentId, user.id],
    )

if (result.rows.length === 0) {
      return NextResponse.json({ error: "Appointment not found or cannot be cancelled" }, { status: 404 })
    }

// Create notification for cancellation
    await DatabaseService.createNotification({
      user_id: user.id,
      title: "Appointment Cancelled",
      message: "Your appointment has been cancelled successfully",
      type: "appointment",
      data: { appointment_id: appointmentId },
    })

console.log("[v0] Appointment cancelled:", { appointmentId, userId: user.id })

return NextResponse.json({
      success: true,
      message: "Appointment cancelled successfully",
    })
  } catch (error: any) {
    console.error("[v0] Cancel appointment API error:", error)
    return NextResponse.json({ error: "Failed to cancel appointment" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/home-visits/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const user = getUserFromRequest(request)
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

const body = await request.json()
    const { appointment_id, patient_address, street_name, door_number, landmark, latitude, longitude } = body

// Validate required fields
    if (!appointment_id || !patient_address) {
      return NextResponse.json({ error: "Appointment ID and patient address are required" }, { status: 400 })
    }

// Verify appointment belongs to user
    const appointmentResult = await DatabaseService.query(
      `
      SELECT id, doctor_id, hospital_id FROM appointments 
      WHERE id = $1 AND user_id = $2
    `,
      [appointment_id, user.id],
    )

if (appointmentResult.rows.length === 0) {
      return NextResponse.json({ error: "Appointment not found" }, { status: 404 })
    }

// Calculate visit fee (base fee + distance charge)
    const baseFee = 200
    const distanceCharge = 50 // per km
    const estimatedDistance = 5 // Default 5km, should be calculated based on coordinates
    const visitFee = baseFee + estimatedDistance * distanceCharge

// Create home visit request
    const result = await DatabaseService.query(
      `
      INSERT INTO home_visits (
        appointment_id, patient_address, street_name, door_number, 
        landmark, latitude, longitude, visit_fee, travel_distance
      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
      RETURNING *
    `,
      [
        appointment_id,
        patient_address,
        street_name,
        door_number,
        landmark,
        latitude,
        longitude,
        visitFee,
        estimatedDistance,
      ],
    )

const homeVisit = result.rows[0]

// Update appointment type
    await DatabaseService.query(
      `
      UPDATE appointments 
      SET appointment_type = 'home_visit', consultation_fee = consultation_fee + $2
      WHERE id = $1
    `,
      [appointment_id, visitFee],
    )

// Create notification
    await DatabaseService.createNotification({
      user_id: user.id,
      title: "Home Visit Requested",
      message: `Your home visit request has been submitted. Visit fee: ₹${visitFee}`,
      type: "appointment",
      data: { home_visit_id: homeVisit.id, visit_fee: visitFee },
    })

console.log("[v0] Home visit request created:", {
      homeVisitId: homeVisit.id,
      appointmentId: appointment_id,
      userId: user.id,
    })

return NextResponse.json({
      success: true,
      message: "Home visit request submitted successfully",
      home_visit: homeVisit,
    })
  } catch (error: any) {
    console.error("[v0] Home visit API error:", error)
    return NextResponse.json({ error: "Failed to submit home visit request" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/medicines/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const { searchParams } = new URL(request.url)
    const search = searchParams.get("search")
    const category = searchParams.get("category")
    const requiresPrescription = searchParams.get("requiresPrescription")

let medicines = []

if (search) {
      // Search medicines by name, generic name, or category
      medicines = await DatabaseService.searchMedicines(search)
      console.log("[v0] Medicine search completed:", { query: search, results: medicines.length })
    } else {
      // Get all medicines with optional filters
      let queryText = "SELECT * FROM medicines WHERE 1=1"
      const params: any[] = []
      let paramCount = 0

if (category) {
        paramCount++
        queryText += ` AND category ILIKE $${paramCount}`
        params.push(`%${category}%`)
      }

if (requiresPrescription !== null) {
        paramCount++
        queryText += ` AND requires_prescription = $${paramCount}`
        params.push(requiresPrescription === "true")
      }

queryText += " ORDER BY name"

const result = await DatabaseService.query(queryText, params)
      medicines = result.rows
      console.log("[v0] Medicines fetched with filters:", { category, requiresPrescription, results: medicines.length })
    }

return NextResponse.json({
      success: true,
      medicines: medicines,
    })
  } catch (error: any) {
    console.error("[v0] Medicines API error:", error)
    return NextResponse.json({ error: "Failed to fetch medicines" }, { status: 500 })
  }
}

const body = await request.json()
    const {
      name,
      generic_name,
      category,
      manufacturer,
      description,
      dosage_form,
      strength,
      price,
      requires_prescription,
    } = body

// Validate required fields
    if (!name || !category || !dosage_form || !strength) {
      return NextResponse.json({ error: "Name, category, dosage form, and strength are required" }, { status: 400 })
    }

// Create new medicine
    const result = await DatabaseService.query(
      `INSERT INTO medicines (name, generic_name, category, manufacturer, description, dosage_form, strength, price, requires_prescription)
       VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
       RETURNING *`,
      [
        name,
        generic_name,
        category,
        manufacturer,
        description,
        dosage_form,
        strength,
        price || 0,
        requires_prescription || false,
      ],
    )

const medicine = result.rows[0]

console.log("[v0] Medicine created:", { medicineId: medicine.id, name: medicine.name })

return NextResponse.json({
      success: true,
      message: "Medicine added successfully",
      medicine: medicine,
    })
  } catch (error: any) {
    console.error("[v0] Create medicine API error:", error)
    return NextResponse.json({ error: "Failed to add medicine" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/medicines/[id]/availability/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const medicineId = Number.parseInt(params.id)
    if (isNaN(medicineId)) {
      return NextResponse.json({ error: "Invalid medicine ID" }, { status: 400 })
    }

const { searchParams } = new URL(request.url)
    const latitude = searchParams.get("latitude")
    const longitude = searchParams.get("longitude")

// Get medicine availability across pharmacies
    const availability = await DatabaseService.getMedicineAvailability(
      medicineId,
      latitude ? Number.parseFloat(latitude) : undefined,
      longitude ? (longitude ? Number.parseFloat(longitude) : undefined) : undefined,
    )

if (availability.length === 0) {
      return NextResponse.json({
        success: true,
        message: "Medicine not available in nearby pharmacies",
        availability: [],
      })
    }

console.log("[v0] Medicine availability fetched:", { medicineId, pharmacies: availability.length })

return NextResponse.json({
      success: true,
      availability: availability,
    })
  } catch (error: any) {
    console.error("[v0] Medicine availability API error:", error)
    return NextResponse.json({ error: "Failed to fetch medicine availability" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/pharmacies/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const { searchParams } = new URL(request.url)
    const latitude = searchParams.get("latitude")
    const longitude = searchParams.get("longitude")
    const radius = searchParams.get("radius") || "10"
    const is24Hours = searchParams.get("is24Hours")

let pharmacies = []

if (latitude && longitude) {
      // Get nearby pharmacies
      let queryText = `
        SELECT *, 
        (6371 * acos(cos(radians($1)) * cos(radians(latitude)) * cos(radians(longitude) - radians($2)) + sin(radians($1)) * sin(radians(latitude)))) AS distance
        FROM pharmacies 
        WHERE latitude IS NOT NULL AND longitude IS NOT NULL
      `
      const params = [Number.parseFloat(latitude), Number.parseFloat(longitude)]
      let paramCount = 2

if (is24Hours === "true") {
        paramCount++
        queryText += ` AND is_24_hours = $${paramCount}`
        params.push(true)
      }

queryText += ` HAVING distance < $${paramCount + 1} ORDER BY distance`
      params.push(Number.parseFloat(radius))

const result = await DatabaseService.query(queryText, params)
      pharmacies = result.rows

console.log("[v0] Nearby pharmacies fetched:", {
        latitude,
        longitude,
        radius,
        is24Hours,
        results: pharmacies.length,
      })
    } else {
      // Get all pharmacies
      let queryText = "SELECT * FROM pharmacies WHERE 1=1"
      const params: any[] = []

if (is24Hours === "true") {
        queryText += " AND is_24_hours = $1"
        params.push(true)
      }

queryText += " ORDER BY name"

const result = await DatabaseService.query(queryText, params)
      pharmacies = result.rows

console.log("[v0] All pharmacies fetched:", { is24Hours, results: pharmacies.length })
    }

return NextResponse.json({
      success: true,
      pharmacies: pharmacies,
    })
  } catch (error: any) {
    console.error("[v0] Pharmacies API error:", error)
    return NextResponse.json({ error: "Failed to fetch pharmacies" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/pharmacies/[id]/inventory/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params
    const user = getUserFromRequest(request)
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

const pharmacyId = Number.parseInt(id)
    if (isNaN(pharmacyId)) {
      return NextResponse.json({ error: "Invalid pharmacy ID" }, { status: 400 })
    }

const { searchParams } = new URL(request.url)
    const search = searchParams.get("search")
    const inStock = searchParams.get("inStock")

// Get pharmacy inventory
    let queryText = `
      SELECT pi.*, m.name as medicine_name, m.generic_name, m.category, 
             m.manufacturer, m.dosage_form, m.strength, m.requires_prescription,
             p.name as pharmacy_name, p.address as pharmacy_address
      FROM pharmacy_inventory pi
      JOIN medicines m ON pi.medicine_id = m.id
      JOIN pharmacies p ON pi.pharmacy_id = p.id
      WHERE pi.pharmacy_id = $1
    `
    const queryParams = [pharmacyId]
    let paramCount = 1

if (search) {
      paramCount++
      queryText += ` AND (m.name ILIKE $${paramCount} OR m.generic_name ILIKE $${paramCount} OR m.category ILIKE $${paramCount})`
      queryParams.push(`%${search}%`)
    }

if (inStock === "true") {
      queryText += " AND pi.stock_quantity > 0"
    }

queryText += " ORDER BY m.name"

const result = await DatabaseService.query(queryText, queryParams)
    const inventory = result.rows

console.log("[v0] Pharmacy inventory fetched:", {
      pharmacyId,
      search,
      inStock,
      results: inventory.length,
    })

return NextResponse.json({
      success: true,
      inventory: inventory,
    })
  } catch (error: any) {
    console.error("[v0] Pharmacy inventory API error:", error)
    return NextResponse.json({ error: "Failed to fetch pharmacy inventory" }, { status: 500 })
  }
}

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params
    const user = getUserFromRequest(request)
    if (!user) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

const pharmacyId = Number.parseInt(id)
    if (isNaN(pharmacyId)) {
      return NextResponse.json({ error: "Invalid pharmacy ID" }, { status: 400 })
    }

const body = await request.json()
    const { medicine_id, stock_quantity, price, expiry_date, batch_number } = body

// Validate required fields
    if (!medicine_id || stock_quantity === undefined || !price || !batch_number) {
      return NextResponse.json(
        { error: "Medicine ID, stock quantity, price, and batch number are required" },
        { status: 400 },
      )
    }

// Add or update inventory
    const result = await DatabaseService.query(
      `INSERT INTO pharmacy_inventory (pharmacy_id, medicine_id, stock_quantity, price, expiry_date, batch_number)
       VALUES ($1, $2, $3, $4, $5, $6)
       ON CONFLICT (pharmacy_id, medicine_id, batch_number)
       DO UPDATE SET 
         stock_quantity = $3,
         price = $4,
         expiry_date = $5,
         updated_at = CURRENT_TIMESTAMP
       RETURNING *`,
      [pharmacyId, medicine_id, stock_quantity, price, expiry_date, batch_number],
    )

const inventoryItem = result.rows[0]

console.log("[v0] Pharmacy inventory updated:", {
      pharmacyId,
      medicineId: medicine_id,
      stockQuantity: stock_quantity,
    })

return NextResponse.json({
      success: true,
      message: "Inventory updated successfully",
      inventory_item: inventoryItem,
    })
  } catch (error: any) {
    console.error("[v0] Update pharmacy inventory API error:", error)
    return NextResponse.json({ error: "Failed to update inventory" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/prescriptions/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

// Get user's prescriptions
    const result = await DatabaseService.query(
      `SELECT p.*, d.name as doctor_name, d.specialty,
              h.name as hospital_name
       FROM prescriptions p
       LEFT JOIN doctors d ON p.doctor_id = d.id
       LEFT JOIN appointments a ON p.appointment_id = a.id
       LEFT JOIN hospitals h ON a.hospital_id = h.id
       WHERE p.user_id = $1
       ORDER BY p.created_at DESC`,
      [user.id],
    )

const prescriptions = result.rows

console.log("[v0] User prescriptions fetched:", { userId: user.id, count: prescriptions.length })

return NextResponse.json({
      success: true,
      prescriptions: prescriptions,
    })
  } catch (error: any) {
    console.error("[v0] Get prescriptions API error:", error)
    return NextResponse.json({ error: "Failed to fetch prescriptions" }, { status: 500 })
  }
}

const body = await request.json()
    const { appointment_id, doctor_id, prescription_text, image_url, medicines, instructions, valid_until } = body

// Create prescription
    const result = await DatabaseService.query(
      `INSERT INTO prescriptions (user_id, appointment_id, doctor_id, prescription_text, image_url, medicines, instructions, valid_until)
       VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
       RETURNING *`,
      [
        user.id,
        appointment_id,
        doctor_id,
        prescription_text,
        image_url,
        JSON.stringify(medicines),
        instructions,
        valid_until,
      ],
    )

const prescription = result.rows[0]

// Create notification
    await DatabaseService.createNotification({
      user_id: user.id,
      title: "Prescription Added",
      message: "A new prescription has been added to your records",
      type: "medicine",
      data: { prescription_id: prescription.id },
    })

console.log("[v0] Prescription created:", { prescriptionId: prescription.id, userId: user.id })

return NextResponse.json({
      success: true,
      message: "Prescription saved successfully",
      prescription: prescription,
    })
  } catch (error: any) {
    console.error("[v0] Create prescription API error:", error)
    return NextResponse.json({ error: "Failed to save prescription" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/prescriptions/scan/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUserFromRequest } from "@/lib/auth"

const formData = await request.formData()
    const image = formData.get("image") as File

if (!image) {
      return NextResponse.json({ error: "Image file is required" }, { status: 400 })
    }

// Convert image to base64 for processing
    const bytes = await image.arrayBuffer()
    const buffer = Buffer.from(bytes)
    const base64Image = buffer.toString("base64")

// Simulate AI OCR processing (in production, integrate with actual OCR service)
    const mockExtractedData = {
      doctor_name: "Dr. Priya Sharma",
      hospital_name: "Apollo Hospital",
      date: new Date().toISOString().split("T")[0],
      medicines: [
        {
          name: "Paracetamol",
          dosage: "500mg",
          frequency: "Twice daily",
          duration: "5 days",
          instructions: "Take after meals",
        },
        {
          name: "Amoxicillin",
          dosage: "250mg",
          frequency: "Three times daily",
          duration: "7 days",
          instructions: "Complete the course",
        },
      ],
      instructions: "Take medicines as prescribed. Complete the antibiotic course.",
      confidence_score: 0.92,
    }

// In production, you would:
    // 1. Upload image to cloud storage
    // 2. Process with OCR service (Google Vision API, AWS Textract, etc.)
    // 3. Parse medical text with AI/ML models
    // 4. Validate extracted medicine names against database

console.log("[v0] Prescription scanned and processed:", {
      userId: user.id,
      fileName: image.name,
      confidence: mockExtractedData.confidence_score,
    })

return NextResponse.json({
      success: true,
      message: "Prescription scanned successfully",
      extracted_data: mockExtractedData,
      image_processed: true,
    })
  } catch (error: any) {
    console.error("[v0] Prescription scan API error:", error)
    return NextResponse.json({ error: "Failed to process prescription image" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/hospitals/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

let hospitals = []

if (latitude && longitude) {
      // Get nearby hospitals
      hospitals = await DatabaseService.getNearbyHospitals(
        Number.parseFloat(latitude),
        Number.parseFloat(longitude),
        Number.parseFloat(radius),
      )
      console.log("[v0] Nearby hospitals fetched:", {
        latitude,
        longitude,
        radius,
        results: hospitals.length,
      })
    } else if (search) {
      // Search hospitals by name or address
      const result = await DatabaseService.query(
        `SELECT * FROM hospitals 
         WHERE name ILIKE $1 OR address ILIKE $1 
         ORDER BY rating DESC, name`,
        [`%${search}%`],
      )
      hospitals = result.rows
      console.log("[v0] Hospital search completed:", { query: search, results: hospitals.length })
    } else {
      // Get all hospitals
      const result = await DatabaseService.query("SELECT * FROM hospitals ORDER BY rating DESC, name")
      hospitals = result.rows
      console.log("[v0] All hospitals fetched:", hospitals.length)
    }

// Filter by specialty if provided
    if (specialty) {
      hospitals = hospitals.filter(
        (hospital) =>
          hospital.specialties &&
          hospital.specialties.some((s: string) => s.toLowerCase().includes(specialty.toLowerCase())),
      )
    }

// Add real-time bed availability and queue information
    const hospitalsWithLiveData = await Promise.all(
      hospitals.map(async (hospital) => {
        // Get current queue information
        const queueResult = await DatabaseService.query(
          `SELECT AVG(current_queue_length) as avg_queue, AVG(average_wait_time) as avg_wait
           FROM hospital_queues WHERE hospital_id = $1`,
          [hospital.id],
        )

const queueData = queueResult.rows[0] || { avg_queue: 0, avg_wait: 15 }

// Get today's appointment count
        const appointmentResult = await DatabaseService.query(
          `SELECT COUNT(*) as today_appointments
           FROM appointments 
           WHERE hospital_id = $1 AND appointment_date = CURRENT_DATE 
           AND status NOT IN ('cancelled')`,
          [hospital.id],
        )

const todayAppointments = Number.parseInt(appointmentResult.rows[0].today_appointments) || 0

return {
          ...hospital,
          current_queue_length: Math.round(queueData.avg_queue) || 0,
          estimated_wait_time: Math.round(queueData.avg_wait) || 15,
          today_appointments: todayAppointments,
          bed_occupancy_rate:
            hospital.total_beds > 0
              ? Math.round(((hospital.total_beds - hospital.available_beds) / hospital.total_beds) * 100)
              : 0,
        }
      }),
    )

return NextResponse.json({
      success: true,
      hospitals: hospitalsWithLiveData,
    })
  } catch (error: any) {
    console.error("[v0] Hospitals API error:", error)
    return NextResponse.json({ error: "Failed to fetch hospitals" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/hospitals/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const hospitalId = Number.parseInt(params.id)
    if (isNaN(hospitalId)) {
      return NextResponse.json({ error: "Invalid hospital ID" }, { status: 400 })
    }

// Get hospital details
    const hospital = await DatabaseService.getHospitalById(hospitalId)
    if (!hospital) {
      return NextResponse.json({ error: "Hospital not found" }, { status: 404 })
    }

// Get hospital doctors
    const doctors = await DatabaseService.getDoctorsByHospital(hospitalId)

// Get hospital queue information
    const queueResult = await DatabaseService.query(
      `SELECT hq.*, d.name as doctor_name, d.specialty
       FROM hospital_queues hq
       JOIN doctors d ON hq.doctor_id = d.id
       WHERE hq.hospital_id = $1
       ORDER BY hq.current_queue_length DESC`,
      [hospitalId],
    )

const queues = queueResult.rows

// Get today's statistics
    const statsResult = await DatabaseService.query(
      `SELECT 
         COUNT(*) as total_appointments,
         COUNT(CASE WHEN status = 'completed' THEN 1 END) as completed_appointments,
         COUNT(CASE WHEN status = 'scheduled' THEN 1 END) as pending_appointments,
         COUNT(CASE WHEN appointment_type = 'emergency' THEN 1 END) as emergency_cases
       FROM appointments 
       WHERE hospital_id = $1 AND appointment_date = CURRENT_DATE`,
      [hospitalId],
    )

const stats = statsResult.rows[0] || {
      total_appointments: 0,
      completed_appointments: 0,
      pending_appointments: 0,
      emergency_cases: 0,
    }

// Get recent emergency requests
    const emergencyResult = await DatabaseService.query(
      `SELECT er.*, u.name as patient_name
       FROM emergency_requests er
       JOIN users u ON er.user_id = u.id
       WHERE er.assigned_hospital_id = $1 AND er.status = 'active'
       ORDER BY er.priority_level DESC, er.created_at DESC
       LIMIT 5`,
      [hospitalId],
    )

const emergencyRequests = emergencyResult.rows

console.log("[v0] Hospital details fetched:", {
      hospitalId,
      name: hospital.name,
      doctors: doctors.length,
      queues: queues.length,
    })

return NextResponse.json({
      success: true,
      hospital: {
        ...hospital,
        bed_occupancy_rate:
          hospital.total_beds > 0
            ? Math.round(((hospital.total_beds - hospital.available_beds) / hospital.total_beds) * 100)
            : 0,
      },
      doctors: doctors,
      queues: queues,
      today_stats: stats,
      emergency_requests: emergencyRequests,
    })
  } catch (error: any) {
    console.error("[v0] Hospital details API error:", error)
    return NextResponse.json({ error: "Failed to fetch hospital details" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/hospitals/[id]/beds/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const hospitalId = Number.parseInt(params.id)
    if (isNaN(hospitalId)) {
      return NextResponse.json({ error: "Invalid hospital ID" }, { status: 400 })
    }

// Get hospital bed information
    const result = await DatabaseService.query(
      `SELECT total_beds, available_beds, 
              (total_beds - available_beds) as occupied_beds,
              CASE 
                WHEN total_beds > 0 THEN ROUND(((total_beds - available_beds)::decimal / total_beds) * 100, 1)
                ELSE 0 
              END as occupancy_percentage
       FROM hospitals WHERE id = $1`,
      [hospitalId],
    )

if (result.rows.length === 0) {
      return NextResponse.json({ error: "Hospital not found" }, { status: 404 })
    }

const bedInfo = result.rows[0]

// Get bed availability trend (last 7 days)
    const trendResult = await DatabaseService.query(
      `SELECT 
         DATE(created_at) as date,
         AVG(available_beds) as avg_available_beds,
         AVG(total_beds - available_beds) as avg_occupied_beds
       FROM hospitals 
       WHERE id = $1 AND created_at >= CURRENT_DATE - INTERVAL '7 days'
       GROUP BY DATE(created_at)
       ORDER BY date DESC`,
      [hospitalId],
    )

const bedTrend = trendResult.rows

console.log("[v0] Hospital bed info fetched:", {
      hospitalId,
      totalBeds: bedInfo.total_beds,
      availableBeds: bedInfo.available_beds,
    })

return NextResponse.json({
      success: true,
      bed_info: bedInfo,
      bed_trend: bedTrend,
    })
  } catch (error: any) {
    console.error("[v0] Hospital beds API error:", error)
    return NextResponse.json({ error: "Failed to fetch bed information" }, { status: 500 })
  }
}

const hospitalId = Number.parseInt(params.id)
    if (isNaN(hospitalId)) {
      return NextResponse.json({ error: "Invalid hospital ID" }, { status: 400 })
    }

const body = await request.json()
    const { available_beds, total_beds } = body

// Update bed availability
    const result = await DatabaseService.query(
      `UPDATE hospitals 
       SET available_beds = COALESCE($2, available_beds),
           total_beds = COALESCE($3, total_beds),
           updated_at = CURRENT_TIMESTAMP
       WHERE id = $1 
       RETURNING *`,
      [hospitalId, available_beds, total_beds],
    )

if (result.rows.length === 0) {
      return NextResponse.json({ error: "Hospital not found" }, { status: 404 })
    }

const updatedHospital = result.rows[0]

console.log("[v0] Hospital bed availability updated:", {
      hospitalId,
      availableBeds: available_beds,
      totalBeds: total_beds,
    })

return NextResponse.json({
      success: true,
      message: "Bed availability updated successfully",
      hospital: updatedHospital,
    })
  } catch (error: any) {
    console.error("[v0] Update hospital beds API error:", error)
    return NextResponse.json({ error: "Failed to update bed availability" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/emergency/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const body = await request.json()
    const { emergency_type, location_latitude, location_longitude, address, description, priority_level = 3 } = body

// Validate required fields
    if (!emergency_type) {
      return NextResponse.json({ error: "Emergency type is required" }, { status: 400 })
    }

// Find nearest hospital with available beds
    let nearestHospital = null
    if (location_latitude && location_longitude) {
      const hospitalResult = await DatabaseService.query(
        `SELECT *, 
         (6371 * acos(cos(radians($1)) * cos(radians(latitude)) * cos(radians(longitude) - radians($2)) + sin(radians($1)) * sin(radians(latitude)))) AS distance
         FROM hospitals 
         WHERE latitude IS NOT NULL AND longitude IS NOT NULL AND available_beds > 0
         ORDER BY distance
         LIMIT 1`,
        [location_latitude, location_longitude],
      )

if (hospitalResult.rows.length > 0) {
        nearestHospital = hospitalResult.rows[0]
      }
    }

// Create emergency request
    const emergencyRequest = await DatabaseService.createEmergencyRequest({
      user_id: user.id,
      emergency_type,
      location_latitude,
      location_longitude,
      address,
      description,
      priority_level,
      assigned_hospital_id: nearestHospital?.id,
    })

// Create high-priority notification
    await DatabaseService.createNotification({
      user_id: user.id,
      title: "Emergency Request Submitted",
      message: `Your emergency request has been submitted. ${nearestHospital ? `Nearest hospital: ${nearestHospital.name}` : "Finding nearest hospital..."}`,
      type: "emergency",
      data: {
        emergency_request_id: emergencyRequest.id,
        hospital_id: nearestHospital?.id,
        hospital_name: nearestHospital?.name,
      },
    })

// If hospital assigned, reduce available beds
    if (nearestHospital) {
      await DatabaseService.query(
        `UPDATE hospitals 
         SET available_beds = GREATEST(available_beds - 1, 0)
         WHERE id = $1`,
        [nearestHospital.id],
      )
    }

console.log("[v0] Emergency request created:", {
      emergencyId: emergencyRequest.id,
      userId: user.id,
      emergencyType: emergency_type,
      assignedHospital: nearestHospital?.name,
    })

return NextResponse.json({
      success: true,
      message: "Emergency request submitted successfully",
      emergency_request: emergencyRequest,
      assigned_hospital: nearestHospital,
      estimated_response_time: nearestHospital ? "8-12 minutes" : "15-20 minutes",
    })
  } catch (error: any) {
    console.error("[v0] Emergency request API error:", error)
    return NextResponse.json({ error: "Failed to submit emergency request" }, { status: 500 })
  }
}

// Get user's emergency requests
    const result = await DatabaseService.query(
      `SELECT er.*, h.name as hospital_name, h.address as hospital_address,
              h.emergency_contact as hospital_emergency_contact
       FROM emergency_requests er
       LEFT JOIN hospitals h ON er.assigned_hospital_id = h.id
       WHERE er.user_id = $1
       ORDER BY er.created_at DESC`,
      [user.id],
    )

const emergencyRequests = result.rows

console.log("[v0] User emergency requests fetched:", {
      userId: user.id,
      count: emergencyRequests.length,
    })

return NextResponse.json({
      success: true,
      emergency_requests: emergencyRequests,
    })
  } catch (error: any) {
    console.error("[v0] Get emergency requests API error:", error)
    return NextResponse.json({ error: "Failed to fetch emergency requests" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/queue/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const { searchParams } = new URL(request.url)
    const hospitalId = searchParams.get("hospitalId")
    const doctorId = searchParams.get("doctorId")

if (!hospitalId) {
      return NextResponse.json({ error: "Hospital ID is required" }, { status: 400 })
    }

// Get queue information
    const queues = await DatabaseService.getHospitalQueue(
      Number.parseInt(hospitalId),
      doctorId ? Number.parseInt(doctorId) : undefined,
    )

// Get detailed queue with doctor information
    const detailedQueues = await Promise.all(
      queues.map(async (queue) => {
        const doctorResult = await DatabaseService.query("SELECT name, specialty FROM doctors WHERE id = $1", [
          queue.doctor_id,
        ])

const doctor = doctorResult.rows[0]

// Get current appointments in queue
        const appointmentsResult = await DatabaseService.query(
          `SELECT COUNT(*) as queue_count
           FROM appointments 
           WHERE doctor_id = $1 AND appointment_date = CURRENT_DATE 
           AND status = 'scheduled'
           ORDER BY appointment_time`,
          [queue.doctor_id],
        )

const currentQueue = Number.parseInt(appointmentsResult.rows[0].queue_count) || 0

return {
          ...queue,
          doctor_name: doctor?.name,
          doctor_specialty: doctor?.specialty,
          current_queue_length: currentQueue,
          estimated_wait_time: currentQueue * 15, // 15 minutes per patient
        }
      }),
    )

console.log("[v0] Queue information fetched:", {
      hospitalId,
      doctorId,
      queues: detailedQueues.length,
    })

return NextResponse.json({
      success: true,
      queues: detailedQueues,
    })
  } catch (error: any) {
    console.error("[v0] Queue API error:", error)
    return NextResponse.json({ error: "Failed to fetch queue information" }, { status: 500 })
  }
}

const body = await request.json()
    const { hospital_id, doctor_id, queue_length, average_wait_time } = body

// Validate required fields
    if (!hospital_id || !doctor_id || queue_length === undefined) {
      return NextResponse.json({ error: "Hospital ID, doctor ID, and queue length are required" }, { status: 400 })
    }

// Update queue information
    await DatabaseService.updateHospitalQueue(
      hospital_id,
      doctor_id,
      queue_length,
      average_wait_time || queue_length * 15,
    )

console.log("[v0] Queue updated:", {
      hospitalId: hospital_id,
      doctorId: doctor_id,
      queueLength: queue_length,
    })

return NextResponse.json({
      success: true,
      message: "Queue information updated successfully",
    })
  } catch (error: any) {
    console.error("[v0] Update queue API error:", error)
    return NextResponse.json({ error: "Failed to update queue information" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/notifications/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const { searchParams } = new URL(request.url)
    const limit = Number.parseInt(searchParams.get("limit") || "50")
    const unreadOnly = searchParams.get("unreadOnly") === "true"
    const type = searchParams.get("type")

// Get user notifications
    let queryText = "SELECT * FROM notifications WHERE user_id = $1"
    const queryParams = [user.id]
    let paramCount = 1

if (unreadOnly) {
      queryText += " AND is_read = false"
    }

if (type) {
      paramCount++
      queryText += ` AND type = $${paramCount}`
      queryParams.push(type)
    }

queryText += " ORDER BY created_at DESC"

if (limit > 0) {
      paramCount++
      queryText += ` LIMIT $${paramCount}`
      queryParams.push(limit)
    }

const result = await DatabaseService.query(queryText, queryParams)
    const notifications = result.rows

// Get unread count
    const unreadResult = await DatabaseService.query(
      "SELECT COUNT(*) as unread_count FROM notifications WHERE user_id = $1 AND is_read = false",
      [user.id],
    )
    const unreadCount = Number.parseInt(unreadResult.rows[0].unread_count) || 0

console.log("[v0] User notifications fetched:", {
      userId: user.id,
      count: notifications.length,
      unreadCount,
    })

return NextResponse.json({
      success: true,
      notifications: notifications,
      unread_count: unreadCount,
    })
  } catch (error: any) {
    console.error("[v0] Get notifications API error:", error)
    return NextResponse.json({ error: "Failed to fetch notifications" }, { status: 500 })
  }
}

const body = await request.json()
    const { title, message, type = "info", scheduled_for, data } = body

// Validate required fields
    if (!title || !message) {
      return NextResponse.json({ error: "Title and message are required" }, { status: 400 })
    }

// Create notification
    const notification = await DatabaseService.createNotification({
      user_id: user.id,
      title,
      message,
      type,
      scheduled_for: scheduled_for ? new Date(scheduled_for) : undefined,
      data,
    })

console.log("[v0] Notification created:", {
      notificationId: notification.id,
      userId: user.id,
      type,
    })

return NextResponse.json({
      success: true,
      message: "Notification created successfully",
      notification: notification,
    })
  } catch (error: any) {
    console.error("[v0] Create notification API error:", error)
    return NextResponse.json({ error: "Failed to create notification" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/notifications/[id]/read/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const notificationId = Number.parseInt(params.id)
    if (isNaN(notificationId)) {
      return NextResponse.json({ error: "Invalid notification ID" }, { status: 400 })
    }

// Mark notification as read
    const result = await DatabaseService.query(
      `UPDATE notifications 
       SET is_read = true 
       WHERE id = $1 AND user_id = $2 
       RETURNING *`,
      [notificationId, user.id],
    )

if (result.rows.length === 0) {
      return NextResponse.json({ error: "Notification not found" }, { status: 404 })
    }

const notification = result.rows[0]

console.log("[v0] Notification marked as read:", {
      notificationId,
      userId: user.id,
    })

return NextResponse.json({
      success: true,
      message: "Notification marked as read",
      notification: notification,
    })
  } catch (error: any) {
    console.error("[v0] Mark notification read API error:", error)
    return NextResponse.json({ error: "Failed to mark notification as read" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/notifications/mark-all-read/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

// Mark all notifications as read
    const result = await DatabaseService.query(
      `UPDATE notifications 
       SET is_read = true 
       WHERE user_id = $1 AND is_read = false
       RETURNING COUNT(*) as updated_count`,
      [user.id],
    )

const updatedCount = result.rowCount || 0

console.log("[v0] All notifications marked as read:", {
      userId: user.id,
      updatedCount,
    })

return NextResponse.json({
      success: true,
      message: `${updatedCount} notifications marked as read`,
      updated_count: updatedCount,
    })
  } catch (error: any) {
    console.error("[v0] Mark all notifications read API error:", error)
    return NextResponse.json({ error: "Failed to mark notifications as read" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="lib/notification-service.ts" isMerged="true"
import { DatabaseService } from "./database"

export interface ScheduledNotification {
  id: number
  user_id: number
  title: string
  message: string
  type: string
  scheduled_for: Date
  data?: any
}

export class NotificationService {
  // Schedule appointment reminder notifications
  static async scheduleAppointmentReminder(
    userId: number,
    appointmentId: number,
    doctorName: string,
    appointmentDate: string,
    appointmentTime: string,
  ): Promise<void> {
    try {
      const appointmentDateTime = new Date(`${appointmentDate} ${appointmentTime}`)
      const reminderTime = new Date(appointmentDateTime.getTime() - 10 * 60 * 1000) // 10 minutes before

await DatabaseService.createNotification({
        user_id: userId,
        title: "Appointment Reminder",
        message: `Your appointment with ${doctorName} is in 10 minutes at ${appointmentTime}`,
        type: "appointment",
        scheduled_for: reminderTime,
        data: {
          appointment_id: appointmentId,
          doctor_name: doctorName,
          appointment_time: appointmentTime,
        },
      })

console.log("[v0] Appointment reminder scheduled:", {
        userId,
        appointmentId,
        reminderTime: reminderTime.toISOString(),
      })
    } catch (error) {
      console.error("[v0] Failed to schedule appointment reminder:", error)
    }
  }

// Schedule medicine reminder notifications
  static async scheduleMedicineReminder(
    userId: number,
    medicineName: string,
    dosage: string,
    frequency: string,
    duration: number, // days
  ): Promise<void> {
    try {
      const now = new Date()
      const reminders = []

// Create daily reminders based on frequency
      const timesPerDay = this.parseFrequency(frequency)
      const reminderTimes = this.generateReminderTimes(timesPerDay)

for (let day = 0; day < duration; day++) {
        for (const time of reminderTimes) {
          const reminderDate = new Date(now)
          reminderDate.setDate(now.getDate() + day)
          reminderDate.setHours(time.hour, time.minute, 0, 0)

reminders.push({
            user_id: userId,
            title: "Medicine Reminder",
            message: `Time to take ${medicineName} (${dosage})`,
            type: "medicine",
            scheduled_for: reminderDate,
            data: {
              medicine_name: medicineName,
              dosage,
              frequency,
              day: day + 1,
            },
          })
        }
      }

// Batch create notifications
      for (const reminder of reminders) {
        await DatabaseService.createNotification(reminder)
      }

console.log("[v0] Medicine reminders scheduled:", {
        userId,
        medicineName,
        totalReminders: reminders.length,
      })
    } catch (error) {
      console.error("[v0] Failed to schedule medicine reminders:", error)
    }
  }

// Send emergency alert notifications
  static async sendEmergencyAlert(
    userId: number,
    emergencyType: string,
    hospitalName?: string,
    estimatedResponseTime?: string,
  ): Promise<void> {
    try {
      await DatabaseService.createNotification({
        user_id: userId,
        title: "Emergency Alert",
        message: `Emergency request submitted: ${emergencyType}. ${hospitalName ? `Assigned to ${hospitalName}.` : ""} ${estimatedResponseTime ? `Estimated response: ${estimatedResponseTime}` : ""}`,
        type: "emergency",
        data: {
          emergency_type: emergencyType,
          hospital_name: hospitalName,
          estimated_response_time: estimatedResponseTime,
        },
      })

console.log("[v0] Emergency alert sent:", {
        userId,
        emergencyType,
        hospitalName,
      })
    } catch (error) {
      console.error("[v0] Failed to send emergency alert:", error)
    }
  }

// Process scheduled notifications (to be called by a cron job)
  static async processScheduledNotifications(): Promise<void> {
    try {
      const now = new Date()

// Get notifications that are due to be sent
      const result = await DatabaseService.query(
        `SELECT * FROM notifications 
         WHERE scheduled_for <= $1 AND sent_at IS NULL
         ORDER BY scheduled_for ASC
         LIMIT 100`,
        [now],
      )

const dueNotifications = result.rows

for (const notification of dueNotifications) {
        // In a real implementation, you would send push notifications, SMS, or email here
        // For now, we'll just mark them as sent
        await DatabaseService.query("UPDATE notifications SET sent_at = CURRENT_TIMESTAMP WHERE id = $1", [
          notification.id,
        ])

console.log("[v0] Notification sent:", {
          notificationId: notification.id,
          userId: notification.user_id,
          title: notification.title,
        })
      }

if (dueNotifications.length > 0) {
        console.log("[v0] Processed scheduled notifications:", dueNotifications.length)
      }
    } catch (error) {
      console.error("[v0] Failed to process scheduled notifications:", error)
    }
  }

// Helper method to parse frequency string
  private static parseFrequency(frequency: string): number {
    const lowerFreq = frequency.toLowerCase()
    if (lowerFreq.includes("once") || lowerFreq.includes("1")) return 1
    if (lowerFreq.includes("twice") || lowerFreq.includes("2")) return 2
    if (lowerFreq.includes("three") || lowerFreq.includes("3")) return 3
    if (lowerFreq.includes("four") || lowerFreq.includes("4")) return 4
    return 2 // default to twice daily
  }

// Helper method to generate reminder times based on frequency
  private static generateReminderTimes(timesPerDay: number): Array<{ hour: number; minute: number }> {
    const times = []

switch (timesPerDay) {
      case 1:
        times.push({ hour: 9, minute: 0 }) // 9 AM
        break
      case 2:
        times.push({ hour: 9, minute: 0 }) // 9 AM
        times.push({ hour: 21, minute: 0 }) // 9 PM
        break
      case 3:
        times.push({ hour: 8, minute: 0 }) // 8 AM
        times.push({ hour: 14, minute: 0 }) // 2 PM
        times.push({ hour: 20, minute: 0 }) // 8 PM
        break
      case 4:
        times.push({ hour: 8, minute: 0 }) // 8 AM
        times.push({ hour: 12, minute: 0 }) // 12 PM
        times.push({ hour: 16, minute: 0 }) // 4 PM
        times.push({ hour: 20, minute: 0 }) // 8 PM
        break
      default:
        times.push({ hour: 9, minute: 0 })
        times.push({ hour: 21, minute: 0 })
    }

return times
  }

// Get notification statistics for a user
  static async getUserNotificationStats(userId: number): Promise<any> {
    try {
      const result = await DatabaseService.query(
        `SELECT 
           COUNT(*) as total_notifications,
           COUNT(CASE WHEN is_read = false THEN 1 END) as unread_count,
           COUNT(CASE WHEN type = 'appointment' THEN 1 END) as appointment_notifications,
           COUNT(CASE WHEN type = 'medicine' THEN 1 END) as medicine_notifications,
           COUNT(CASE WHEN type = 'emergency' THEN 1 END) as emergency_notifications,
           COUNT(CASE WHEN sent_at IS NOT NULL THEN 1 END) as sent_notifications
         FROM notifications 
         WHERE user_id = $1`,
        [userId],
      )

return (
        result.rows[0] || {
          total_notifications: 0,
          unread_count: 0,
          appointment_notifications: 0,
          medicine_notifications: 0,
          emergency_notifications: 0,
          sent_notifications: 0,
        }
      )
    } catch (error) {
      console.error("[v0] Failed to get notification stats:", error)
      return null
    }
  }
}

export default NotificationService
[V0_FILE]typescriptreact:file="app/api/notifications/stats/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUserFromRequest } from "@/lib/auth"
import { NotificationService } from "@/lib/notification-service"

// Get notification statistics
    const stats = await NotificationService.getUserNotificationStats(user.id)

if (!stats) {
      return NextResponse.json({ error: "Failed to fetch notification statistics" }, { status: 500 })
    }

console.log("[v0] Notification stats fetched:", {
      userId: user.id,
      totalNotifications: stats.total_notifications,
      unreadCount: stats.unread_count,
    })

return NextResponse.json({
      success: true,
      stats: stats,
    })
  } catch (error: any) {
    console.error("[v0] Notification stats API error:", error)
    return NextResponse.json({ error: "Failed to fetch notification statistics" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="scripts/03-notification-scheduler.js" isMerged="true"
import { NotificationService } from "../lib/notification-service.js"

// Function to process scheduled notifications
async function processNotifications() {
  console.log("[v0] Starting notification processing...")

try {
    await NotificationService.processScheduledNotifications()
    console.log("[v0] Notification processing completed successfully")
  } catch (error) {
    console.error("[v0] Notification processing failed:", error)
  }
}

// Run the notification processor
processNotifications()

// In production, this would be run as a cron job every minute:
// * * * * * node scripts/03-notification-scheduler.js
[V0_FILE]typescriptreact:file="lib/whatsapp-service.ts" isMerged="true"
import { DatabaseService } from "./database"

export interface WhatsAppMessage {
  to: string
  type: "text" | "template" | "interactive"
  text?: {
    body: string
  }
  template?: {
    name: string
    language: {
      code: string
    }
    components: any[]
  }
  interactive?: {
    type: "button" | "list"
    body: {
      text: string
    }
    action: any
  }
}

export class WhatsAppService {
  private static readonly WHATSAPP_API_URL = "https://graph.facebook.com/v18.0"
  private static readonly PHONE_NUMBER_ID = process.env.WHATSAPP_PHONE_NUMBER_ID
  private static readonly ACCESS_TOKEN = process.env.WHATSAPP_ACCESS_TOKEN

// Send a text message
  static async sendTextMessage(to: string, message: string): Promise<boolean> {
    try {
      if (!this.PHONE_NUMBER_ID || !this.ACCESS_TOKEN) {
        console.error("[v0] WhatsApp credentials not configured")
        return false
      }

const payload: WhatsAppMessage = {
        to: to.replace(/\D/g, ""), // Remove non-digits
        type: "text",
        text: {
          body: message,
        },
      }

const response = await fetch(`${this.WHATSAPP_API_URL}/${this.PHONE_NUMBER_ID}/messages`, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${this.ACCESS_TOKEN}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      })

const result = await response.json()

if (response.ok) {
        console.log("[v0] WhatsApp message sent successfully:", {
          to,
          messageId: result.messages?.[0]?.id,
        })
        return true
      } else {
        console.error("[v0] WhatsApp API error:", result)
        return false
      }
    } catch (error) {
      console.error("[v0] WhatsApp send message error:", error)
      return false
    }
  }

// Send appointment reminder via WhatsApp
  static async sendAppointmentReminder(
    phoneNumber: string,
    patientName: string,
    doctorName: string,
    appointmentDate: string,
    appointmentTime: string,
    hospitalName: string,
  ): Promise<boolean> {
    const message = `🏥 *MediCheck Appointment Reminder*

Hello ${patientName}!

Your appointment is scheduled for:
📅 Date: ${appointmentDate}
⏰ Time: ${appointmentTime}
👨‍⚕️ Doctor: ${doctorName}
🏥 Hospital: ${hospitalName}

Please arrive 15 minutes early. Reply CONFIRM to confirm your appointment or RESCHEDULE to reschedule.

Thank you for choosing MediCheck! 💙`

return await this.sendTextMessage(phoneNumber, message)
  }

// Send medicine reminder via WhatsApp
  static async sendMedicineReminder(
    phoneNumber: string,
    patientName: string,
    medicineName: string,
    dosage: string,
    instructions: string,
  ): Promise<boolean> {
    const message = `💊 *MediCheck Medicine Reminder*

Hello ${patientName}!

Time to take your medicine:
💊 Medicine: ${medicineName}
📏 Dosage: ${dosage}
📝 Instructions: ${instructions}

Don't forget to take your medicine as prescribed by your doctor.

Stay healthy! 💙`

return await this.sendTextMessage(phoneNumber, message)
  }

// Send emergency alert via WhatsApp
  static async sendEmergencyAlert(
    phoneNumber: string,
    patientName: string,
    emergencyType: string,
    hospitalName?: string,
    estimatedTime?: string,
  ): Promise<boolean> {
    const message = `🚨 *MediCheck Emergency Alert*

Hello ${patientName},

Your emergency request has been received:
🚨 Emergency Type: ${emergencyType}
${hospitalName ? `🏥 Assigned Hospital: ${hospitalName}` : "🔍 Finding nearest hospital..."}
${estimatedTime ? `⏱️ Estimated Response: ${estimatedTime}` : ""}

Emergency services have been notified. Stay calm and follow safety protocols.

Help is on the way! 🚑`

return await this.sendTextMessage(phoneNumber, message)
  }

// Send interactive appointment booking confirmation
  static async sendAppointmentConfirmation(
    phoneNumber: string,
    patientName: string,
    appointmentId: number,
    doctorName: string,
    appointmentDate: string,
    appointmentTime: string,
    hospitalName: string,
  ): Promise<boolean> {
    try {
      if (!this.PHONE_NUMBER_ID || !this.ACCESS_TOKEN) {
        console.error("[v0] WhatsApp credentials not configured")
        return false
      }

const payload: WhatsAppMessage = {
        to: phoneNumber.replace(/\D/g, ""),
        type: "interactive",
        interactive: {
          type: "button",
          body: {
            text: `🏥 *Appointment Confirmed*\n\nHello ${patientName}!\n\nYour appointment has been confirmed:\n📅 ${appointmentDate} at ${appointmentTime}\n👨‍⚕️ Dr. ${doctorName}\n🏥 ${hospitalName}\n\nAppointment ID: #${appointmentId}`,
          },
          action: {
            buttons: [
              {
                type: "reply",
                reply: {
                  id: `reschedule_${appointmentId}`,
                  title: "Reschedule",
                },
              },
              {
                type: "reply",
                reply: {
                  id: `cancel_${appointmentId}`,
                  title: "Cancel",
                },
              },
              {
                type: "reply",
                reply: {
                  id: `directions_${appointmentId}`,
                  title: "Get Directions",
                },
              },
            ],
          },
        },
      }

const result = await response.json()

if (response.ok) {
        console.log("[v0] WhatsApp interactive message sent:", {
          to: phoneNumber,
          appointmentId,
          messageId: result.messages?.[0]?.id,
        })
        return true
      } else {
        console.error("[v0] WhatsApp interactive message error:", result)
        return false
      }
    } catch (error) {
      console.error("[v0] WhatsApp interactive message error:", error)
      return false
    }
  }

// Handle incoming WhatsApp webhook messages
  static async handleIncomingMessage(messageData: any): Promise<void> {
    try {
      const { from, text, type, interactive } = messageData

console.log("[v0] Incoming WhatsApp message:", {
        from,
        type,
        text: text?.body,
        interactive: interactive?.button_reply?.title,
      })

// Find user by phone number
      const userResult = await DatabaseService.query("SELECT * FROM users WHERE phone_number = $1", [from])

if (userResult.rows.length === 0) {
        // Send welcome message for new users
        await this.sendTextMessage(
          from,
          `Welcome to MediCheck! 🏥\n\nTo get started, please download our app or visit our website to create an account.\n\nFor emergencies, reply EMERGENCY followed by your location.`,
        )
        return
      }

const user = userResult.rows[0]

// Handle different message types
      if (type === "text") {
        await this.handleTextMessage(from, text.body, user)
      } else if (type === "interactive") {
        await this.handleInteractiveMessage(from, interactive, user)
      }
    } catch (error) {
      console.error("[v0] Handle incoming WhatsApp message error:", error)
    }
  }

// Handle text messages
  private static async handleTextMessage(from: string, message: string, user: any): Promise<void> {
    const lowerMessage = message.toLowerCase().trim()

if (lowerMessage.startsWith("emergency")) {
      // Handle emergency requests
      const location = message.substring(9).trim()
      await this.sendTextMessage(
        from,
        `🚨 Emergency request received!\n\nLocation: ${location}\n\nEmergency services have been notified. Please stay calm and follow safety protocols.\n\nFor immediate assistance, call 108 or your local emergency number.`,
      )

// Create emergency request in database
      await DatabaseService.createEmergencyRequest({
        user_id: user.id,
        emergency_type: "General Emergency",
        address: location,
        description: `Emergency request via WhatsApp: ${message}`,
        priority_level: 5,
      })
    } else if (lowerMessage.includes("appointment")) {
      // Handle appointment queries
      await this.sendTextMessage(
        from,
        `📅 *Appointment Services*\n\nTo book an appointment:\n• Visit our app or website\n• Call our helpline\n• Use our online booking system\n\nFor existing appointments, please check your app for details.`,
      )
    } else if (lowerMessage.includes("medicine") || lowerMessage.includes("prescription")) {
      // Handle medicine queries
      await this.sendTextMessage(
        from,
        `💊 *Medicine & Prescription Services*\n\n• Upload prescriptions via our app\n• Find nearby pharmacies\n• Check medicine availability\n• Set medication reminders\n\nDownload the MediCheck app for full features!`,
      )
    } else {
      // Default response
      await this.sendTextMessage(
        from,
        `Hello ${user.name}! 👋\n\nI'm your MediCheck assistant. I can help you with:\n\n🏥 Hospital information\n📅 Appointment reminders\n💊 Medicine reminders\n🚨 Emergency services\n\nFor full features, please use our mobile app or website.`,
      )
    }
  }

// Handle interactive button responses
  private static async handleInteractiveMessage(from: string, interactive: any, user: any): Promise<void> {
    const buttonId = interactive.button_reply?.id || interactive.list_reply?.id

if (buttonId?.startsWith("reschedule_")) {
      const appointmentId = buttonId.split("_")[1]
      await this.sendTextMessage(
        from,
        `📅 To reschedule appointment #${appointmentId}, please:\n\n1. Open the MediCheck app\n2. Go to 'My Appointments'\n3. Select the appointment to reschedule\n\nOr call our helpline for assistance.`,
      )
    } else if (buttonId?.startsWith("cancel_")) {
      const appointmentId = buttonId.split("_")[1]
      await this.sendTextMessage(
        from,
        `❌ To cancel appointment #${appointmentId}, please:\n\n1. Open the MediCheck app\n2. Go to 'My Appointments'\n3. Select the appointment to cancel\n\nNote: Cancellation policies may apply.`,
      )
    } else if (buttonId?.startsWith("directions_")) {
      await this.sendTextMessage(
        from,
        `🗺️ *Getting Directions*\n\nFor directions to the hospital:\n\n1. Open Google Maps\n2. Search for the hospital name\n3. Tap 'Directions'\n\nOr check the hospital details in your MediCheck app for the exact address.`,
      )
    }
  }

// Verify WhatsApp webhook
  static verifyWebhook(mode: string, token: string, challenge: string): string | null {
    const VERIFY_TOKEN = process.env.WHATSAPP_VERIFY_TOKEN

if (mode === "subscribe" && token === VERIFY_TOKEN) {
      console.log("[v0] WhatsApp webhook verified successfully")
      return challenge
    } else {
      console.error("[v0] WhatsApp webhook verification failed")
      return null
    }
  }
}

export default WhatsAppService
[V0_FILE]typescriptreact:file="app/api/whatsapp/webhook/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { WhatsAppService } from "@/lib/whatsapp-service"

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const mode = searchParams.get("hub.mode")
    const token = searchParams.get("hub.verify_token")
    const challenge = searchParams.get("hub.challenge")

if (!mode || !token || !challenge) {
      return NextResponse.json({ error: "Missing required parameters" }, { status: 400 })
    }

const verificationResult = WhatsAppService.verifyWebhook(mode, token, challenge)

if (verificationResult) {
      return new NextResponse(verificationResult, { status: 200 })
    } else {
      return NextResponse.json({ error: "Webhook verification failed" }, { status: 403 })
    }
  } catch (error: any) {
    console.error("[v0] WhatsApp webhook verification error:", error)
    return NextResponse.json({ error: "Webhook verification failed" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

console.log("[v0] WhatsApp webhook received:", JSON.stringify(body, null, 2))

// Process incoming messages
    if (body.entry && body.entry[0]?.changes) {
      for (const change of body.entry[0].changes) {
        if (change.field === "messages" && change.value?.messages) {
          for (const message of change.value.messages) {
            await WhatsAppService.handleIncomingMessage(message)
          }
        }
      }
    }

return NextResponse.json({ success: true })
  } catch (error: any) {
    console.error("[v0] WhatsApp webhook processing error:", error)
    return NextResponse.json({ error: "Failed to process webhook" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/whatsapp/send/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { WhatsAppService } from "@/lib/whatsapp-service"
import { getUserFromRequest } from "@/lib/auth"

const body = await request.json()
    const { phone_number, message_type, data } = body

if (!phone_number || !message_type) {
      return NextResponse.json({ error: "Phone number and message type are required" }, { status: 400 })
    }

let success = false

switch (message_type) {
      case "appointment_reminder":
        success = await WhatsAppService.sendAppointmentReminder(
          phone_number,
          data.patient_name,
          data.doctor_name,
          data.appointment_date,
          data.appointment_time,
          data.hospital_name,
        )
        break

case "appointment_confirmation":
        success = await WhatsAppService.sendAppointmentConfirmation(
          phone_number,
          data.patient_name,
          data.appointment_id,
          data.doctor_name,
          data.appointment_date,
          data.appointment_time,
          data.hospital_name,
        )
        break

case "medicine_reminder":
        success = await WhatsAppService.sendMedicineReminder(
          phone_number,
          data.patient_name,
          data.medicine_name,
          data.dosage,
          data.instructions,
        )
        break

case "emergency_alert":
        success = await WhatsAppService.sendEmergencyAlert(
          phone_number,
          data.patient_name,
          data.emergency_type,
          data.hospital_name,
          data.estimated_time,
        )
        break

case "text":
        success = await WhatsAppService.sendTextMessage(phone_number, data.message)
        break

default:
        return NextResponse.json({ error: "Invalid message type" }, { status: 400 })
    }

if (success) {
      console.log("[v0] WhatsApp message sent successfully:", {
        userId: user.id,
        phoneNumber: phone_number,
        messageType: message_type,
      })

return NextResponse.json({
        success: true,
        message: "WhatsApp message sent successfully",
      })
    } else {
      return NextResponse.json({ error: "Failed to send WhatsApp message" }, { status: 500 })
    }
  } catch (error: any) {
    console.error("[v0] WhatsApp send API error:", error)
    return NextResponse.json({ error: "Failed to send WhatsApp message" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/whatsapp/status/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getUserFromRequest } from "@/lib/auth"

// Check if WhatsApp credentials are configured
    const isConfigured = !!(
      process.env.WHATSAPP_PHONE_NUMBER_ID &&
      process.env.WHATSAPP_ACCESS_TOKEN &&
      process.env.WHATSAPP_VERIFY_TOKEN
    )

const status = {
      is_configured: isConfigured,
      phone_number_id: process.env.WHATSAPP_PHONE_NUMBER_ID ? "Configured" : "Not configured",
      access_token: process.env.WHATSAPP_ACCESS_TOKEN ? "Configured" : "Not configured",
      verify_token: process.env.WHATSAPP_VERIFY_TOKEN ? "Configured" : "Not configured",
      webhook_url: `${process.env.NEXT_PUBLIC_APP_URL || "https://your-app.vercel.app"}/api/whatsapp/webhook`,
      features: {
        appointment_reminders: isConfigured,
        medicine_reminders: isConfigured,
        emergency_alerts: isConfigured,
        interactive_messages: isConfigured,
        incoming_message_handling: isConfigured,
      },
    }

console.log("[v0] WhatsApp status checked:", {
      userId: user.id,
      isConfigured,
    })

return NextResponse.json({
      success: true,
      status: status,
    })
  } catch (error: any) {
    console.error("[v0] WhatsApp status API error:", error)
    return NextResponse.json({ error: "Failed to check WhatsApp status" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="lib/database.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { Pool } from "pg"
import { WhatsAppService } from "./whatsapp-service"

// Create a connection pool
const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: process.env.NODE_ENV === "production" ? { rejectUnauthorized: false } : false,
  max: 20,
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
})

// Database query function with error handling
export async function query(text: string, params?: any[]) {
  const start = Date.now()
  try {
    const res = await pool.query(text, params)
    const duration = Date.now() - start
    console.log("[v0] Database query executed", { text, duration, rows: res.rowCount })
    return res
  } catch (error) {
    console.error("[v0] Database query error:", error)
    throw error
  }
}

// Get a client from the pool for transactions
export async function getClient() {
  return await pool.connect()
}

// Database models and types
export interface User {
  id: number
  email: string
  name: string
  phone?: string
  gender?: string
  age?: number
  location?: string
  created_at: Date
  updated_at: Date
}

export interface Hospital {
  id: number
  name: string
  address: string
  phone?: string
  email?: string
  latitude?: number
  longitude?: number
  rating: number
  total_beds: number
  available_beds: number
  emergency_contact?: string
  specialties: string[]
  op_fee: number
  created_at: Date
  updated_at: Date
}

export interface Doctor {
  id: number
  name: string
  email?: string
  phone: string
  specialty: string
  degrees: string[]
  experience_years: number
  hospital_id: number
  consultation_fee: number
  rating: number
  profile_image_url?: string
  available_days: string[]
  available_times: string[]
  created_at: Date
  updated_at: Date
}

export interface Appointment {
  id: number
  user_id: number
  doctor_id: number
  hospital_id: number
  appointment_date: Date
  appointment_time: string
  status: "scheduled" | "confirmed" | "completed" | "cancelled"
  appointment_type: "op" | "emergency" | "home_visit"
  consultation_fee: number
  payment_status: "pending" | "paid" | "refunded"
  payment_method?: string
  notes?: string
  queue_position?: number
  estimated_wait_time?: number
  notification_sent: boolean
  created_at: Date
  updated_at: Date
}

export interface Medicine {
  id: number
  name: string
  generic_name?: string
  category: string
  manufacturer?: string
  description?: string
  dosage_form: string
  strength: string
  price: number
  requires_prescription: boolean
  created_at: Date
  updated_at: Date
}

export interface Pharmacy {
  id: number
  name: string
  address: string
  phone?: string
  latitude?: number
  longitude?: number
  is_24_hours: boolean
  opening_time?: string
  closing_time?: string
  rating: number
  created_at: Date
  updated_at: Date
}

export interface EmergencyRequest {
  id: number
  user_id: number
  emergency_type: string
  location_latitude?: number
  location_longitude?: number
  address?: string
  description?: string
  status: "active" | "responded" | "resolved"
  priority_level: number
  assigned_hospital_id?: number
  response_time?: Date
  created_at: Date
  updated_at: Date
}

export interface Notification {
  id: number
  user_id: number
  title: string
  message: string
  type: "info" | "appointment" | "emergency" | "medicine"
  is_read: boolean
  scheduled_for?: Date
  sent_at?: Date
  data?: any
  created_at: Date
}

// Utility functions for common database operations
export class DatabaseService {
  // User operations
  static async createUser(userData: Partial<User>): Promise<User> {
    const { email, password_hash, name, phone, gender, age, location } = userData as any
    const result = await query(
      `INSERT INTO users (email, password_hash, name, phone, gender, age, location) 
       VALUES ($1, $2, $3, $4, $5, $6, $7) 
       RETURNING *`,
      [email, password_hash, name, phone, gender, age, location],
    )
    return result.rows[0]
  }

static async getUserByEmail(email: string): Promise<User | null> {
    const result = await query("SELECT * FROM users WHERE email = $1", [email])
    return result.rows[0] || null
  }

static async getUserById(id: number): Promise<User | null> {
    const result = await query("SELECT * FROM users WHERE id = $1", [id])
    return result.rows[0] || null
  }

// Hospital operations
  static async getNearbyHospitals(latitude: number, longitude: number, radius = 10): Promise<Hospital[]> {
    const result = await query(
      `SELECT *, 
       (6371 * acos(cos(radians($1)) * cos(radians(latitude)) * cos(radians(longitude) - radians($2)) + sin(radians($1)) * sin(radians(latitude)))) AS distance
       FROM hospitals 
       WHERE latitude IS NOT NULL AND longitude IS NOT NULL
       HAVING distance < $3
       ORDER BY distance`,
      [latitude, longitude, radius],
    )
    return result.rows
  }

static async getHospitalById(id: number): Promise<Hospital | null> {
    const result = await query("SELECT * FROM hospitals WHERE id = $1", [id])
    return result.rows[0] || null
  }

// Doctor operations
  static async getDoctorsByHospital(hospitalId: number): Promise<Doctor[]> {
    const result = await query("SELECT * FROM doctors WHERE hospital_id = $1 ORDER BY rating DESC", [hospitalId])
    return result.rows
  }

static async getDoctorById(id: number): Promise<Doctor | null> {
    const result = await query("SELECT * FROM doctors WHERE id = $1", [id])
    return result.rows[0] || null
  }

static async searchDoctors(query: string): Promise<Doctor[]> {
    const result = await query(
      `SELECT d.*, h.name as hospital_name 
       FROM doctors d 
       JOIN hospitals h ON d.hospital_id = h.id 
       WHERE d.name ILIKE $1 OR d.specialty ILIKE $1 OR h.name ILIKE $1
       ORDER BY d.rating DESC`,
      [`%${query}%`],
    )
    return result.rows
  }

// Appointment operations
  static async createAppointment(appointmentData: Partial<Appointment>): Promise<Appointment> {
    const {
      user_id,
      doctor_id,
      hospital_id,
      appointment_date,
      appointment_time,
      appointment_type,
      consultation_fee,
      notes,
    } = appointmentData as any

const result = await query(
      `INSERT INTO appointments (user_id, doctor_id, hospital_id, appointment_date, appointment_time, appointment_type, consultation_fee, notes) 
       VALUES ($1, $2, $3, $4, $5, $6, $7, $8) 
       RETURNING *`,
      [user_id, doctor_id, hospital_id, appointment_date, appointment_time, appointment_type, consultation_fee, notes],
    )
    return result.rows[0]
  }

static async getUserAppointments(userId: number): Promise<Appointment[]> {
    const result = await query(
      `SELECT a.*, d.name as doctor_name, d.specialty, h.name as hospital_name, h.address as hospital_address
       FROM appointments a
       JOIN doctors d ON a.doctor_id = d.id
       JOIN hospitals h ON a.hospital_id = h.id
       WHERE a.user_id = $1
       ORDER BY a.appointment_date DESC, a.appointment_time DESC`,
      [userId],
    )
    return result.rows
  }

// Medicine operations
  static async searchMedicines(searchQuery: string): Promise<Medicine[]> {
    const result = await query(
      `SELECT * FROM medicines 
       WHERE name ILIKE $1 OR generic_name ILIKE $1 OR category ILIKE $1
       ORDER BY name`,
      [`%${searchQuery}%`],
    )
    return result.rows
  }

static async getMedicineAvailability(medicineId: number, latitude?: number, longitude?: number): Promise<any[]> {
    let queryText = `
      SELECT p.*, pi.stock_quantity, pi.price, pi.expiry_date,
      m.name as medicine_name, m.strength, m.dosage_form
      FROM pharmacy_inventory pi
      JOIN pharmacies p ON pi.pharmacy_id = p.id
      JOIN medicines m ON pi.medicine_id = m.id
      WHERE pi.medicine_id = $1 AND pi.stock_quantity > 0
    `

const params = [medicineId]

if (latitude && longitude) {
      queryText += `, (6371 * acos(cos(radians($2)) * cos(radians(p.latitude)) * cos(radians(p.longitude) - radians($3)) + sin(radians($2)) * sin(radians(p.latitude)))) AS distance
        ORDER BY distance`
      params.push(latitude, longitude)
    } else {
      queryText += " ORDER BY p.name"
    }

const result = await query(queryText, params)
    return result.rows
  }

// Emergency operations
  static async createEmergencyRequest(data: {
    user_id: number
    emergency_type: string
    location_latitude?: number
    location_longitude?: number
    address?: string
    description?: string
    priority_level?: number
    assigned_hospital_id?: number
  }): Promise<any> {
    try {
      const result = await this.query(
        `INSERT INTO emergency_requests (user_id, emergency_type, location_latitude, location_longitude, address, description, priority_level, assigned_hospital_id, status)
         VALUES ($1, $2, $3, $4, $5, $6, $7, $8, 'active')
         RETURNING *`,
        [
          data.user_id,
          data.emergency_type,
          data.location_latitude,
          data.location_longitude,
          data.address,
          data.description,
          data.priority_level || 3,
          data.assigned_hospital_id,
        ],
      )

const emergencyRequest = result.rows[0]

// Send WhatsApp notification if user has phone number
      const userResult = await this.query("SELECT name, phone_number FROM users WHERE id = $1", [data.user_id])

if (userResult.rows.length > 0) {
        const user = userResult.rows[0]
        if (user.phone_number) {
          let hospitalName = "Emergency Services"
          if (data.assigned_hospital_id) {
            const hospitalResult = await this.query("SELECT name FROM hospitals WHERE id = $1", [
              data.assigned_hospital_id,
            ])
            if (hospitalResult.rows.length > 0) {
              hospitalName = hospitalResult.rows[0].name
            }
          }

await WhatsAppService.sendEmergencyAlert(
            user.phone_number,
            user.name,
            data.emergency_type,
            hospitalName,
            "8-12 minutes",
          )
        }
      }

return emergencyRequest
    } catch (error) {
      console.error("[v0] Create emergency request error:", error)
      throw error
    }
  }

// Notification operations
  static async createNotification(notificationData: Partial<Notification>): Promise<Notification> {
    const { user_id, title, message, type, scheduled_for, data } = notificationData as any

const result = await query(
      `INSERT INTO notifications (user_id, title, message, type, scheduled_for, data) 
       VALUES ($1, $2, $3, $4, $5, $6) 
       RETURNING *`,
      [user_id, title, message, type, scheduled_for, JSON.stringify(data)],
    )
    return result.rows[0]
  }

static async getUserNotifications(userId: number, limit = 50): Promise<Notification[]> {
    const result = await query(
      `SELECT * FROM notifications 
       WHERE user_id = $1 
       ORDER BY created_at DESC 
       LIMIT $2`,
      [userId, limit],
    )
    return result.rows
  }

// Queue management
  static async updateHospitalQueue(
    hospitalId: number,
    doctorId: number,
    queueLength: number,
    avgWaitTime: number,
  ): Promise<void> {
    await query(
      `INSERT INTO hospital_queues (hospital_id, doctor_id, current_queue_length, average_wait_time, last_updated)
       VALUES ($1, $2, $3, $4, CURRENT_TIMESTAMP)
       ON CONFLICT (hospital_id, doctor_id) 
       DO UPDATE SET 
         current_queue_length = $3,
         average_wait_time = $4,
         last_updated = CURRENT_TIMESTAMP`,
      [hospitalId, doctorId, queueLength, avgWaitTime],
    )
  }

static async getHospitalQueue(hospitalId: number, doctorId?: number): Promise<any[]> {
    let queryText = "SELECT * FROM hospital_queues WHERE hospital_id = $1"
    const params = [hospitalId]

if (doctorId) {
      queryText += " AND doctor_id = $2"
      params.push(doctorId)
    }

const result = await query(queryText, params)
    return result.rows
  }
}

export default pool
[V0_FILE]typescriptreact:file="app/api/appointments/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"
import { getUserFromRequest } from "@/lib/auth"

const appointments = await DatabaseService.getUserAppointments(user.id)

console.log("[v0] User appointments fetched:", { userId: user.id, count: appointments.length })

return NextResponse.json({
      success: true,
      appointments: appointments,
    })
  } catch (error: any) {
    console.error("[v0] Get appointments API error:", error)
    return NextResponse.json({ error: "Failed to fetch appointments" }, { status: 500 })
  }
}

const body = await request.json()
    const {
      doctor_id,
      hospital_id,
      appointment_date,
      appointment_time,
      appointment_type = "op",
      notes,
      payment_method,
    } = body

// Validate required fields
    if (!doctor_id || !hospital_id || !appointment_date || !appointment_time) {
      return NextResponse.json({ error: "Doctor, hospital, date, and time are required" }, { status: 400 })
    }

// Get doctor details for consultation fee
    const doctor = await DatabaseService.getDoctorById(doctor_id)
    if (!doctor) {
      return NextResponse.json({ error: "Doctor not found" }, { status: 404 })
    }

if (appointment_type === "op") {
      const appointmentDateTime = new Date(`${appointment_date} ${appointment_time}`)
      const hourStart = new Date(appointmentDateTime)
      hourStart.setMinutes(0, 0, 0)
      const hourEnd = new Date(hourStart)
      hourEnd.setHours(hourEnd.getHours() + 1)

const hourlyAppointments = await DatabaseService.query(
        `
        SELECT COUNT(*) as count 
        FROM appointments 
        WHERE doctor_id = $1 AND appointment_date = $2 
        AND appointment_time >= $3 AND appointment_time < $4
        AND appointment_type = 'op' AND status NOT IN ('cancelled')
      `,
        [doctor_id, appointment_date, hourStart.toTimeString().slice(0, 8), hourEnd.toTimeString().slice(0, 8)],
      )

const currentHourlyCount = Number.parseInt(hourlyAppointments.rows[0].count)
      if (currentHourlyCount >= 4) {
        return NextResponse.json(
          {
            error:
              "This hour is fully booked. Only 4 OP appointments allowed per hour. Please select a different time slot.",
          },
          { status: 409 },
        )
      }
    }

// Check if appointment slot is available
    const existingAppointment = await DatabaseService.query(
      `
      SELECT id FROM appointments 
      WHERE doctor_id = $1 AND appointment_date = $2 AND appointment_time = $3 
      AND status NOT IN ('cancelled')
    `,
      [doctor_id, appointment_date, appointment_time],
    )

if (existingAppointment.rows.length > 0) {
      return NextResponse.json({ error: "This time slot is already booked" }, { status: 409 })
    }

// Create appointment
    const appointment = await DatabaseService.createAppointment({
      user_id: user.id,
      doctor_id,
      hospital_id,
      appointment_date,
      appointment_time,
      appointment_type,
      consultation_fee: doctor.consultation_fee,
      notes,
      payment_method,
    })

// Update queue position
    const queueResult = await DatabaseService.query(
      `
      SELECT COUNT(*) as position 
      FROM appointments 
      WHERE doctor_id = $1 AND appointment_date = $2 
      AND appointment_time <= $3 AND status = 'scheduled'
    `,
      [doctor_id, appointment_date, appointment_time],
    )

const queuePosition = Number.parseInt(queueResult.rows[0].position)

// Update appointment with queue position
    await DatabaseService.query(
      `
      UPDATE appointments 
      SET queue_position = $1, estimated_wait_time = $2 
      WHERE id = $3
    `,
      [queuePosition, queuePosition * 15, appointment.id],
    )

// Create notification for appointment reminder
    await DatabaseService.createNotification({
      user_id: user.id,
      title: "Appointment Confirmed",
      message: `Your appointment with ${doctor.name} is confirmed for ${appointment_date} at ${appointment_time}`,
      type: "appointment",
      scheduled_for: new Date(new Date(`${appointment_date} ${appointment_time}`).getTime() - 10 * 60 * 1000), // 10 minutes before
      data: { appointment_id: appointment.id },
    })

console.log("[v0] Appointment created successfully:", {
      appointmentId: appointment.id,
      userId: user.id,
      doctorId: doctor_id,
    })

return NextResponse.json({
      success: true,
      message: "Appointment booked successfully",
      appointment: {
        ...appointment,
        queue_position: queuePosition,
        estimated_wait_time: queuePosition * 15,
        doctor_name: doctor.name,
        doctor_specialty: doctor.specialty,
      },
    })
  } catch (error: any) {
    console.error("[v0] Create appointment API error:", error)
    return NextResponse.json({ error: "Failed to book appointment" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/appointments/available-slots/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { DatabaseService } from "@/lib/database"

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const doctorId = searchParams.get("doctor_id")
    const date = searchParams.get("date")
    const appointmentType = searchParams.get("type") || "op"

if (!doctorId || !date) {
      return NextResponse.json({ error: "Doctor ID and date are required" }, { status: 400 })
    }

// Generate time slots for the day (9 AM to 6 PM, 15-minute intervals)
    const timeSlots = []
    for (let hour = 9; hour < 18; hour++) {
      for (let minute = 0; minute < 60; minute += 15) {
        const timeString = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}:00`
        timeSlots.push(timeString)
      }
    }

// Get existing appointments for the day
    const existingAppointments = await DatabaseService.query(
      `
      SELECT appointment_time, appointment_type 
      FROM appointments 
      WHERE doctor_id = $1 AND appointment_date = $2 
      AND status NOT IN ('cancelled')
    `,
      [doctorId, date],
    )

const bookedSlots = new Set(existingAppointments.rows.map((row) => row.appointment_time))

// For OP appointments, check hourly limits
    const hourlyOPCounts = new Map()
    if (appointmentType === "op") {
      existingAppointments.rows
        .filter((row) => row.appointment_type === "op")
        .forEach((row) => {
          const hour = row.appointment_time.slice(0, 2)
          hourlyOPCounts.set(hour, (hourlyOPCounts.get(hour) || 0) + 1)
        })
    }

// Filter available slots
    const availableSlots = timeSlots.filter((slot) => {
      // Skip if slot is already booked
      if (bookedSlots.has(slot)) return false

// For OP appointments, check if hour has reached limit of 4
      if (appointmentType === "op") {
        const hour = slot.slice(0, 2)
        const currentCount = hourlyOPCounts.get(hour) || 0
        if (currentCount >= 4) return false
      }

return true
    })

// Format slots for display
    const formattedSlots = availableSlots.map((slot) => {
      const [hours, minutes] = slot.split(":")
      const hour24 = Number.parseInt(hours)
      const hour12 = hour24 > 12 ? hour24 - 12 : hour24 === 0 ? 12 : hour24
      const ampm = hour24 >= 12 ? "PM" : "AM"
      return {
        value: slot,
        display: `${hour12}:${minutes} ${ampm}`,
        available: true,
      }
    })

return NextResponse.json({
      success: true,
      date,
      doctor_id: doctorId,
      appointment_type: appointmentType,
      available_slots: formattedSlots,
      total_available: formattedSlots.length,
      op_limit_info:
        appointmentType === "op"
          ? {
              max_per_hour: 4,
              message: "Only 4 OP appointments allowed per hour",
            }
          : null,
    })
  } catch (error: any) {
    console.error("[v0] Available slots API error:", error)
    return NextResponse.json({ error: "Failed to fetch available slots" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/booking/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Calendar, Clock, MapPin, Star, ArrowLeft, Phone, Navigation, Stethoscope } from "lucide-react"
import Link from "next/link"

// Mock data for doctors
const doctorsData = [
  {
    id: 1,
    name: "Dr. Priya Sharma",
    specialty: "Cardiologist",
    hospital: "Apollo Hospital",
    rating: 4.8,
    experience: "15 years",
    distance: "2.3 km",
    status: "On Time",
    nextSlot: "10:30 AM",
    waitTime: "15 mins",
    consultationFee: 800,
    image: "/female-doctor.png",
    degrees: "MBBS, MD (Cardiology), DM (Cardiology)",
    phone: "+91 98765 43210",
    hospitalAddress: "21, Greams Lane, Off Greams Road, Chennai - 600006",
    languages: ["English", "Hindi", "Tamil"],
    awards: ["Best Cardiologist 2023", "Excellence in Patient Care"],
  },
  {
    id: 2,
    name: "Dr. Rajesh Kumar",
    specialty: "General Physician",
    hospital: "Max Healthcare",
    rating: 4.6,
    experience: "12 years",
    distance: "1.8 km",
    status: "Delayed by 20 mins",
    nextSlot: "11:00 AM",
    waitTime: "35 mins",
    consultationFee: 600,
    image: "/male-doctor.png",
    degrees: "MBBS, MD (Internal Medicine)",
    phone: "+91 98765 43211",
    hospitalAddress: "1, Press Enclave Road, Saket, New Delhi - 110017",
    languages: ["English", "Hindi"],
    awards: ["Patient Choice Award 2022"],
  },
  {
    id: 3,
    name: "Dr. Anita Patel",
    specialty: "Pediatrician",
    hospital: "Fortis Hospital",
    rating: 4.9,
    experience: "18 years",
    distance: "3.1 km",
    status: "On Time",
    nextSlot: "2:15 PM",
    waitTime: "10 mins",
    consultationFee: 700,
    image: "/female-pediatrician.png",
    degrees: "MBBS, MD (Pediatrics), Fellowship in Neonatology",
    phone: "+91 98765 43212",
    hospitalAddress: "114, Thanikachalam Road, T. Nagar, Chennai - 600017",
    languages: ["English", "Hindi", "Tamil", "Gujarati"],
    awards: ["Best Pediatrician 2023", "Child Care Excellence Award"],
  },
  {
    id: 4,
    name: "Dr. Samaram",
    specialty: "General Physician & Sexologist",
    hospital: "Samaram Clinic",
    rating: 4.9,
    experience: "25 years",
    distance: "1.5 km",
    status: "On Time",
    nextSlot: "9:30 AM",
    waitTime: "5 mins",
    consultationFee: 500,
    image: "/placeholder-p5uee.png",
    degrees: "MBBS, MD (General Medicine), Diploma in Sexology",
    phone: "+91 98765 43213",
    hospitalAddress: "Samaram Clinic, Hyderabad, Telangana - 500001",
    languages: ["Telugu", "English", "Hindi"],
    awards: ["Best General Physician 2023", "Community Health Excellence Award"],
  },
]

const specialties = [
  "All Specialties",
  "Cardiologist",
  "General Physician",
  "Pediatrician",
  "Dermatologist",
  "Orthopedic",
  "Gynecologist",
  "Neurologist",
  "Psychiatrist",
  "ENT Specialist",
  "Ophthalmologist",
  "Dentist",
  "Urologist",
  "Gastroenterologist",
  "Pulmonologist",
  "Endocrinologist",
  "Oncologist",
  "Nephrologist",
  "Rheumatologist",
]

const specialtyConfig: Record<string, { icon: string; color: string; bgColor: string }> = {
  "All Specialties": { icon: "🏥", color: "text-slate-600", bgColor: "bg-slate-100" },
  Cardiologist: { icon: "❤️", color: "text-red-600", bgColor: "bg-red-100" },
  "General Physician": { icon: "👨‍⚕️", color: "text-blue-600", bgColor: "bg-blue-100" },
  Pediatrician: { icon: "👶", color: "text-pink-600", bgColor: "bg-pink-100" },
  Dermatologist: { icon: "🧴", color: "text-amber-600", bgColor: "bg-amber-100" },
  Orthopedic: { icon: "🦴", color: "text-gray-600", bgColor: "bg-gray-100" },
  Gynecologist: { icon: "👩", color: "text-purple-600", bgColor: "bg-purple-100" },
  Neurologist: { icon: "🧠", color: "text-indigo-600", bgColor: "bg-indigo-100" },
  Psychiatrist: { icon: "🧘", color: "text-teal-600", bgColor: "bg-teal-100" },
  "ENT Specialist": { icon: "👂", color: "text-orange-600", bgColor: "bg-orange-100" },
  Ophthalmologist: { icon: "👁️", color: "text-cyan-600", bgColor: "bg-cyan-100" },
  Dentist: { icon: "🦷", color: "text-sky-600", bgColor: "bg-sky-100" },
  Urologist: { icon: "🩺", color: "text-emerald-600", bgColor: "bg-emerald-100" },
  Gastroenterologist: { icon: "🫁", color: "text-lime-600", bgColor: "bg-lime-100" },
  Pulmonologist: { icon: "🫀", color: "text-rose-600", bgColor: "bg-rose-100" },
  Endocrinologist: { icon: "⚗️", color: "text-violet-600", bgColor: "bg-violet-100" },
  Oncologist: { icon: "🔬", color: "text-fuchsia-600", bgColor: "bg-fuchsia-100" },
  Nephrologist: { icon: "💧", color: "text-blue-600", bgColor: "bg-blue-100" },
  Rheumatologist: { icon: "🤲", color: "text-yellow-600", bgColor: "bg-yellow-100" },
}

export default function BookingPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedSpecialty, setSelectedSpecialty] = useState("All Specialties")
  const [selectedDoctor, setSelectedDoctor] = useState<number | null>(null)
  const [showDoctorDetails, setShowDoctorDetails] = useState(false)
  const [showLocationForm, setShowLocationForm] = useState(false)
  const [selectedDate, setSelectedDate] = useState("")
  const [availableSlots, setAvailableSlots] = useState<any[]>([])
  const [selectedSlot, setSelectedSlot] = useState("")
  const [isLoadingSlots, setIsLoadingSlots] = useState(false)
  const [showSpecialtyFilter, setShowSpecialtyFilter] = useState(false)
  const [locationData, setLocationData] = useState({
    address: "",
    street: "",
    doorNo: "",
  })

const filteredDoctors = doctorsData.filter((doctor) => {
    const matchesSearch =
      doctor.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      doctor.specialty.toLowerCase().includes(searchQuery.toLowerCase()) ||
      doctor.hospital.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesSpecialty = selectedSpecialty === "All Specialties" || doctor.specialty === selectedSpecialty
    return matchesSearch && matchesSpecialty
  })

const getStatusColor = (status: string) => {
    if (status === "On Time") return "bg-secondary text-secondary-foreground"
    if (status.includes("Delayed")) return "bg-yellow-100 text-yellow-800"
    return "bg-destructive text-destructive-foreground"
  }

const fetchAvailableSlots = async (doctorId: number, date: string) => {
    setIsLoadingSlots(true)
    try {
      const response = await fetch(`/api/appointments/available-slots?doctor_id=${doctorId}&date=${date}&type=op`)
      const data = await response.json()

if (data.success) {
        setAvailableSlots(data.available_slots)
      } else {
        console.error("Failed to fetch slots:", data.error)
        setAvailableSlots([])
      }
    } catch (error) {
      console.error("Error fetching slots:", error)
      setAvailableSlots([])
    } finally {
      setIsLoadingSlots(false)
    }
  }

const handleTreatClick = () => {
    setShowLocationForm(true)
  }

useEffect(() => {
    if (selectedDoctor && !selectedDate) {
      const today = new Date().toISOString().split("T")[0]
      setSelectedDate(today)
    }
  }, [selectedDoctor])

useEffect(() => {
    if (selectedDoctor && selectedDate) {
      fetchAvailableSlots(selectedDoctor, selectedDate)
    }
  }, [selectedDoctor, selectedDate])

const handleBookClick = (doctorId: number) => {
    setSelectedDoctor(doctorId)
    setShowDoctorDetails(false)
    const today = new Date().toISOString().split("T")[0]
    setSelectedDate(today)
  }

const handleSlotBooking = async () => {
    if (!selectedDoctor || !selectedSlot || !selectedDate) return

try {
      const response = await fetch("/api/appointments", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          doctor_id: selectedDoctor,
          hospital_id: 1, // Default hospital
          appointment_date: selectedDate,
          appointment_time: selectedSlot,
          appointment_type: "op",
          payment_method: "cash",
        }),
      })

const data = await response.json()

if (data.success) {
        alert(`OP Appointment booked successfully! Queue position: ${data.appointment.queue_position}`)
        setSelectedDoctor(null)
        setSelectedSlot("")
        setSelectedDate("")
      } else {
        alert(`Booking failed: ${data.error}`)
      }
    } catch (error) {
      console.error("Booking error:", error)
      alert("Failed to book appointment. Please try again.")
    }
  }

const selectedDoctorData = doctorsData.find((d) => d.id === selectedDoctor)

<div className="space-y-3">
            <Input
              placeholder="Search doctors, hospitals, or specialties..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="text-base h-12 bg-input border-border"
            />

{/* Specialty Filter Chips */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium text-muted-foreground">Filter by Specialty</span>
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs"
                  onClick={() => setShowSpecialtyFilter(!showSpecialtyFilter)}
                >
                  {showSpecialtyFilter ? "Show Less" : "Show All"}
                </Button>
              </div>

<div className="flex flex-wrap gap-2">
                {(showSpecialtyFilter ? specialties : specialties.slice(0, 6)).map((specialty) => {
                  const config = specialtyConfig[specialty] || specialtyConfig["All Specialties"]
                  const isSelected = selectedSpecialty === specialty
                  return (
                    <Button
                      key={specialty}
                      variant={isSelected ? "default" : "outline"}
                      size="sm"
                      className={`text-xs rounded-full ${
                        isSelected
                          ? "bg-primary text-primary-foreground"
                          : `${config.bgColor} ${config.color} border-transparent hover:opacity-80`
                      }`}
                      onClick={() => setSelectedSpecialty(specialty)}
                    >
                      <span className="mr-1">{config.icon}</span>
                      {specialty === "All Specialties" ? "All" : specialty}
                    </Button>
                  )
                })}
              </div>
            </div>

{/* Results count */}
            <div className="flex items-center justify-between text-sm text-muted-foreground">
              <span>{filteredDoctors.length} doctors found</span>
              {selectedSpecialty !== "All Specialties" && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs text-primary"
                  onClick={() => setSelectedSpecialty("All Specialties")}
                >
                  Clear filter
                </Button>
              )}
            </div>
          </div>
        </div>
      </header>

{/* Doctor List */}
      <main className="max-w-md mx-auto px-4 py-6 space-y-4">
        {filteredDoctors.map((doctor) => (
          <Card key={doctor.id} className="hover:shadow-md transition-shadow">
            <CardContent className="p-4">
              <div className="flex gap-4">
                {/* Doctor Image */}
                <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center overflow-hidden">
                  <img
                    src={doctor.image || "/placeholder.svg"}
                    alt={doctor.name}
                    className="w-full h-full object-cover"
                  />
                </div>

{/* Doctor Info */}
                <div className="flex-1 space-y-2">
                  <div>
                    <h3 className="font-semibold text-card-foreground text-lg">{doctor.name}</h3>
                    <p className="text-sm text-muted-foreground">{doctor.specialty}</p>
                    <p className="text-sm text-muted-foreground">{doctor.hospital}</p>
                  </div>

<div className="flex items-center gap-2">
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      <span className="text-sm font-medium">{doctor.rating}</span>
                    </div>
                    <span className="text-sm text-muted-foreground">•</span>
                    <span className="text-sm text-muted-foreground">{doctor.experience}</span>
                  </div>

<div className="flex items-center gap-2">
                    <MapPin className="w-4 h-4 text-muted-foreground" />
                    <span className="text-sm text-muted-foreground">{doctor.distance} away</span>
                  </div>
                </div>
              </div>

{/* Status and Timing */}
              <div className="mt-4 space-y-3">
                <div className="flex items-center justify-between">
                  <Badge className={getStatusColor(doctor.status)}>{doctor.status}</Badge>
                  <span className="text-sm font-medium text-card-foreground">₹{doctor.consultationFee}</span>
                </div>

<div className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-1">
                    <Clock className="w-4 h-4 text-primary" />
                    <span className="text-card-foreground">Next: {doctor.nextSlot}</span>
                  </div>
                  <span className="text-muted-foreground">Wait: {doctor.waitTime}</span>
                </div>

{/* Action Buttons */}
                <div className="flex gap-2 pt-2">
                  <Button className="flex-1 h-10" onClick={() => handleBookClick(doctor.id)}>
                    <Calendar className="w-4 h-4 mr-2" />
                    Book Now
                  </Button>
                  <Button variant="outline" size="sm" className="px-3 bg-transparent">
                    <Phone className="w-4 h-4" />
                  </Button>
                  <Button variant="outline" size="sm" className="px-3 bg-transparent">
                    <Navigation className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}

{filteredDoctors.length === 0 && (
          <Card>
            <CardContent className="p-8 text-center">
              <Stethoscope className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="font-semibold text-card-foreground mb-2">No doctors found</h3>
              <p className="text-sm text-muted-foreground">Try adjusting your search or specialty filter</p>
            </CardContent>
          </Card>
        )}
      </main>

{selectedDoctor && (
        <div className="fixed inset-0 bg-black/50 flex items-end z-50">
          <div className="bg-card w-full max-w-md mx-auto rounded-t-xl max-h-[90vh] overflow-y-auto">
            {!showLocationForm ? (
              <div className="p-6 space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-card-foreground">
                    {showDoctorDetails ? "Doctor Details" : "Book OP Appointment"}
                  </h3>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => {
                      setSelectedDoctor(null)
                      setShowDoctorDetails(false)
                      setShowLocationForm(false)
                      setSelectedSlot("")
                      setSelectedDate("")
                    }}
                    className="p-2"
                  >
                    ×
                  </Button>
                </div>

{showDoctorDetails && selectedDoctorData ? (
                  <div className="space-y-4">
                    <div className="flex gap-4">
                      <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center overflow-hidden">
                        <img
                          src={selectedDoctorData.image || "/placeholder.svg"}
                          alt={selectedDoctorData.name}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div className="flex-1">
                        <h4 className="font-semibold text-lg text-card-foreground">{selectedDoctorData.name}</h4>
                        <p className="text-sm text-muted-foreground">{selectedDoctorData.specialty}</p>
                        <div className="flex items-center gap-1 mt-1">
                          <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                          <span className="text-sm font-medium">{selectedDoctorData.rating}</span>
                          <span className="text-sm text-muted-foreground">• {selectedDoctorData.experience}</span>
                        </div>
                      </div>
                    </div>

<div className="space-y-3">
                      <div>
                        <h5 className="font-medium text-card-foreground mb-1">Qualifications</h5>
                        <p className="text-sm text-muted-foreground">{selectedDoctorData.degrees}</p>
                      </div>

<div>
                        <h5 className="font-medium text-card-foreground mb-1">Contact</h5>
                        <div className="flex items-center gap-2">
                          <Phone className="w-4 h-4 text-primary" />
                          <span className="text-sm text-card-foreground">{selectedDoctorData.phone}</span>
                        </div>
                      </div>

<div>
                        <h5 className="font-medium text-card-foreground mb-1">Hospital</h5>
                        <p className="text-sm text-muted-foreground">{selectedDoctorData.hospital}</p>
                        <p className="text-sm text-muted-foreground">{selectedDoctorData.hospitalAddress}</p>
                      </div>

<div>
                        <h5 className="font-medium text-card-foreground mb-1">Languages</h5>
                        <div className="flex flex-wrap gap-1">
                          {selectedDoctorData.languages.map((lang) => (
                            <Badge key={lang} variant="outline" className="text-xs">
                              {lang}
                            </Badge>
                          ))}
                        </div>
                      </div>

{selectedDoctorData.awards && (
                        <div>
                          <h5 className="font-medium text-card-foreground mb-1">Awards & Recognition</h5>
                          <div className="space-y-1">
                            {selectedDoctorData.awards.map((award, index) => (
                              <p key={index} className="text-sm text-muted-foreground">
                                • {award}
                              </p>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>

<div className="pt-4 space-y-3">
                      <Button className="w-full h-12 text-base" onClick={handleTreatClick}>
                        <Stethoscope className="w-5 h-5 mr-2" />
                        Treat
                      </Button>
                      <p className="text-xs text-center text-muted-foreground">
                        Click to set your location for home consultation
                      </p>
                    </div>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div>
                      <label className="text-sm font-medium text-card-foreground mb-2 block">Select Date</label>
                      <input
                        type="date"
                        value={selectedDate}
                        onChange={(e) => setSelectedDate(e.target.value)}
                        min={new Date().toISOString().split("T")[0]}
                        className="w-full h-12 px-3 border border-border rounded-md bg-input text-card-foreground"
                      />
                    </div>

<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                      <div className="flex items-center gap-2 mb-1">
                        <Clock className="w-4 h-4 text-blue-600" />
                        <span className="text-sm font-medium text-blue-800">OP Appointment Info</span>
                      </div>
                      <p className="text-xs text-blue-700">• Only 4 OP appointments allowed per hour</p>
                      <p className="text-xs text-blue-700">• 15-minute consultation slots</p>
                    </div>

<div>
                      <label className="text-sm font-medium text-card-foreground mb-2 block">
                        Available Time Slots
                      </label>
                      {isLoadingSlots ? (
                        <div className="text-center py-4">
                          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto"></div>
                          <p className="text-sm text-muted-foreground mt-2">Loading available slots...</p>
                        </div>
                      ) : availableSlots.length > 0 ? (
                        <div className="grid grid-cols-3 gap-2 max-h-48 overflow-y-auto">
                          {availableSlots.map((slot) => (
                            <Button
                              key={slot.value}
                              variant={selectedSlot === slot.value ? "default" : "outline"}
                              className="h-10 text-xs bg-transparent"
                              onClick={() => setSelectedSlot(slot.value)}
                            >
                              {slot.display}
                            </Button>
                          ))}
                        </div>
                      ) : (
                        <div className="text-center py-4 bg-muted rounded-lg">
                          <Clock className="w-8 h-8 text-muted-foreground mx-auto mb-2" />
                          <p className="text-sm text-muted-foreground">No slots available for selected date</p>
                          <p className="text-xs text-muted-foreground">Try selecting a different date</p>
                        </div>
                      )}
                    </div>

<div className="pt-4 space-y-3">
                      <Button
                        className="w-full h-12 text-base"
                        onClick={handleSlotBooking}
                        disabled={!selectedSlot || isLoadingSlots}
                      >
                        <Calendar className="w-5 h-5 mr-2" />
                        {selectedSlot
                          ? `Book ${availableSlots.find((s) => s.value === selectedSlot)?.display}`
                          : "Select Time Slot"}
                      </Button>
                      <Button
                        variant="outline"
                        className="w-full h-12 text-base bg-transparent"
                        onClick={() => setShowDoctorDetails(true)}
                      >
                        View Doctor Details
                      </Button>
                      <p className="text-xs text-center text-muted-foreground">
                        You'll receive confirmation via SMS & WhatsApp
                      </p>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <div className="p-6 space-y-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-card-foreground">Set Your Location</h3>
                  <Button variant="ghost" size="sm" onClick={() => setShowLocationForm(false)} className="p-2">
                    ←
                  </Button>
                </div>

<div className="space-y-4">
                  <div>
                    <label className="text-sm font-medium text-card-foreground mb-2 block">Current Location</label>
                    <Input
                      placeholder="Enter your current address"
                      value={locationData.address}
                      onChange={(e) => setLocationData({ ...locationData, address: e.target.value })}
                      className="text-base h-12"
                    />
                  </div>

<div>
                    <label className="text-sm font-medium text-card-foreground mb-2 block">Street Name</label>
                    <Input
                      placeholder="Enter street name"
                      value={locationData.street}
                      onChange={(e) => setLocationData({ ...locationData, street: e.target.value })}
                      className="text-base h-12"
                    />
                  </div>

<div>
                    <label className="text-sm font-medium text-card-foreground mb-2 block">Door Number</label>
                    <Input
                      placeholder="Enter door/house number"
                      value={locationData.doorNo}
                      onChange={(e) => setLocationData({ ...locationData, doorNo: e.target.value })}
                      className="text-base h-12"
                    />
                  </div>

<div className="bg-primary/5 border border-primary/20 rounded-lg p-4">
                    <div className="flex items-center gap-2 mb-2">
                      <MapPin className="w-5 h-5 text-primary" />
                      <h4 className="font-semibold text-primary">Home Consultation</h4>
                    </div>
                    <p className="text-sm text-card-foreground mb-2">
                      Dr. {selectedDoctorData?.name} will visit you at your location
                    </p>
                    <ul className="text-sm text-muted-foreground space-y-1">
                      <li>• Additional charges: ₹200 for home visit</li>
                      <li>• Estimated arrival: 30-45 minutes</li>
                      <li>• Consultation duration: 20-30 minutes</li>
                    </ul>
                  </div>

<Button
                    className="w-full h-12 text-base"
                    disabled={!locationData.address || !locationData.street || !locationData.doorNo}
                    onClick={() => {
                      alert(
                        `Home consultation booked! Dr. ${selectedDoctorData?.name} will visit you at: ${locationData.doorNo}, ${locationData.street}, ${locationData.address}`,
                      )
                      setSelectedDoctor(null)
                      setShowDoctorDetails(false)
                      setShowLocationForm(false)
                      setLocationData({ address: "", street: "", doorNo: "" })
                    }}
                  >
                    <Calendar className="w-5 h-5 mr-2" />
                    Confirm Home Visit
                  </Button>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/consultation/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import {
  Video,
  Phone,
  Clock,
  Star,
  User,
  MessageCircle,
  Camera,
  Mic,
  MicOff,
  VideoOff,
  PhoneOff,
  Search,
  ChevronLeft,
  Heart,
  Stethoscope,
  Brain,
  Bone,
  Baby,
  Eye,
  Zap,
} from "lucide-react"

export default function VideoConsultation() {
  const [selectedSpecialty, setSelectedSpecialty] = useState("")
  const [selectedDoctor, setSelectedDoctor] = useState(null)
  const [showBooking, setShowBooking] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [isVideoCall, setIsVideoCall] = useState(false)
  const [isMuted, setIsMuted] = useState(false)
  const [isVideoOff, setIsVideoOff] = useState(false)
  const [consultationData, setConsultationData] = useState({
    symptoms: "",
    duration: "",
    previousMedication: "",
  })

const specialties = [
    { id: "general", name: "General Physician", icon: Stethoscope, color: "bg-blue-100 text-blue-700" },
    { id: "cardiology", name: "Cardiology", icon: Heart, color: "bg-red-100 text-red-700" },
    { id: "neurology", name: "Neurology", icon: Brain, color: "bg-purple-100 text-purple-700" },
    { id: "orthopedic", name: "Orthopedic", icon: Bone, color: "bg-green-100 text-green-700" },
    { id: "pediatrics", name: "Pediatrics", icon: Baby, color: "bg-pink-100 text-pink-700" },
    { id: "ophthalmology", name: "Ophthalmology", icon: Eye, color: "bg-yellow-100 text-yellow-700" },
    { id: "emergency", name: "Emergency", icon: Zap, color: "bg-orange-100 text-orange-700" },
  ]

const doctors = [
    {
      id: 1,
      name: "Dr. Priya Sharma",
      specialty: "Cardiology",
      experience: "15 years",
      rating: 4.9,
      reviews: 1250,
      consultationFee: 800,
      nextAvailable: "Today 2:30 PM",
      languages: ["English", "Hindi", "Tamil"],
      qualifications: "MBBS, MD Cardiology, AIIMS Delhi",
      avatar: "/female-doctor.png",
      isOnline: true,
      specialtyId: "cardiology",
    },
    {
      id: 2,
      name: "Dr. Rajesh Kumar",
      specialty: "General Physician",
      experience: "12 years",
      rating: 4.8,
      reviews: 980,
      consultationFee: 500,
      nextAvailable: "Today 3:00 PM",
      languages: ["English", "Hindi"],
      qualifications: "MBBS, MD Internal Medicine",
      avatar: "/male-doctor.png",
      isOnline: true,
      specialtyId: "general",
    },
    {
      id: 3,
      name: "Dr. Anita Patel",
      specialty: "Pediatrics",
      experience: "10 years",
      rating: 4.9,
      reviews: 750,
      consultationFee: 600,
      nextAvailable: "Tomorrow 10:00 AM",
      languages: ["English", "Hindi", "Gujarati"],
      qualifications: "MBBS, MD Pediatrics",
      avatar: "/female-pediatrician.png",
      isOnline: false,
      specialtyId: "pediatrics",
    },
    {
      id: 4,
      name: "Dr. Suresh Reddy",
      specialty: "Orthopedic",
      experience: "18 years",
      rating: 4.7,
      reviews: 1100,
      consultationFee: 900,
      nextAvailable: "Today 4:30 PM",
      languages: ["English", "Telugu", "Hindi"],
      qualifications: "MBBS, MS Orthopedics",
      avatar: "/male-orthopedic-doctor.png",
      isOnline: true,
      specialtyId: "orthopedic",
    },
  ]

const filteredDoctors = doctors.filter((doctor) => {
    const matchesSpecialty = !selectedSpecialty || doctor.specialtyId === selectedSpecialty
    const matchesSearch =
      !searchQuery ||
      doctor.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      doctor.specialty.toLowerCase().includes(searchQuery.toLowerCase())
    return matchesSpecialty && matchesSearch
  })

if (isVideoCall) {
    return (
      <div className="min-h-screen bg-black relative">
        {/* Video Call Interface */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/20 to-black/60">
          {/* Doctor Video */}
          <div className="w-full h-full bg-gray-900 flex items-center justify-center">
            <div className="text-center text-white">
              <div className="w-32 h-32 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
                <User className="w-16 h-16" />
              </div>
              <h3 className="text-xl font-semibold">{selectedDoctor?.name}</h3>
              <p className="text-gray-300">{selectedDoctor?.specialty}</p>
            </div>
          </div>

{/* Patient Video (Picture-in-Picture) */}
          <div className="absolute top-4 right-4 w-32 h-24 bg-gray-800 rounded-lg overflow-hidden border-2 border-white/20">
            <div className="w-full h-full bg-gray-700 flex items-center justify-center">
              <User className="w-8 h-8 text-white" />
            </div>
          </div>

{/* Call Controls */}
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
            <div className="flex items-center gap-4 bg-black/50 backdrop-blur-sm rounded-full px-6 py-4">
              <Button
                variant="ghost"
                size="lg"
                className={`rounded-full w-14 h-14 ${isMuted ? "bg-red-500 hover:bg-red-600" : "bg-white/20 hover:bg-white/30"} text-white`}
                onClick={() => setIsMuted(!isMuted)}
              >
                {isMuted ? <MicOff className="w-6 h-6" /> : <Mic className="w-6 h-6" />}
              </Button>

<Button
                variant="ghost"
                size="lg"
                className={`rounded-full w-14 h-14 ${isVideoOff ? "bg-red-500 hover:bg-red-600" : "bg-white/20 hover:bg-white/30"} text-white`}
                onClick={() => setIsVideoOff(!isVideoOff)}
              >
                {isVideoOff ? <VideoOff className="w-6 h-6" /> : <Camera className="w-6 h-6" />}
              </Button>

<Button
                variant="ghost"
                size="lg"
                className="rounded-full w-14 h-14 bg-red-500 hover:bg-red-600 text-white"
                onClick={() => setIsVideoCall(false)}
              >
                <PhoneOff className="w-6 h-6" />
              </Button>

{/* Call Info */}
          <div className="absolute top-4 left-4 bg-black/50 backdrop-blur-sm rounded-lg px-4 py-2">
            <div className="flex items-center gap-2 text-white">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
              <span className="text-sm">Connected • 05:23</span>
            </div>
          </div>
        </div>
      </div>
    )
  }

if (showBooking && selectedDoctor) {
    return (
      <div className="min-h-screen bg-background">
        <header className="bg-card border-b border-border px-4 py-4">
          <div className="max-w-md mx-auto flex items-center gap-3">
            <Button variant="ghost" size="sm" onClick={() => setShowBooking(false)}>
              <ChevronLeft className="w-4 h-4" />
            </Button>
            <h1 className="text-xl font-bold text-primary">Book Consultation</h1>
          </div>
        </header>

<main className="max-w-md mx-auto px-4 py-6 space-y-6">
          {/* Doctor Info */}
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <img
                  src={selectedDoctor.avatar || "/placeholder.svg"}
                  alt={selectedDoctor.name}
                  className="w-16 h-16 rounded-full object-cover"
                />
                <div className="flex-1">
                  <h3 className="font-semibold text-card-foreground">{selectedDoctor.name}</h3>
                  <p className="text-sm text-muted-foreground">{selectedDoctor.specialty}</p>
                  <div className="flex items-center gap-2 mt-1">
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 text-yellow-500 fill-current" />
                      <span className="text-sm font-medium">{selectedDoctor.rating}</span>
                    </div>
                    <Badge variant="outline" className="text-xs">
                      ₹{selectedDoctor.consultationFee}
                    </Badge>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Consultation Form */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Tell us about your symptoms</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <label className="text-sm font-medium text-card-foreground mb-2 block">Describe your symptoms</label>
                <Textarea
                  placeholder="Please describe your symptoms in detail..."
                  value={consultationData.symptoms}
                  onChange={(e) => setConsultationData({ ...consultationData, symptoms: e.target.value })}
                  className="min-h-[100px]"
                />
              </div>

<div>
                <label className="text-sm font-medium text-card-foreground mb-2 block">
                  How long have you had these symptoms?
                </label>
                <Input
                  placeholder="e.g., 2 days, 1 week"
                  value={consultationData.duration}
                  onChange={(e) => setConsultationData({ ...consultationData, duration: e.target.value })}
                />
              </div>

<div>
                <label className="text-sm font-medium text-card-foreground mb-2 block">
                  Current medications (if any)
                </label>
                <Input
                  placeholder="List any medications you're currently taking"
                  value={consultationData.previousMedication}
                  onChange={(e) => setConsultationData({ ...consultationData, previousMedication: e.target.value })}
                />
              </div>
            </CardContent>
          </Card>

{/* Consultation Options */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Choose consultation type</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <Button
                variant="outline"
                className="w-full justify-start h-14 bg-transparent"
                onClick={() => setIsVideoCall(true)}
              >
                <Video className="w-5 h-5 mr-3 text-primary" />
                <div className="text-left">
                  <p className="font-medium">Video Consultation</p>
                  <p className="text-sm text-muted-foreground">Face-to-face consultation</p>
                </div>
              </Button>

<Button variant="outline" className="w-full justify-start h-14 bg-transparent">
                <Phone className="w-5 h-5 mr-3 text-secondary-foreground" />
                <div className="text-left">
                  <p className="font-medium">Voice Call</p>
                  <p className="text-sm text-muted-foreground">Audio-only consultation</p>
                </div>
              </Button>

<Button variant="outline" className="w-full justify-start h-14 bg-transparent">
                <MessageCircle className="w-5 h-5 mr-3 text-accent-foreground" />
                <div className="text-left">
                  <p className="font-medium">Chat Consultation</p>
                  <p className="text-sm text-muted-foreground">Text-based consultation</p>
                </div>
              </Button>
            </CardContent>
          </Card>

{/* Booking Summary */}
          <Card className="bg-primary/5 border-primary/20">
            <CardContent className="p-4">
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Consultation Fee:</span>
                  <span className="font-medium">₹{selectedDoctor.consultationFee}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">Platform Fee:</span>
                  <span className="font-medium">₹50</span>
                </div>
                <hr />
                <div className="flex justify-between">
                  <span className="font-medium">Total Amount:</span>
                  <span className="font-bold text-primary">₹{selectedDoctor.consultationFee + 50}</span>
                </div>
              </div>
            </CardContent>
          </Card>

<Button className="w-full h-12 text-base">Book Consultation - ₹{selectedDoctor.consultationFee + 50}</Button>
        </main>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <header className="bg-card border-b border-border px-4 py-6">
        <div className="max-w-md mx-auto">
          <div className="flex items-center gap-3 mb-4">
            <Button variant="ghost" size="sm" onClick={() => (window.location.href = "/")}>
              <ChevronLeft className="w-4 h-4" />
            </Button>
            <div>
              <h1 className="text-2xl font-bold text-primary">Video Consultation</h1>
              <p className="text-sm text-muted-foreground">Connect with doctors online</p>
            </div>
          </div>

{/* Search Bar */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
            <Input
              placeholder="Search doctors by name or specialty..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 text-base h-12"
            />
          </div>
        </div>
      </header>

<main className="max-w-md mx-auto px-4 py-6 space-y-6">
        {/* Specialties Filter */}
        <div>
          <h2 className="text-lg font-semibold text-card-foreground mb-3">Choose Specialty</h2>
          <div className="grid grid-cols-2 gap-3">
            {specialties.map((specialty) => {
              const IconComponent = specialty.icon
              return (
                <Card
                  key={specialty.id}
                  className={`cursor-pointer transition-all ${
                    selectedSpecialty === specialty.id ? "ring-2 ring-primary bg-primary/5" : "hover:shadow-md"
                  }`}
                  onClick={() => setSelectedSpecialty(selectedSpecialty === specialty.id ? "" : specialty.id)}
                >
                  <CardContent className="p-4 text-center">
                    <div
                      className={`w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2 ${specialty.color}`}
                    >
                      <IconComponent className="w-6 h-6" />
                    </div>
                    <h3 className="font-medium text-sm text-card-foreground">{specialty.name}</h3>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>

{/* Available Doctors */}
        <div>
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-lg font-semibold text-card-foreground">Available Doctors</h2>
            <Badge variant="secondary">{filteredDoctors.length} doctors</Badge>
          </div>

<div className="space-y-4">
            {filteredDoctors.map((doctor) => (
              <Card key={doctor.id} className="hover:shadow-md transition-shadow">
                <CardContent className="p-4">
                  <div className="flex items-start gap-4">
                    <div className="relative">
                      <img
                        src={doctor.avatar || "/placeholder.svg"}
                        alt={doctor.name}
                        className="w-16 h-16 rounded-full object-cover"
                      />
                      {doctor.isOnline && (
                        <div className="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full border-2 border-white flex items-center justify-center">
                          <div className="w-2 h-2 bg-white rounded-full"></div>
                        </div>
                      )}
                    </div>

<div className="flex-1">
                      <div className="flex items-start justify-between mb-2">
                        <div>
                          <h3 className="font-semibold text-card-foreground">{doctor.name}</h3>
                          <p className="text-sm text-muted-foreground">{doctor.specialty}</p>
                          <p className="text-xs text-muted-foreground">{doctor.experience} experience</p>
                        </div>
                        <Badge variant={doctor.isOnline ? "secondary" : "outline"} className="text-xs">
                          {doctor.isOnline ? "Online" : "Offline"}
                        </Badge>
                      </div>

<div className="flex items-center gap-4 mb-3">
                        <div className="flex items-center gap-1">
                          <Star className="w-4 h-4 text-yellow-500 fill-current" />
                          <span className="text-sm font-medium">{doctor.rating}</span>
                          <span className="text-xs text-muted-foreground">({doctor.reviews})</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Clock className="w-4 h-4 text-primary" />
                          <span className="text-sm">{doctor.nextAvailable}</span>
                        </div>
                      </div>

<div className="flex flex-wrap gap-1 mb-3">
                        {doctor.languages.map((lang) => (
                          <Badge key={lang} variant="outline" className="text-xs">
                            {lang}
                          </Badge>
                        ))}
                      </div>

<div className="flex items-center justify-between">
                        <div>
                          <span className="text-sm font-medium text-primary">₹{doctor.consultationFee}</span>
                          <span className="text-xs text-muted-foreground ml-1">consultation</span>
                        </div>
                        <Button
                          size="sm"
                          onClick={() => {
                            setSelectedDoctor(doctor)
                            setShowBooking(true)
                          }}
                          disabled={!doctor.isOnline}
                        >
                          {doctor.isOnline ? "Consult Now" : "Schedule"}
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{filteredDoctors.length === 0 && (
          <Card>
            <CardContent className="p-8 text-center">
              <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
                <Search className="w-8 h-8 text-muted-foreground" />
              </div>
              <h3 className="font-semibold text-card-foreground mb-2">No doctors found</h3>
              <p className="text-sm text-muted-foreground">Try adjusting your search or specialty filter</p>
            </CardContent>
          </Card>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/consultation/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/consultations/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"

const sql = neon(process.env.DATABASE_URL!)

export async function POST(request: NextRequest) {
  try {
    const { doctorId, patientId, consultationType, symptoms, duration, medications, scheduledAt } = await request.json()

// Create consultation record
    const consultation = await sql`
      INSERT INTO consultations (
        doctor_id, patient_id, consultation_type, symptoms, duration, 
        current_medications, scheduled_at, status, created_at
      ) VALUES (
        ${doctorId}, ${patientId}, ${consultationType}, ${symptoms}, 
        ${duration}, ${medications}, ${scheduledAt}, 'scheduled', NOW()
      ) RETURNING *
    `

// Generate video call room if needed
    let roomId = null
    if (consultationType === "video") {
      roomId = `consultation_${consultation[0].id}_${Date.now()}`

await sql`
        UPDATE consultations 
        SET video_room_id = ${roomId}
        WHERE id = ${consultation[0].id}
      `
    }

return NextResponse.json({
      success: true,
      consultation: consultation[0],
      roomId,
    })
  } catch (error) {
    console.error("Consultation booking error:", error)
    return NextResponse.json({ success: false, error: "Failed to book consultation" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const patientId = searchParams.get("patientId")
    const status = searchParams.get("status")

let query = `
      SELECT c.*, d.name as doctor_name, d.specialty, d.avatar_url
      FROM consultations c
      JOIN doctors d ON c.doctor_id = d.id
      WHERE 1=1
    `

const params: any[] = []

if (patientId) {
      query += ` AND c.patient_id = $${params.length + 1}`
      params.push(patientId)
    }

if (status) {
      query += ` AND c.status = $${params.length + 1}`
      params.push(status)
    }

query += ` ORDER BY c.scheduled_at DESC`

const consultations = await sql(query, params)

return NextResponse.json({
      success: true,
      consultations,
    })
  } catch (error) {
    console.error("Get consultations error:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch consultations" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/doctors/specialties/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"

const sql = neon(process.env.DATABASE_URL!)

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const specialty = searchParams.get("specialty")
    const isOnline = searchParams.get("online")
    const search = searchParams.get("search")

let query = `
      SELECT d.*, 
        AVG(r.rating) as avg_rating,
        COUNT(r.id) as review_count,
        CASE WHEN d.last_active > NOW() - INTERVAL '15 minutes' THEN true ELSE false END as is_online
      FROM doctors d
      LEFT JOIN reviews r ON d.id = r.doctor_id
      WHERE d.is_active = true
    `

const params: any[] = []

if (specialty) {
      query += ` AND LOWER(d.specialty) = LOWER($${params.length + 1})`
      params.push(specialty)
    }

if (search) {
      query += ` AND (LOWER(d.name) LIKE LOWER($${params.length + 1}) OR LOWER(d.specialty) LIKE LOWER($${params.length + 1}))`
      params.push(`%${search}%`)
    }

query += ` GROUP BY d.id`

if (isOnline === "true") {
      query += ` HAVING CASE WHEN d.last_active > NOW() - INTERVAL '15 minutes' THEN true ELSE false END = true`
    }

query += ` ORDER BY avg_rating DESC NULLS LAST, d.consultation_fee ASC`

const doctors = await sql(query, params)

// Format the response
    const formattedDoctors = doctors.map((doctor) => ({
      ...doctor,
      avg_rating: doctor.avg_rating ? Number.parseFloat(doctor.avg_rating).toFixed(1) : null,
      review_count: Number.parseInt(doctor.review_count) || 0,
      is_online: doctor.is_online || false,
    }))

return NextResponse.json({
      success: true,
      doctors: formattedDoctors,
    })
  } catch (error) {
    console.error("Get doctors by specialty error:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch doctors" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/04-consultation-tables.sql" isMerged="true"
-- Create consultations table
CREATE TABLE IF NOT EXISTS consultations (
  id SERIAL PRIMARY KEY,
  doctor_id INTEGER REFERENCES doctors(id),
  patient_id INTEGER REFERENCES users(id),
  consultation_type VARCHAR(20) NOT NULL CHECK (consultation_type IN ('video', 'voice', 'chat')),
  symptoms TEXT,
  duration VARCHAR(100),
  current_medications TEXT,
  scheduled_at TIMESTAMP WITH TIME ZONE,
  started_at TIMESTAMP WITH TIME ZONE,
  ended_at TIMESTAMP WITH TIME ZONE,
  status VARCHAR(20) DEFAULT 'scheduled' CHECK (status IN ('scheduled', 'in_progress', 'completed', 'cancelled', 'no_show')),
  video_room_id VARCHAR(255),
  prescription_id INTEGER,
  notes TEXT,
  follow_up_required BOOLEAN DEFAULT false,
  follow_up_date TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create consultation_messages table for chat consultations
CREATE TABLE IF NOT EXISTS consultation_messages (
  id SERIAL PRIMARY KEY,
  consultation_id INTEGER REFERENCES consultations(id),
  sender_id INTEGER REFERENCES users(id),
  sender_type VARCHAR(10) CHECK (sender_type IN ('doctor', 'patient')),
  message TEXT NOT NULL,
  message_type VARCHAR(20) DEFAULT 'text' CHECK (message_type IN ('text', 'image', 'file', 'prescription')),
  file_url VARCHAR(500),
  is_read BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create reviews table for doctor ratings
CREATE TABLE IF NOT EXISTS reviews (
  id SERIAL PRIMARY KEY,
  doctor_id INTEGER REFERENCES doctors(id),
  patient_id INTEGER REFERENCES users(id),
  consultation_id INTEGER REFERENCES consultations(id),
  rating INTEGER CHECK (rating >= 1 AND rating <= 5),
  review_text TEXT,
  is_anonymous BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(consultation_id) -- One review per consultation
);

-- Add indexes for better performance
CREATE INDEX IF NOT EXISTS idx_consultations_doctor_id ON consultations(doctor_id);
CREATE INDEX IF NOT EXISTS idx_consultations_patient_id ON consultations(patient_id);
CREATE INDEX IF NOT EXISTS idx_consultations_scheduled_at ON consultations(scheduled_at);
CREATE INDEX IF NOT EXISTS idx_consultations_status ON consultations(status);
CREATE INDEX IF NOT EXISTS idx_consultation_messages_consultation_id ON consultation_messages(consultation_id);
CREATE INDEX IF NOT EXISTS idx_reviews_doctor_id ON reviews(doctor_id);

-- Update doctors table to include consultation-specific fields
ALTER TABLE doctors 
ADD COLUMN IF NOT EXISTS consultation_fee INTEGER DEFAULT 500,
ADD COLUMN IF NOT EXISTS video_consultation_enabled BOOLEAN DEFAULT true,
ADD COLUMN IF NOT EXISTS voice_consultation_enabled BOOLEAN DEFAULT true,
ADD COLUMN IF NOT EXISTS chat_consultation_enabled BOOLEAN DEFAULT true,
ADD COLUMN IF NOT EXISTS last_active TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
ADD COLUMN IF NOT EXISTS avatar_url VARCHAR(500);

-- Insert sample consultation data
INSERT INTO consultations (doctor_id, patient_id, consultation_type, symptoms, duration, scheduled_at, status) VALUES
(1, 1, 'video', 'Chest pain and shortness of breath', '2 days', NOW() + INTERVAL '2 hours', 'scheduled'),
(2, 1, 'chat', 'Fever and headache', '3 days', NOW() + INTERVAL '1 day', 'scheduled'),
(3, 1, 'voice', 'Child has persistent cough', '1 week', NOW() + INTERVAL '3 hours', 'scheduled')
ON CONFLICT DO NOTHING;

-- Insert sample reviews
INSERT INTO reviews (doctor_id, patient_id, consultation_id, rating, review_text) VALUES
(1, 1, 1, 5, 'Excellent doctor, very thorough examination and clear explanation'),
(2, 1, 2, 4, 'Good consultation, helpful advice and quick response'),
(3, 1, 3, 5, 'Great with children, very patient and understanding')
ON CONFLICT DO NOTHING;
[V0_FILE]png:file="public/male-orthopedic-doctor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/male-orthopedic-doctor-j4G1EeW7Npl8Xmb5EgFCuuX5kQCTtX.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/prescriptions/page.tsx" isMerged="true"
"use client"

import { useState, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Camera,
  Upload,
  FileText,
  Calendar,
  Share,
  Search,
  ChevronLeft,
  Eye,
  ShoppingCart,
  AlertCircle,
  CheckCircle,
  Plus,
  X,
  Loader2,
} from "lucide-react"

export default function PrescriptionManagement() {
  const [activeTab, setActiveTab] = useState("all")
  const [showScanner, setShowScanner] = useState(false)
  const [showUpload, setShowUpload] = useState(false)
  const [isScanning, setIsScanning] = useState(false)
  const [scannedData, setScannedData] = useState(null)
  const [searchQuery, setSearchQuery] = useState("")
  const fileInputRef = useRef(null)

const prescriptions = [
    {
      id: 1,
      doctorName: "Dr. Priya Sharma",
      doctorSpecialty: "Cardiologist",
      date: "2024-01-15",
      diagnosis: "Hypertension",
      medicines: [
        { name: "Amlodipine", dosage: "5mg", frequency: "Once daily", duration: "30 days" },
        { name: "Metoprolol", dosage: "25mg", frequency: "Twice daily", duration: "30 days" },
      ],
      status: "active",
      type: "digital",
      followUp: "2024-02-15",
    },
    {
      id: 2,
      doctorName: "Dr. Rajesh Kumar",
      doctorSpecialty: "General Physician",
      date: "2024-01-10",
      diagnosis: "Viral Fever",
      medicines: [
        { name: "Paracetamol", dosage: "500mg", frequency: "Three times daily", duration: "5 days" },
        { name: "Azithromycin", dosage: "250mg", frequency: "Once daily", duration: "3 days" },
      ],
      status: "completed",
      type: "scanned",
      followUp: null,
    },
    {
      id: 3,
      doctorName: "Dr. Anita Patel",
      doctorSpecialty: "Pediatrician",
      date: "2024-01-08",
      diagnosis: "Allergic Rhinitis",
      medicines: [
        { name: "Cetirizine", dosage: "5mg", frequency: "Once daily", duration: "14 days" },
        { name: "Nasal Spray", dosage: "2 sprays", frequency: "Twice daily", duration: "7 days" },
      ],
      status: "active",
      type: "digital",
      followUp: "2024-01-22",
    },
  ]

const filteredPrescriptions = prescriptions.filter((prescription) => {
    const matchesTab = activeTab === "all" || prescription.status === activeTab
    const matchesSearch =
      !searchQuery ||
      prescription.doctorName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      prescription.diagnosis.toLowerCase().includes(searchQuery.toLowerCase()) ||
      prescription.medicines.some((med) => med.name.toLowerCase().includes(searchQuery.toLowerCase()))
    return matchesTab && matchesSearch
  })

const handleFileUpload = (event) => {
    const file = event.target.files[0]
    if (file) {
      setIsScanning(true)
      // Simulate OCR processing
      setTimeout(() => {
        setScannedData({
          doctorName: "Dr. Sample Doctor",
          date: new Date().toISOString().split("T")[0],
          diagnosis: "Common Cold",
          medicines: [
            { name: "Paracetamol", dosage: "500mg", frequency: "Three times daily", duration: "5 days" },
            { name: "Cough Syrup", dosage: "10ml", frequency: "Twice daily", duration: "7 days" },
          ],
        })
        setIsScanning(false)
        setShowUpload(false)
      }, 3000)
    }
  }

const handleCameraCapture = () => {
    setShowScanner(true)
    setIsScanning(true)
    // Simulate camera capture and OCR
    setTimeout(() => {
      setScannedData({
        doctorName: "Dr. Camera Captured",
        date: new Date().toISOString().split("T")[0],
        diagnosis: "Headache",
        medicines: [{ name: "Ibuprofen", dosage: "400mg", frequency: "Twice daily", duration: "3 days" }],
      })
      setIsScanning(false)
      setShowScanner(false)
    }, 4000)
  }

if (showScanner) {
    return (
      <div className="min-h-screen bg-black relative">
        <div className="absolute inset-0 bg-black flex items-center justify-center">
          {isScanning ? (
            <div className="text-center text-white">
              <div className="w-32 h-32 border-4 border-white/30 border-t-white rounded-full animate-spin mx-auto mb-4"></div>
              <h3 className="text-xl font-semibold mb-2">Scanning Prescription</h3>
              <p className="text-gray-300">AI is reading your prescription...</p>
            </div>
          ) : (
            <div className="text-center text-white">
              <div className="w-64 h-48 border-2 border-white/50 rounded-lg mb-4 flex items-center justify-center">
                <Camera className="w-16 h-16 text-white/70" />
              </div>
              <p className="text-gray-300">Position prescription within the frame</p>
            </div>
          )}
        </div>

<div className="absolute top-4 left-4">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setShowScanner(false)
              setIsScanning(false)
            }}
            className="text-white hover:bg-white/20"
          >
            <X className="w-4 h-4" />
          </Button>
        </div>

{!isScanning && (
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
            <Button
              size="lg"
              onClick={handleCameraCapture}
              className="rounded-full w-16 h-16 bg-white text-black hover:bg-gray-200"
            >
              <Camera className="w-8 h-8" />
            </Button>
          </div>
        )}
      </div>
    )
  }

if (scannedData) {
    return (
      <div className="min-h-screen bg-background">
        <header className="bg-card border-b border-border px-4 py-4">
          <div className="max-w-md mx-auto flex items-center gap-3">
            <Button variant="ghost" size="sm" onClick={() => setScannedData(null)}>
              <ChevronLeft className="w-4 h-4" />
            </Button>
            <h1 className="text-xl font-bold text-primary">Review Scanned Prescription</h1>
          </div>
        </header>

<main className="max-w-md mx-auto px-4 py-6 space-y-6">
          <Card className="bg-green-50 border-green-200">
            <CardContent className="p-4">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                  <CheckCircle className="w-5 h-5 text-green-600" />
                </div>
                <div>
                  <h3 className="font-semibold text-green-800">Prescription Scanned Successfully</h3>
                  <p className="text-sm text-green-600">AI has extracted the following information</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">Prescription Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <label className="text-sm font-medium text-card-foreground mb-2 block">Doctor Name</label>
                <Input value={scannedData.doctorName} readOnly />
              </div>
              <div>
                <label className="text-sm font-medium text-card-foreground mb-2 block">Date</label>
                <Input value={scannedData.date} readOnly />
              </div>
              <div>
                <label className="text-sm font-medium text-card-foreground mb-2 block">Diagnosis</label>
                <Input value={scannedData.diagnosis} readOnly />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle className="text-lg">Medicines</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {scannedData.medicines.map((medicine, index) => (
                <div key={index} className="border border-border rounded-lg p-4">
                  <div className="flex items-start justify-between mb-2">
                    <h4 className="font-semibold text-card-foreground">{medicine.name}</h4>
                    <Badge variant="outline">{medicine.dosage}</Badge>
                  </div>
                  <div className="space-y-1 text-sm text-muted-foreground">
                    <p>Frequency: {medicine.frequency}</p>
                    <p>Duration: {medicine.duration}</p>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>

<div className="space-y-3">
            <Button className="w-full h-12 text-base">
              <Plus className="w-5 h-5 mr-2" />
              Save to My Prescriptions
            </Button>
            <Button variant="outline" className="w-full h-12 text-base bg-transparent">
              <ShoppingCart className="w-5 h-5 mr-2" />
              Order Medicines
            </Button>
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <header className="bg-card border-b border-border px-4 py-6">
        <div className="max-w-md mx-auto">
          <div className="flex items-center gap-3 mb-4">
            <Button variant="ghost" size="sm" onClick={() => (window.location.href = "/")}>
              <ChevronLeft className="w-4 h-4" />
            </Button>
            <div>
              <h1 className="text-2xl font-bold text-primary">My Prescriptions</h1>
              <p className="text-sm text-muted-foreground">Manage your medical prescriptions</p>
            </div>
          </div>

{/* Search Bar */}
          <div className="relative mb-4">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
            <Input
              placeholder="Search prescriptions, doctors, or medicines..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 text-base h-12"
            />
          </div>

{/* Quick Actions */}
          <div className="grid grid-cols-2 gap-3">
            <Button variant="outline" className="h-14 bg-transparent" onClick={() => setShowScanner(true)}>
              <Camera className="w-5 h-5 mr-2" />
              Scan Prescription
            </Button>
            <Button variant="outline" className="h-14 bg-transparent" onClick={() => setShowUpload(true)}>
              <Upload className="w-5 h-5 mr-2" />
              Upload Image
            </Button>
          </div>
        </div>
      </header>

<main className="max-w-md mx-auto px-4 py-6 space-y-6">
        {/* Filter Tabs */}
        <div className="flex gap-2 overflow-x-auto pb-2">
          {[
            { id: "all", label: "All", count: prescriptions.length },
            { id: "active", label: "Active", count: prescriptions.filter((p) => p.status === "active").length },
            {
              id: "completed",
              label: "Completed",
              count: prescriptions.filter((p) => p.status === "completed").length,
            },
          ].map((tab) => (
            <Button
              key={tab.id}
              variant={activeTab === tab.id ? "default" : "outline"}
              size="sm"
              onClick={() => setActiveTab(tab.id)}
              className="whitespace-nowrap"
            >
              {tab.label} ({tab.count})
            </Button>
          ))}
        </div>

{/* Prescriptions List */}
        <div className="space-y-4">
          {filteredPrescriptions.map((prescription) => (
            <Card key={prescription.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-4">
                <div className="flex items-start justify-between mb-3">
                  <div>
                    <h3 className="font-semibold text-card-foreground">{prescription.doctorName}</h3>
                    <p className="text-sm text-muted-foreground">{prescription.doctorSpecialty}</p>
                    <div className="flex items-center gap-2 mt-1">
                      <Calendar className="w-4 h-4 text-muted-foreground" />
                      <span className="text-sm text-muted-foreground">{prescription.date}</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant={prescription.status === "active" ? "default" : "secondary"}>
                      {prescription.status}
                    </Badge>
                    <Badge variant="outline" className="text-xs">
                      {prescription.type}
                    </Badge>
                  </div>
                </div>

<div className="mb-3">
                  <p className="text-sm font-medium text-card-foreground mb-1">Diagnosis:</p>
                  <p className="text-sm text-muted-foreground">{prescription.diagnosis}</p>
                </div>

<div className="mb-4">
                  <p className="text-sm font-medium text-card-foreground mb-2">Medicines:</p>
                  <div className="space-y-2">
                    {prescription.medicines.slice(0, 2).map((medicine, index) => (
                      <div key={index} className="flex items-center justify-between bg-muted/50 rounded-lg p-2">
                        <div>
                          <p className="text-sm font-medium">{medicine.name}</p>
                          <p className="text-xs text-muted-foreground">
                            {medicine.dosage} • {medicine.frequency}
                          </p>
                        </div>
                        <Badge variant="outline" className="text-xs">
                          {medicine.duration}
                        </Badge>
                      </div>
                    ))}
                    {prescription.medicines.length > 2 && (
                      <p className="text-xs text-muted-foreground">
                        +{prescription.medicines.length - 2} more medicines
                      </p>
                    )}
                  </div>
                </div>

{prescription.followUp && (
                  <div className="mb-4 p-2 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <div className="flex items-center gap-2">
                      <AlertCircle className="w-4 h-4 text-yellow-600" />
                      <p className="text-sm text-yellow-800">Follow-up: {prescription.followUp}</p>
                    </div>
                  </div>
                )}

<div className="flex gap-2">
                  <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                    <Eye className="w-4 h-4 mr-2" />
                    View Details
                  </Button>
                  <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                    <ShoppingCart className="w-4 h-4 mr-2" />
                    Order Medicines
                  </Button>
                  <Button variant="outline" size="sm" className="bg-transparent">
                    <Share className="w-4 h-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredPrescriptions.length === 0 && (
          <Card>
            <CardContent className="p-8 text-center">
              <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
                <FileText className="w-8 h-8 text-muted-foreground" />
              </div>
              <h3 className="font-semibold text-card-foreground mb-2">No prescriptions found</h3>
              <p className="text-sm text-muted-foreground mb-4">
                {searchQuery ? "Try adjusting your search terms" : "Start by scanning or uploading a prescription"}
              </p>
              <Button onClick={() => setShowScanner(true)}>
                <Camera className="w-4 h-4 mr-2" />
                Scan Your First Prescription
              </Button>
            </CardContent>
          </Card>
        )}
      </main>

{/* Upload Modal */}
      {showUpload && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-card rounded-lg w-full max-w-sm">
            <div className="p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-card-foreground">Upload Prescription</h3>
                <Button variant="ghost" size="sm" onClick={() => setShowUpload(false)}>
                  <X className="w-4 h-4" />
                </Button>
              </div>

{isScanning ? (
                <div className="text-center py-8">
                  <Loader2 className="w-12 h-12 animate-spin text-primary mx-auto mb-4" />
                  <h4 className="font-semibold text-card-foreground mb-2">Processing Image</h4>
                  <p className="text-sm text-muted-foreground">AI is reading your prescription...</p>
                </div>
              ) : (
                <div className="space-y-4">
                  <div
                    className="border-2 border-dashed border-border rounded-lg p-8 text-center cursor-pointer hover:border-primary transition-colors"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <Upload className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
                    <h4 className="font-semibold text-card-foreground mb-2">Choose Image</h4>
                    <p className="text-sm text-muted-foreground">Upload a clear photo of your prescription</p>
                  </div>

<div className="text-center">
                    <p className="text-xs text-muted-foreground">Supported formats: JPG, PNG, PDF</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/prescriptions/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/orders/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"

const sql = neon(process.env.DATABASE_URL!)

export async function POST(request: NextRequest) {
  try {
    const { userId, items, deliveryAddress, paymentMethod, subtotal, deliveryFee, totalAmount } = await request.json()

// Create order
    const order = await sql`
      INSERT INTO orders (
        user_id, delivery_address, payment_method, 
        subtotal, delivery_fee, total_amount, status, created_at
      ) VALUES (
        ${userId}, ${deliveryAddress}, ${paymentMethod},
        ${subtotal}, ${deliveryFee}, ${totalAmount}, 'pending', NOW()
      ) RETURNING *
    `

const orderId = order[0].id

// Create order items
    for (const item of items) {
      await sql`
        INSERT INTO order_items (
          order_id, medicine_id, pharmacy_id, quantity, 
          unit_price, total_price, created_at
        ) VALUES (
          ${orderId}, ${item.medicineId}, ${item.pharmacyId}, 
          ${item.quantity}, ${item.unitPrice}, ${item.totalPrice}, NOW()
        )
      `

// Update pharmacy inventory
      await sql`
        UPDATE pharmacy_inventory 
        SET stock_quantity = stock_quantity - ${item.quantity}
        WHERE pharmacy_id = ${item.pharmacyId} AND medicine_id = ${item.medicineId}
      `
    }

// Send order confirmation notification
    await sql`
      INSERT INTO notifications (
        user_id, type, title, message, created_at
      ) VALUES (
        ${userId}, 'order_confirmation', 'Order Placed Successfully',
        'Your medicine order #${orderId} has been placed and will be delivered soon.', NOW()
      )
    `

return NextResponse.json({
      success: true,
      order: order[0],
      message: "Order placed successfully",
    })
  } catch (error) {
    console.error("Order creation error:", error)
    return NextResponse.json({ success: false, error: "Failed to place order" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")
    const status = searchParams.get("status")

let query = `
      SELECT o.*, 
        json_agg(
          json_build_object(
            'medicine_name', m.name,
            'pharmacy_name', p.name,
            'quantity', oi.quantity,
            'unit_price', oi.unit_price,
            'total_price', oi.total_price
          )
        ) as items
      FROM orders o
      LEFT JOIN order_items oi ON o.id = oi.order_id
      LEFT JOIN medicines m ON oi.medicine_id = m.id
      LEFT JOIN pharmacies p ON oi.pharmacy_id = p.id
      WHERE 1=1
    `

const params: any[] = []

if (userId) {
      query += ` AND o.user_id = $${params.length + 1}`
      params.push(userId)
    }

if (status) {
      query += ` AND o.status = $${params.length + 1}`
      params.push(status)
    }

query += ` GROUP BY o.id ORDER BY o.created_at DESC`

const orders = await sql(query, params)

return NextResponse.json({
      success: true,
      orders,
    })
  } catch (error) {
    console.error("Get orders error:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch orders" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/05-medicine-ordering-tables.sql" isMerged="true"
-- Create orders table
CREATE TABLE IF NOT EXISTS orders (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id),
  delivery_address TEXT NOT NULL,
  payment_method VARCHAR(50) NOT NULL,
  subtotal DECIMAL(10,2) NOT NULL,
  delivery_fee DECIMAL(10,2) DEFAULT 0,
  total_amount DECIMAL(10,2) NOT NULL,
  status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('pending', 'confirmed', 'preparing', 'out_for_delivery', 'delivered', 'cancelled')),
  tracking_number VARCHAR(100),
  estimated_delivery TIMESTAMP WITH TIME ZONE,
  delivered_at TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create order_items table
CREATE TABLE IF NOT EXISTS order_items (
  id SERIAL PRIMARY KEY,
  order_id INTEGER REFERENCES orders(id),
  medicine_id INTEGER REFERENCES medicines(id),
  pharmacy_id INTEGER REFERENCES pharmacies(id),
  quantity INTEGER NOT NULL,
  unit_price DECIMAL(10,2) NOT NULL,
  total_price DECIMAL(10,2) NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create pharmacy_inventory table
CREATE TABLE IF NOT EXISTS pharmacy_inventory (
  id SERIAL PRIMARY KEY,
  pharmacy_id INTEGER REFERENCES pharmacies(id),
  medicine_id INTEGER REFERENCES medicines(id),
  stock_quantity INTEGER NOT NULL DEFAULT 0,
  unit_price DECIMAL(10,2) NOT NULL,
  expiry_date DATE,
  batch_number VARCHAR(100),
  last_updated TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(pharmacy_id, medicine_id)
);

-- Create delivery_tracking table
CREATE TABLE IF NOT EXISTS delivery_tracking (
  id SERIAL PRIMARY KEY,
  order_id INTEGER REFERENCES orders(id),
  status VARCHAR(50) NOT NULL,
  location VARCHAR(200),
  notes TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add indexes for better performance
CREATE INDEX IF NOT EXISTS idx_orders_user_id ON orders(user_id);
CREATE INDEX IF NOT EXISTS idx_orders_status ON orders(status);
CREATE INDEX IF NOT EXISTS idx_order_items_order_id ON order_items(order_id);
CREATE INDEX IF NOT EXISTS idx_pharmacy_inventory_pharmacy_id ON pharmacy_inventory(pharmacy_id);
CREATE INDEX IF NOT EXISTS idx_pharmacy_inventory_medicine_id ON pharmacy_inventory(medicine_id);
CREATE INDEX IF NOT EXISTS idx_delivery_tracking_order_id ON delivery_tracking(order_id);

-- Insert sample pharmacy inventory data
INSERT INTO pharmacy_inventory (pharmacy_id, medicine_id, stock_quantity, unit_price, expiry_date, batch_number) VALUES
(1, 1, 25, 45.00, '2025-12-31', 'PAR001'),
(1, 2, 22, 125.00, '2025-06-30', 'AMX001'),
(1, 3, 28, 36.00, '2026-03-15', 'CET001'),
(1, 4, 35, 85.00, '2025-09-20', 'MET001'),
(2, 1, 18, 42.00, '2025-11-30', 'PAR002'),
(2, 2, 6, 118.00, '2025-07-15', 'AMX002'),
(2, 3, 41, 34.00, '2026-02-28', 'CET002'),
(2, 4, 29, 82.00, '2025-10-10', 'MET002'),
(3, 1, 32, 47.00, '2025-12-15', 'PAR003'),
(3, 2, 15, 120.00, '2025-08-30', 'AMX003'),
(3, 3, 22, 37.00, '2026-01-20', 'CET003'),
(3, 4, 18, 88.00, '2025-11-05', 'MET003')
ON CONFLICT (pharmacy_id, medicine_id) DO NOTHING;

-- Insert sample orders
INSERT INTO orders (user_id, delivery_address, payment_method, subtotal, delivery_fee, total_amount, status) VALUES
(1, '123 Main Street, Sector 18, Noida, UP 201301', 'upi', 170.00, 0.00, 170.00, 'delivered'),
(1, '123 Main Street, Sector 18, Noida, UP 201301', 'cod', 85.00, 50.00, 135.00, 'out_for_delivery')
ON CONFLICT DO NOTHING;

-- Insert sample order items
INSERT INTO order_items (order_id, medicine_id, pharmacy_id, quantity, unit_price, total_price) VALUES
(1, 1, 1, 2, 45.00, 90.00),
(1, 3, 1, 2, 36.00, 72.00),
(1, 4, 1, 1, 85.00, 85.00),
(2, 4, 2, 1, 82.00, 82.00)
ON CONFLICT DO NOTHING;
[V0_FILE]typescriptreact:file="app/lab-tests/page.tsx" isMerged="true"
"use client"
;```tsx file="app/lab-tests/page.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft, Search, MapPin, TestTube, Calendar, Clock, Download, Eye, Filter, Star } from 'lucide-react'
import Link from "next/link"

const labTests = [
  {
    id: 1,
    name: "Complete Blood Count (CBC)",
    description: "Comprehensive blood analysis including RBC, WBC, platelets",
    price: 350,
    discountedPrice: 280,
    category: "Blood Tests",
    duration: "4-6 hours",
    fasting: true,
    popular: true,
    parameters: ["Hemoglobin", "RBC Count", "WBC Count", "Platelet Count", "Hematocrit"],
    labs: [
      {
        name: "PathLab",
        distance: "1.2 km",
        price: 280,
        rating: 4.8,
        slots: ["9:00 AM", "11:00 AM", "2:00 PM", "4:00 PM"],
        address: "Sector 18, Noida"
      },
      {
        name: "Dr. Lal PathLabs",
        distance: "0.8 km", 
        price: 320,
        rating: 4.9,
        slots: ["8:00 AM", "10:00 AM", "1:00 PM", "3:00 PM"],
        address: "City Centre, Noida"
      }
    ]
  },
  {
    id: 2,
    name: "Lipid Profile",
    description: "Cholesterol and triglyceride levels assessment",
    price: 450,
    discountedPrice: 360,
    category: "Heart Health",
    duration: "6-8 hours",
    fasting: true,
    popular: true,
    parameters: ["Total Cholesterol", "HDL", "LDL", "Triglycerides", "VLDL"],
    labs: [
      {
        name: "SRL Diagnostics",
        distance: "1.5 km",
        price: 360,
        rating: 4.7,
        slots: ["9:00 AM", "11:00 AM", "2:00 PM"],
        address: "Fortis Hospital, Noida"
      },
      {
        name: "Metropolis",
        distance: "2.1 km",
        price: 380,
        rating: 4.6,
        slots: ["8:30 AM", "10:30 AM", "1:30 PM"],
        address: "Max Hospital, Noida"
      }
    ]
  },
  {
    id: 3,
    name: "Thyroid Function Test (TFT)",
    description: "T3, T4, TSH levels to assess thyroid function",
    price: 550,
    discountedPrice: 440,
    category: "Hormone Tests",
    duration: "24 hours",
    fasting: false,
    popular: false,
    parameters: ["T3", "T4", "TSH", "Free T3", "Free T4"],
    labs: [
      {
        name: "PathLab",
        distance: "1.2 km",
        price: 440,
        rating: 4.8,
        slots: ["9:00 AM", "11:00 AM", "2:00 PM"],
        address: "Sector 18, Noida"
      }
    ]
  },
  {
    id: 4,
    name: "Diabetes Panel",
    description: "Comprehensive diabetes screening and monitoring",
    price: 650,
    discountedPrice: 520,
    category: "Diabetes",
    duration: "4-6 hours",
    fasting: true,
    popular: true,
    parameters: ["Fasting Glucose", "HbA1c", "Post Meal Glucose", "Insulin"],
    labs: [
      {
        name: "Dr. Lal PathLabs",
        distance: "0.8 km",
        price: 520,
        rating: 4.9,
        slots: ["8:00 AM", "10:00 AM", "1:00 PM"],
        address: "City Centre, Noida"
      },
      {
        name: "SRL Diagnostics", 
        distance: "1.5 km",
        price: 540,
        rating: 4.7,
        slots: ["9:00 AM", "11:00 AM"],
        address: "Fortis Hospital, Noida"
      }
    ]
  }
]

const categories = [
  "All Categories",
  "Blood Tests",
  "Heart Health", 
  "Hormone Tests",
  "Diabetes",
  "Kidney Function",
  "Liver Function",
  "Cancer Screening"
]

const myReports = [
  {
    id: 1,
    testName: "Complete Blood Count (CBC)",
    labName: "Dr. Lal PathLabs",
    date: "2024-01-15",
    status: "completed",
    reportUrl: "/reports/cbc-jan-2024.pdf",
    results: {
      hemoglobin: { value: 13.5, unit: "g/dL", range: "12.0-15.5", status: "normal" },
      wbc: { value: 7200, unit: "/μL", range: "4000-11000", status: "normal" },
      platelets: { value: 250000, unit: "/μL", range: "150000-450000", status: "normal" }
    }
  },
  {
    id: 2,
    testName: "Lipid Profile",
    labName: "PathLab",
    date: "2024-01-10",
    status: "completed",
    reportUrl: "/reports/lipid-jan-2024.pdf",
    results: {
      totalCholesterol: { value: 195, unit: "mg/dL", range: "<200", status: "normal" },
      hdl: { value: 45, unit: "mg/dL", range: ">40", status: "normal" },
      ldl: { value: 125, unit: "mg/dL", range: "<100", status: "high" },
      triglycerides: { value: 150, unit: "mg/dL", range: "<150", status: "borderline" }
    }
  },
  {
    id: 3,
    testName: "Diabetes Panel",
    labName: "SRL Diagnostics",
    date: "2024-01-05",
    status: "processing",
    reportUrl: null,
    results: null
  }
]

export default function LabTestsPage() {
  const [activeTab, setActiveTab] = useState("book")
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("All Categories")
  const [selectedTest, setSelectedTest] = useState<number | null>(null)
  const [selectedLab, setSelectedLab] = useState(null)
  const [selectedSlot, setSelectedSlot] = useState("")
  const [selectedDate, setSelectedDate] = useState("")
  const [showTestDetails, setShowTestDetails] = useState<number | null>(null)
  const [showReportDetails, setShowReportDetails] = useState<number | null>(null)

const filteredTests = labTests.filter((test) => {
    const matchesSearch = test.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         test.description.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory = selectedCategory === "All Categories" || test.category === selectedCategory
    return matchesSearch && matchesCategory
  })

const getStatusColor = (status: string) => {
    switch (status) {
      case "normal": return "text-green-600"
      case "high": return "text-red-600"
      case "low": return "text-blue-600"
      case "borderline": return "text-yellow-600"
      default: return "text-muted-foreground"
    }
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed": return "bg-green-100 text-green-800"
      case "processing": return "bg-yellow-100 text-yellow-800"
      case "scheduled": return "bg-blue-100 text-blue-800"
      default: return "bg-gray-100 text-gray-800"
    }
  }

{/* Tabs */}
          <div className="flex bg-muted rounded-lg p-1">
            <Button
              variant={activeTab === "book" ? "default" : "ghost"}
              size="sm"
              className="flex-1 h-8"
              onClick={() => setActiveTab("book")}
            >
              Book Tests
            </Button>
            <Button
              variant={activeTab === "reports" ? "default" : "ghost"}
              size="sm"
              className="flex-1 h-8"
              onClick={() => setActiveTab("reports")}
            >
              My Reports
            </Button>
          </div>
        </div>
      </header>

{/* Book Tests Tab */}
      {activeTab === "book" && (
        <main className="max-w-md mx-auto px-4 py-6">
          {/* Search and Filter */}
          <div className="space-y-3 mb-6">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
              <Input
                placeholder="Search lab tests..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 text-base h-12 bg-input border-border"
              />
            </div>

<Select value={selectedCategory} onValueChange={setSelectedCategory}>
              <SelectTrigger className="h-10 bg-input border-border">
                <SelectValue placeholder="Category" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((category) => (
                  <SelectItem key={category} value={category}>
                    {category}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{/* Popular Tests */}
          <div className="mb-6">
            <h3 className="font-semibold text-card-foreground mb-3">Popular Tests</h3>
            <div className="grid grid-cols-2 gap-3">
              {labTests.filter(test => test.popular).slice(0, 4).map((test) => (
                <Card key={test.id} className="cursor-pointer hover:shadow-md transition-shadow"
                      onClick={() => setShowTestDetails(test.id)}>
                  <CardContent className="p-3">
                    <div className="flex items-center gap-2 mb-2">
                      <TestTube className="w-4 h-4 text-primary" />
                      <Star className="w-3 h-3 text-yellow-500 fill-current" />
                    </div>
                    <h4 className="font-medium text-sm text-card-foreground mb-1">{test.name}</h4>
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-semibold text-primary">₹{test.discountedPrice}</span>
                      <span className="text-xs text-muted-foreground line-through">₹{test.price}</span>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>

{/* All Tests */}
          <div className="space-y-4">
            <h3 className="font-semibold text-card-foreground">All Tests</h3>
            {filteredTests.map((test) => (
              <Card key={test.id} className="hover:shadow-md transition-shadow">
                <CardContent className="p-4">
                  <div className="space-y-3">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-semibold text-card-foreground">{test.name}</h3>
                          {test.popular && <Star className="w-4 h-4 text-yellow-500 fill-current" />}
                        </div>
                        <p className="text-sm text-muted-foreground mb-2">{test.description}</p>
                        <div className="flex items-center gap-4 text-xs text-muted-foreground">
                          <span className="flex items-center gap-1">
                            <Clock className="w-3 h-3" />
                            {test.duration}
                          </span>
                          {test.fasting && (
                            <Badge variant="outline" className="text-xs">Fasting Required</Badge>
                          )}
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="flex items-center gap-2">
                          <span className="text-lg font-bold text-primary">₹{test.discountedPrice}</span>
                          <span className="text-sm text-muted-foreground line-through">₹{test.price}</span>
                        </div>
                        <Badge variant="outline" className="text-xs mt-1">{test.category}</Badge>
                      </div>
                    </div>

<div className="space-y-2">
                      <h4 className="text-sm font-medium text-card-foreground">Available at {test.labs.length} labs:</h4>
                      {test.labs.slice(0, 2).map((lab, index) => (
                        <div key={index} className="bg-muted/50 rounded-lg p-3">
                          <div className="flex items-center justify-between mb-2">
                            <div className="flex items-center gap-2">
                              <MapPin className="w-4 h-4 text-muted-foreground" />
                              <div>
                                <div className="font-medium text-card-foreground">{lab.name}</div>
                                <div className="text-sm text-muted-foreground">{lab.distance}</div>
                              </div>
                            </div>
                            <div className="text-right">
                              <div className="font-medium text-card-foreground">₹{lab.price}</div>
                              <div className="flex items-center gap-1 text-xs text-muted-foreground">
                                <Star className="w-3 h-3 text-yellow-500 fill-current" />
                                {lab.rating}
                              </div>
                            </div>
                          </div>
                          <div className="text-xs text-muted-foreground">
                            Next slots: {lab.slots.slice(0, 3).join(", ")}
                          </div>
                        </div>
                      ))}
                    </div>

<div className="flex gap-2 pt-2">
                      <Button 
                        className="flex-1 h-10"
                        onClick={() => setSelectedTest(test.id)}
                      >
                        Book Now
                      </Button>
                      <Button 
                        variant="outline" 
                        size="sm" 
                        className="px-3 bg-transparent"
                        onClick={() => setShowTestDetails(test.id)}
                      >
                        <Eye className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </main>
      )}

{/* My Reports Tab */}
      {activeTab === "reports" && (
        <main className="max-w-md mx-auto px-4 py-6">
          <div className="space-y-4">
            {myReports.map((report) => (
              <Card key={report.id} className="hover:shadow-md transition-shadow">
                <CardContent className="p-4">
                  <div className="space-y-3">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <h3 className="font-semibold text-card-foreground">{report.testName}</h3>
                        <p className="text-sm text-muted-foreground">{report.labName}</p>
                        <p className="text-xs text-muted-foreground">
                          {new Date(report.date).toLocaleDateString('en-IN', {
                            day: 'numeric',
                            month: 'short',
                            year: 'numeric'
                          })}
                        </p>
                      </div>
                      <Badge className={getStatusBadge(report.status)}>
                        {report.status.charAt(0).toUpperCase() + report.status.slice(1)}
                      </Badge>
                    </div>

{report.results && (
                      <div className="bg-muted/50 rounded-lg p-3">
                        <h4 className="text-sm font-medium text-card-foreground mb-2">Key Results:</h4>
                        <div className="space-y-1">
                          {Object.entries(report.results).slice(0, 3).map(([key, result]: [string, any]) => (
                            <div key={key} className="flex items-center justify-between text-xs">
                              <span className="text-muted-foreground capitalize">
                                {key.replace(/([A-Z])/g, ' $1').trim()}
                              </span>
                              <span className={getStatusColor(result.status)}>
                                {result.value} {result.unit}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

<div className="flex gap-2 pt-2">
                      {report.reportUrl && (
                        <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                          <Download className="w-4 h-4 mr-2" />
                          Download
                        </Button>
                      )}
                      <Button 
                        variant="outline" 
                        size="sm" 
                        className="flex-1 bg-transparent"
                        onClick={() => setShowReportDetails(report.id)}
                      >
                        <Eye className="w-4 h-4 mr-2" />
                        View Details
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}

{myReports.length === 0 && (
              <Card>
                <CardContent className="p-8 text-center">
                  <TestTube className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="font-semibold text-card-foreground mb-2">No reports yet</h3>
                  <p className="text-sm text-muted-foreground mb-4">Book your first lab test to see reports here</p>
                  <Button onClick={() => setActiveTab("book")}>
                    Book Lab Test
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>
        </main>
      )}

{/* Test Details Modal */}
      {showTestDetails && (
        <div className="fixed inset-0 bg-black/50 flex items-end z-50">
          <div className="bg-card w-full max-w-md mx-auto rounded-t-xl max-h-[80vh] overflow-hidden flex flex-col">
            <div className="p-6 border-b border-border">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-card-foreground">Test Details</h3>
                <Button variant="ghost" size="sm" onClick={() => setShowTestDetails(null)} className="p-2">
                  ×
                </Button>
              </div>
            </div>

<div className="flex-1 overflow-y-auto p-6">
              {(() => {
                const test = labTests.find(t => t.id === showTestDetails)
                if (!test) return null

return (
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-semibold text-card-foreground mb-2">{test.name}</h4>
                      <p className="text-sm text-muted-foreground mb-3">{test.description}</p>
                      
                      <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                        <span className="flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          {test.duration}
                        </span>
                        {test.fasting && (
                          <Badge variant="outline" className="text-xs">Fasting Required</Badge>
                        )}
                      </div>

<div className="flex items-center gap-2 mb-4">
                        <span className="text-xl font-bold text-primary">₹{test.discountedPrice}</span>
                        <span className="text-sm text-muted-foreground line-through">₹{test.price}</span>
                        <Badge variant="secondary" className="text-xs">
                          {Math.round((1 - test.discountedPrice / test.price) * 100)}% OFF
                        </Badge>
                      </div>
                    </div>

<div>
                      <h5 className="font-medium text-card-foreground mb-2">Parameters Included:</h5>
                      <div className="grid grid-cols-1 gap-2">
                        {test.parameters.map((param, index) => (
                          <div key={index} className="flex items-center gap-2 text-sm">
                            <div className="w-2 h-2 bg-primary rounded-full"></div>
                            <span className="text-muted-foreground">{param}</span>
                          </div>
                        ))}
                      </div>
                    </div>

{test.fasting && (
                      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                        <h5 className="font-medium text-yellow-800 mb-1">Fasting Instructions:</h5>
                        <p className="text-sm text-yellow-700">
                          Fast for 10-12 hours before the test. Only water is allowed during fasting period.
                        </p>
                      </div>
                    )}
                  </div>
                )
              })()}
            </div>

<div className="p-6 border-t border-border">
              <Button 
                className="w-full h-12 text-base"
                onClick={() => {
                  setShowTestDetails(null)
                  setSelectedTest(showTestDetails)
                }}
              >
                Book This Test
              </Button>
            </div>
          </div>
        </div>
      )}

{/* Booking Modal */}
      {selectedTest && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-card rounded-lg w-full max-w-sm max-h-[90vh] overflow-hidden flex flex-col">
            <div className="p-6 border-b border-border">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-card-foreground">Book Test</h3>
                <Button variant="ghost" size="sm" onClick={() => setSelectedTest(null)} className="p-2">
                  ×
                </Button>
              </div>
            </div>

<div className="flex-1 overflow-y-auto p-6 space-y-6">
              {(() => {
                const test = labTests.find(t => t.id === selectedTest)
                if (!test) return null

return (
                  <>
                    <div>
                      <h4 className="font-semibold text-card-foreground mb-2">{test.name}</h4>
                      <div className="flex items-center gap-2">
                        <span className="text-lg font-bold text-primary">₹{test.discountedPrice}</span>
                        <span className="text-sm text-muted-foreground line-through">₹{test.price}</span>
                      </div>
                    </div>

<div>
                      <label className="text-sm font-medium text-card-foreground mb-2 block">Select Date</label>
                      <Input
                        type="date"
                        value={selectedDate}
                        onChange={(e) => setSelectedDate(e.target.value)}
                        min={new Date().toISOString().split('T')[0]}
                        className="w-full"
                      />
                    </div>

<div>
                      <label className="text-sm font-medium text-card-foreground mb-2 block">Choose Lab</label>
                      <div className="space-y-2">
                        {test.labs.map((lab, index) => (
                          <Button
                            key={index}
                            variant={selectedLab?.name === lab.name ? "default" : "outline"}
                            className="w-full h-auto p-4 justify-between bg-transparent"
                            onClick={() => setSelectedLab(lab)}
                          >
                            <div className="text-left">
                              <div className="font-medium">{lab.name}</div>
                              <div className="text-sm text-muted-foreground">
                                {lab.distance} • ₹{lab.price}
                              </div>
                            </div>
                            <div className="flex items-center gap-1 text-xs">
                              <Star className="w-3 h-3 text-yellow-500 fill-current" />
                              {lab.rating}
                            </div>
                          </Button>
                        ))}
                      </div>
                    </div>

{selectedLab && (
                      <div>
                        <label className="text-sm font-medium text-card-foreground mb-2 block">Select Time Slot</label>
                        <div className="grid grid-cols-2 gap-2">
                          {selectedLab.slots.map((slot, index) => (
                            <Button
                              key={index}
                              variant={selectedSlot === slot ? "default" : "outline"}
                              size="sm"
                              className="bg-transparent"
                              onClick={() => setSelectedSlot(slot)}
                            >
                              {slot}
                            </Button>
                          ))}
                        </div>
                      </div>
                    )}
                  </>
                )
              })()}
            </div>

<div className="p-6 border-t border-border">
              <Button 
                className="w-full h-12 text-base"
                disabled={!selectedDate || !selectedLab || !selectedSlot}
                onClick={() => {
                  // Handle booking
                  setSelectedTest(null)
                  setSelectedLab(null)
                  setSelectedSlot("")
                  setSelectedDate("")
                }}
              >
                Confirm Booking
              </Button>
            </div>
          </div>
        </div>
      )}

{/* Report Details Modal */}
      {showReportDetails && (
        <div className="fixed inset-0 bg-black/50 flex items-end z-50">
          <div className="bg-card w-full max-w-md mx-auto rounded-t-xl max-h-[80vh] overflow-hidden flex flex-col">
            <div className="p-6 border-b border-border">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-card-foreground">Report Details</h3>
                <Button variant="ghost" size="sm" onClick={() => setShowReportDetails(null)} className="p-2">
                  ×
                </Button>
              </div>
            </div>

<div className="flex-1 overflow-y-auto p-6">
              {(() => {
                const report = myReports.find(r => r.id === showReportDetails)
                if (!report) return null

return (
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-semibold text-card-foreground mb-2">{report.testName}</h4>
                      <div className="text-sm text-muted-foreground space-y-1">
                        <p>Lab: {report.labName}</p>
                        <p>Date: {new Date(report.date).toLocaleDateString('en-IN', {
                          day: 'numeric',
                          month: 'long',
                          year: 'numeric'
                        })}</p>
                      </div>
                    </div>

{report.results && (
                      <div>
                        <h5 className="font-medium text-card-foreground mb-3">Test Results:</h5>
                        <div className="space-y-3">
                          {Object.entries(report.results).map(([key, result]: [string, any]) => (
                            <div key={key} className="bg-muted/50 rounded-lg p-3">
                              <div className="flex items-center justify-between mb-1">
                                <span className="font-medium text-card-foreground capitalize">
                                  {key.replace(/([A-Z])/g, ' $1').trim()}
                                </span>
                                <Badge 
                                  variant="outline" 
                                  className={`
text - xs
$
{
  \
                                    result.status === 'normal' ? 'border-green-200 text-green-700' :
                                    result.status === 'high' ? 'border-red-200 text-red-700' :
                                    result.status === 'low' ? 'border-blue-200 text-blue-700' :
                                    'border-yellow-200 text-yellow-700'
}
`}
                                >
                                  {result.status}
                                </Badge>
                              </div>
                              <div className="flex items-center justify-between text-sm">
                                <span className={getStatusColor(result.status)}>
                                  {result.value} {result.unit}
                                </span>
                                <span className="text-muted-foreground">
                                  Range: {result.range}
                                </span>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

{report.status === "processing" && (
                      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                        <p className="text-sm text-yellow-700">
                          Your test is being processed. Results will be available within 24-48 hours.
                        </p>
                      </div>
                    )}
                  </div>
                )
              })()}
            </div>

<div className="p-6 border-t border-border">
              {(() => {
                const report = myReports.find(r => r.id === showReportDetails)
                return report?.reportUrl && (
                  <Button className="w-full h-12 text-base">
                    <Download className="w-4 h-4 mr-2" />
                    Download Report
                  </Button>
                )
              })()}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/lab-tests/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/lab-tests/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"

const sql = neon(process.env.DATABASE_URL!)

export async function POST(request: NextRequest) {
  try {
    const { userId, testId, labId, appointmentDate, timeSlot, totalAmount, paymentMethod } = await request.json()

// Create lab test booking
    const booking = await sql`
      INSERT INTO lab_bookings (
        user_id, test_id, lab_id, appointment_date, 
        time_slot, total_amount, payment_method, status, created_at
      ) VALUES (
        ${userId}, ${testId}, ${labId}, ${appointmentDate},
        ${timeSlot}, ${totalAmount}, ${paymentMethod}, 'scheduled', NOW()
      ) RETURNING *
    `

// Send booking confirmation notification
    await sql`
      INSERT INTO notifications (
        user_id, type, title, message, created_at
      ) VALUES (
        ${userId}, 'lab_booking', 'Lab Test Booked',
        'Your lab test has been scheduled for ${appointmentDate} at ${timeSlot}', NOW()
      )
    `

return NextResponse.json({
      success: true,
      booking: booking[0],
      message: "Lab test booked successfully",
    })
  } catch (error) {
    console.error("Lab booking error:", error)
    return NextResponse.json({ success: false, error: "Failed to book lab test" }, { status: 500 })
  }
}

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")
    const category = searchParams.get("category")

let query = `
      SELECT t.*, 
        json_agg(
          json_build_object(
            'lab_name', l.name,
            'distance', l.distance,
            'price', lt.price,
            'rating', l.rating,
            'address', l.address,
            'available_slots', l.available_slots
          )
        ) as labs
      FROM lab_tests t
      LEFT JOIN lab_test_pricing lt ON t.id = lt.test_id
      LEFT JOIN labs l ON lt.lab_id = l.id
      WHERE 1=1
    `

const params: any[] = []

if (category && category !== "All Categories") {
      query += ` AND t.category = $${params.length + 1}`
      params.push(category)
    }

query += ` GROUP BY t.id ORDER BY t.popular DESC, t.name ASC`

const tests = await sql(query, params)

return NextResponse.json({
      success: true,
      tests,
    })
  } catch (error) {
    console.error("Get lab tests error:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch lab tests" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/lab-reports/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"

const sql = neon(process.env.DATABASE_URL!)

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")
    const status = searchParams.get("status")

let query = `
      SELECT lr.*, lt.name as test_name, l.name as lab_name,
        lb.appointment_date, lb.time_slot
      FROM lab_reports lr
      JOIN lab_bookings lb ON lr.booking_id = lb.id
      JOIN lab_tests lt ON lb.test_id = lt.id
      JOIN labs l ON lb.lab_id = l.id
      WHERE 1=1
    `

const params: any[] = []

if (userId) {
      query += ` AND lb.user_id = $${params.length + 1}`
      params.push(userId)
    }

if (status) {
      query += ` AND lr.status = $${params.length + 1}`
      params.push(status)
    }

query += ` ORDER BY lr.created_at DESC`

const reports = await sql(query, params)

return NextResponse.json({
      success: true,
      reports,
    })
  } catch (error) {
    console.error("Get lab reports error:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch lab reports" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const { bookingId, results, reportUrl, doctorNotes, status = "completed" } = await request.json()

// Create lab report
    const report = await sql`
      INSERT INTO lab_reports (
        booking_id, results, report_url, doctor_notes, status, created_at
      ) VALUES (
        ${bookingId}, ${JSON.stringify(results)}, ${reportUrl}, 
        ${doctorNotes}, ${status}, NOW()
      ) RETURNING *
    `

// Update booking status
    await sql`
      UPDATE lab_bookings 
      SET status = 'completed'
      WHERE id = ${bookingId}
    `

// Get user ID for notification
    const booking = await sql`
      SELECT user_id FROM lab_bookings WHERE id = ${bookingId}
    `

if (booking.length > 0) {
      // Send report ready notification
      await sql`
        INSERT INTO notifications (
          user_id, type, title, message, created_at
        ) VALUES (
          ${booking[0].user_id}, 'lab_report', 'Lab Report Ready',
          'Your lab test results are now available for download', NOW()
        )
      `
    }

return NextResponse.json({
      success: true,
      report: report[0],
      message: "Lab report created successfully",
    })
  } catch (error) {
    console.error("Create lab report error:", error)
    return NextResponse.json({ success: false, error: "Failed to create lab report" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/06-lab-tests-tables.sql" isMerged="true"
-- Create lab_tests table
CREATE TABLE IF NOT EXISTS lab_tests (
  id SERIAL PRIMARY KEY,
  name VARCHAR(200) NOT NULL,
  description TEXT,
  category VARCHAR(100) NOT NULL,
  parameters TEXT[], -- Array of test parameters
  duration VARCHAR(50), -- e.g., "4-6 hours", "24 hours"
  fasting_required BOOLEAN DEFAULT FALSE,
  popular BOOLEAN DEFAULT FALSE,
  base_price DECIMAL(10,2) NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create labs table
CREATE TABLE IF NOT EXISTS labs (
  id SERIAL PRIMARY KEY,
  name VARCHAR(200) NOT NULL,
  address TEXT NOT NULL,
  phone VARCHAR(20),
  email VARCHAR(100),
  distance VARCHAR(20), -- e.g., "1.2 km"
  rating DECIMAL(2,1) DEFAULT 0.0,
  available_slots TEXT[], -- Array of time slots
  operating_hours JSONB, -- {"monday": "8:00-18:00", ...}
  services TEXT[], -- Array of services offered
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create lab_test_pricing table (many-to-many relationship)
CREATE TABLE IF NOT EXISTS lab_test_pricing (
  id SERIAL PRIMARY KEY,
  lab_id INTEGER REFERENCES labs(id),
  test_id INTEGER REFERENCES lab_tests(id),
  price DECIMAL(10,2) NOT NULL,
  discounted_price DECIMAL(10,2),
  available BOOLEAN DEFAULT TRUE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(lab_id, test_id)
);

-- Create lab_bookings table
CREATE TABLE IF NOT EXISTS lab_bookings (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id),
  test_id INTEGER REFERENCES lab_tests(id),
  lab_id INTEGER REFERENCES labs(id),
  appointment_date DATE NOT NULL,
  time_slot VARCHAR(20) NOT NULL,
  total_amount DECIMAL(10,2) NOT NULL,
  payment_method VARCHAR(50) NOT NULL,
  status VARCHAR(20) DEFAULT 'scheduled' CHECK (status IN ('scheduled', 'sample_collected', 'processing', 'completed', 'cancelled')),
  special_instructions TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create lab_reports table
CREATE TABLE IF NOT EXISTS lab_reports (
  id SERIAL PRIMARY KEY,
  booking_id INTEGER REFERENCES lab_bookings(id),
  results JSONB, -- Store test results as JSON
  report_url VARCHAR(500), -- URL to PDF report
  doctor_notes TEXT,
  status VARCHAR(20) DEFAULT 'processing' CHECK (status IN ('processing', 'completed', 'reviewed')),
  reviewed_by INTEGER REFERENCES users(id), -- Doctor who reviewed
  reviewed_at TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add indexes for better performance
CREATE INDEX IF NOT EXISTS idx_lab_tests_category ON lab_tests(category);
CREATE INDEX IF NOT EXISTS idx_lab_tests_popular ON lab_tests(popular);
CREATE INDEX IF NOT EXISTS idx_labs_rating ON labs(rating);
CREATE INDEX IF NOT EXISTS idx_lab_bookings_user_id ON lab_bookings(user_id);
CREATE INDEX IF NOT EXISTS idx_lab_bookings_date ON lab_bookings(appointment_date);
CREATE INDEX IF NOT EXISTS idx_lab_reports_booking_id ON lab_reports(booking_id);
CREATE INDEX IF NOT EXISTS idx_lab_reports_status ON lab_reports(status);

-- Insert sample lab tests
INSERT INTO lab_tests (name, description, category, parameters, duration, fasting_required, popular, base_price) VALUES
('Complete Blood Count (CBC)', 'Comprehensive blood analysis including RBC, WBC, platelets', 'Blood Tests', ARRAY['Hemoglobin', 'RBC Count', 'WBC Count', 'Platelet Count', 'Hematocrit'], '4-6 hours', FALSE, TRUE, 350.00),
('Lipid Profile', 'Cholesterol and triglyceride levels assessment', 'Heart Health', ARRAY['Total Cholesterol', 'HDL', 'LDL', 'Triglycerides', 'VLDL'], '6-8 hours', TRUE, TRUE, 450.00),
('Thyroid Function Test (TFT)', 'T3, T4, TSH levels to assess thyroid function', 'Hormone Tests', ARRAY['T3', 'T4', 'TSH', 'Free T3', 'Free T4'], '24 hours', FALSE, FALSE, 550.00),
('Diabetes Panel', 'Comprehensive diabetes screening and monitoring', 'Diabetes', ARRAY['Fasting Glucose', 'HbA1c', 'Post Meal Glucose', 'Insulin'], '4-6 hours', TRUE, TRUE, 650.00),
('Liver Function Test (LFT)', 'Assessment of liver health and function', 'Liver Function', ARRAY['ALT', 'AST', 'Bilirubin', 'Alkaline Phosphatase', 'Protein'], '6-8 hours', TRUE, FALSE, 400.00),
('Kidney Function Test (KFT)', 'Evaluation of kidney health and function', 'Kidney Function', ARRAY['Creatinine', 'BUN', 'Uric Acid', 'Electrolytes'], '4-6 hours', FALSE, FALSE, 380.00)
ON CONFLICT DO NOTHING;

-- Insert sample labs
INSERT INTO labs (name, address, phone, email, distance, rating, available_slots, operating_hours) VALUES
('Dr. Lal PathLabs', 'City Centre Mall, Sector 12, Noida', '+91-120-4567890', 'noida@lalpathlabs.com', '0.8 km', 4.9, ARRAY['8:00 AM', '10:00 AM', '1:00 PM', '3:00 PM', '5:00 PM'], '{"monday": "8:00-18:00", "tuesday": "8:00-18:00", "wednesday": "8:00-18:00", "thursday": "8:00-18:00", "friday": "8:00-18:00", "saturday": "8:00-16:00", "sunday": "9:00-14:00"}'),
('PathLab', 'Sector 18, Noida', '+91-120-4567891', 'noida@pathlab.com', '1.2 km', 4.8, ARRAY['9:00 AM', '11:00 AM', '2:00 PM', '4:00 PM'], '{"monday": "9:00-17:00", "tuesday": "9:00-17:00", "wednesday": "9:00-17:00", "thursday": "9:00-17:00", "friday": "9:00-17:00", "saturday": "9:00-15:00", "sunday": "closed"}'),
('SRL Diagnostics', 'Fortis Hospital, Sector 62, Noida', '+91-120-4567892', 'noida@srl.in', '1.5 km', 4.7, ARRAY['9:00 AM', '11:00 AM', '2:00 PM'], '{"monday": "9:00-18:00", "tuesday": "9:00-18:00", "wednesday": "9:00-18:00", "thursday": "9:00-18:00", "friday": "9:00-18:00", "saturday": "9:00-16:00", "sunday": "10:00-14:00"}'),
('Metropolis Healthcare', 'Max Hospital, Sector 19, Noida', '+91-120-4567893', 'noida@metropolisindia.com', '2.1 km', 4.6, ARRAY['8:30 AM', '10:30 AM', '1:30 PM'], '{"monday": "8:30-17:30", "tuesday": "8:30-17:30", "wednesday": "8:30-17:30", "thursday": "8:30-17:30", "friday": "8:30-17:30", "saturday": "8:30-15:30", "sunday": "closed"}')
ON CONFLICT DO NOTHING;

-- Insert sample lab test pricing
INSERT INTO lab_test_pricing (lab_id, test_id, price, discounted_price) VALUES
(1, 1, 320.00, 280.00),
(1, 2, 480.00, 420.00),
(1, 3, 580.00, 520.00),
(1, 4, 680.00, 620.00),
(2, 1, 350.00, 280.00),
(2, 2, 450.00, 360.00),
(2, 3, 550.00, 440.00),
(2, 4, 650.00, 520.00),
(3, 1, 380.00, 320.00),
(3, 2, 480.00, 360.00),
(3, 3, 580.00, 480.00),
(3, 4, 680.00, 540.00),
(4, 1, 400.00, 340.00),
(4, 2, 500.00, 380.00),
(4, 3, 600.00, 500.00),
(4, 4, 700.00, 560.00)
ON CONFLICT (lab_id, test_id) DO NOTHING;

-- Insert sample bookings
INSERT INTO lab_bookings (user_id, test_id, lab_id, appointment_date, time_slot, total_amount, payment_method, status) VALUES
(1, 1, 1, '2024-01-15', '10:00 AM', 280.00, 'upi', 'completed'),
(1, 2, 2, '2024-01-10', '9:00 AM', 360.00, 'card', 'completed'),
(1, 4, 3, '2024-01-05', '11:00 AM', 540.00, 'upi', 'processing')
ON CONFLICT DO NOTHING;

-- Insert sample reports
INSERT INTO lab_reports (booking_id, results, report_url, status) VALUES
(1, '{"hemoglobin": {"value": 13.5, "unit": "g/dL", "range": "12.0-15.5", "status": "normal"}, "wbc": {"value": 7200, "unit": "/μL", "range": "4000-11000", "status": "normal"}, "platelets": {"value": 250000, "unit": "/μL", "range": "150000-450000", "status": "normal"}}', '/reports/cbc-jan-2024.pdf', 'completed'),
(2, '{"totalCholesterol": {"value": 195, "unit": "mg/dL", "range": "<200", "status": "normal"}, "hdl": {"value": 45, "unit": "mg/dL", "range": ">40", "status": "normal"}, "ldl": {"value": 125, "unit": "mg/dL", "range": "<100", "status": "high"}, "triglycerides": {"value": 150, "unit": "mg/dL", "range": "<150", "status": "borderline"}}', '/reports/lipid-jan-2024.pdf', 'completed')
ON CONFLICT DO NOTHING;
[V0_FILE]typescriptreact:file="app/health-vault/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  ArrowLeft,
  FileText,
  Upload,
  Download,
  Trash2,
  Search,
  Filter,
  Lock,
  Shield,
  Eye,
  Calendar,
  Folder,
  FolderPlus,
  Share2,
  Sparkles,
  Syringe,
  TestTube,
  Pill,
  Stethoscope,
  Hospital,
  FileImage,
  CheckCircle,
  X,
  ChevronRight,
} from "lucide-react"
import Link from "next/link"

interface HealthRecord {
  id: string
  name: string
  type: "prescription" | "lab_report" | "vaccination" | "discharge_summary" | "scan" | "other"
  category: string
  date: string
  doctor?: string
  hospital?: string
  fileSize: string
  fileType: string
  isShared: boolean
  aiSummary?: string
  tags: string[]
}

interface HealthVaultFolder {
  id: string
  name: string
  recordCount: number
  color: string
}

export default function HealthVaultPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedType, setSelectedType] = useState<string>("all")
  const [selectedFolder, setSelectedFolder] = useState<string>("all")
  const [showUploadModal, setShowUploadModal] = useState(false)
  const [showRecordModal, setShowRecordModal] = useState(false)
  const [selectedRecord, setSelectedRecord] = useState<HealthRecord | null>(null)
  const [showAISummary, setShowAISummary] = useState(false)
  const [isGeneratingSummary, setIsGeneratingSummary] = useState(false)
  const [showCreateFolder, setShowCreateFolder] = useState(false)
  const [newFolderName, setNewFolderName] = useState("")
  const fileInputRef = useRef<HTMLInputElement>(null)

const [uploadForm, setUploadForm] = useState({
    name: "",
    type: "prescription",
    category: "",
    doctor: "",
    hospital: "",
    date: "",
    tags: "",
    file: null as File | null,
  })

const folders: HealthVaultFolder[] = [
    { id: "prescriptions", name: "Prescriptions", recordCount: 12, color: "bg-blue-500" },
    { id: "lab_reports", name: "Lab Reports", recordCount: 8, color: "bg-green-500" },
    { id: "vaccinations", name: "Vaccinations", recordCount: 5, color: "bg-purple-500" },
    { id: "discharge", name: "Discharge Summaries", recordCount: 3, color: "bg-orange-500" },
    { id: "scans", name: "Scans & Imaging", recordCount: 4, color: "bg-pink-500" },
    { id: "family", name: "Family Records", recordCount: 6, color: "bg-teal-500" },
  ]

const records: HealthRecord[] = [
    {
      id: "1",
      name: "Blood Test Report - CBC",
      type: "lab_report",
      category: "Blood Work",
      date: "2024-12-01",
      doctor: "Dr. Priya Sharma",
      hospital: "Apollo Hospital",
      fileSize: "2.4 MB",
      fileType: "PDF",
      isShared: false,
      aiSummary:
        "Your Complete Blood Count (CBC) results show normal hemoglobin levels (14.2 g/dL) and white blood cell count (7,500/mcL). Your platelet count is within the healthy range at 250,000/mcL. All values are within normal limits, indicating good overall blood health. No immediate concerns or follow-up required.",
      tags: ["blood", "routine", "annual"],
    },
    {
      id: "2",
      name: "COVID-19 Vaccination Certificate",
      type: "vaccination",
      category: "Immunization",
      date: "2024-03-15",
      hospital: "Government Hospital",
      fileSize: "156 KB",
      fileType: "PDF",
      isShared: true,
      aiSummary:
        "This certificate confirms completion of COVID-19 vaccination course. You received 2 doses of Covishield vaccine. Your vaccination status is complete and up to date. Booster dose may be recommended after 6-9 months based on health guidelines.",
      tags: ["covid", "vaccine", "certificate"],
    },
    {
      id: "3",
      name: "Chest X-Ray Report",
      type: "scan",
      category: "Radiology",
      date: "2024-11-20",
      doctor: "Dr. Rajesh Kumar",
      hospital: "Max Healthcare",
      fileSize: "5.8 MB",
      fileType: "DICOM",
      isShared: false,
      aiSummary:
        "Your chest X-ray shows clear lung fields with no signs of infection, consolidation, or abnormal masses. Heart size appears normal. Bone structures are intact. The radiologist notes this as a normal chest X-ray with no significant findings requiring further investigation.",
      tags: ["chest", "xray", "radiology"],
    },
    {
      id: "4",
      name: "Diabetes Medication Prescription",
      type: "prescription",
      category: "Chronic Care",
      date: "2024-11-28",
      doctor: "Dr. Samaram",
      hospital: "Care Hospital",
      fileSize: "890 KB",
      fileType: "PDF",
      isShared: false,
      aiSummary:
        "This prescription includes Metformin 500mg (twice daily with meals) for blood sugar control. Also prescribed Vitamin B12 supplement due to potential deficiency from Metformin use. Follow-up appointment recommended in 3 months with HbA1c test.",
      tags: ["diabetes", "medication", "chronic"],
    },
    {
      id: "5",
      name: "Knee Surgery Discharge Summary",
      type: "discharge_summary",
      category: "Orthopedics",
      date: "2024-10-10",
      doctor: "Dr. Suresh Reddy",
      hospital: "KIMS Hospital",
      fileSize: "1.2 MB",
      fileType: "PDF",
      isShared: false,
      aiSummary:
        "You underwent successful arthroscopic knee surgery for meniscus repair. Hospital stay was 2 days. Post-operative care includes physical therapy twice weekly for 6 weeks, pain medication as needed, and avoiding weight-bearing activities for 4 weeks. Full recovery expected in 3 months.",
      tags: ["surgery", "knee", "orthopedic"],
    },
    {
      id: "6",
      name: "Thyroid Function Test",
      type: "lab_report",
      category: "Endocrinology",
      date: "2024-11-15",
      doctor: "Dr. Anitha Rao",
      hospital: "Yashoda Hospital",
      fileSize: "1.8 MB",
      fileType: "PDF",
      isShared: false,
      aiSummary:
        "Your thyroid function test shows TSH level of 2.5 mIU/L (normal: 0.4-4.0), T3 at 120 ng/dL (normal), and T4 at 8.2 µg/dL (normal). All thyroid hormones are within healthy ranges indicating normal thyroid function. No medication adjustments needed.",
      tags: ["thyroid", "hormones", "endocrine"],
    },
    {
      id: "7",
      name: "Hepatitis B Vaccination",
      type: "vaccination",
      category: "Immunization",
      date: "2024-08-20",
      hospital: "PHC Vijayawada",
      fileSize: "120 KB",
      fileType: "PDF",
      isShared: false,
      tags: ["hepatitis", "vaccine", "liver"],
    },
    {
      id: "8",
      name: "Eye Examination Report",
      type: "other",
      category: "Ophthalmology",
      date: "2024-09-05",
      doctor: "Dr. Lakshmi Devi",
      hospital: "LV Prasad Eye Institute",
      fileSize: "950 KB",
      fileType: "PDF",
      isShared: false,
      aiSummary:
        "Comprehensive eye examination shows visual acuity of 6/6 in both eyes. No signs of glaucoma, cataracts, or retinal issues detected. Mild dry eye condition noted - artificial tears recommended. Next check-up in 1 year.",
      tags: ["eye", "vision", "routine"],
    },
  ]

const recordTypeIcons: Record<string, React.ReactNode> = {
    prescription: <Pill className="h-5 w-5" />,
    lab_report: <TestTube className="h-5 w-5" />,
    vaccination: <Syringe className="h-5 w-5" />,
    discharge_summary: <Hospital className="h-5 w-5" />,
    scan: <FileImage className="h-5 w-5" />,
    other: <FileText className="h-5 w-5" />,
  }

const recordTypeColors: Record<string, string> = {
    prescription: "bg-blue-100 text-blue-700",
    lab_report: "bg-green-100 text-green-700",
    vaccination: "bg-purple-100 text-purple-700",
    discharge_summary: "bg-orange-100 text-orange-700",
    scan: "bg-pink-100 text-pink-700",
    other: "bg-gray-100 text-gray-700",
  }

const filteredRecords = records.filter((record) => {
    const matchesSearch =
      record.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      record.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())) ||
      record.doctor?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      record.hospital?.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesType = selectedType === "all" || record.type === selectedType
    return matchesSearch && matchesType
  })

const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setUploadForm({ ...uploadForm, file, name: file.name.replace(/\.[^/.]+$/, "") })
    }
  }

const handleUpload = () => {
    // Simulate upload
    setShowUploadModal(false)
    setUploadForm({
      name: "",
      type: "prescription",
      category: "",
      doctor: "",
      hospital: "",
      date: "",
      tags: "",
      file: null,
    })
  }

const handleViewRecord = (record: HealthRecord) => {
    setSelectedRecord(record)
    setShowRecordModal(true)
    setShowAISummary(false)
  }

const handleGenerateAISummary = () => {
    setIsGeneratingSummary(true)
    setTimeout(() => {
      setIsGeneratingSummary(false)
      setShowAISummary(true)
    }, 2000)
  }

const handleCreateFolder = () => {
    if (newFolderName.trim()) {
      // Add folder logic
      setShowCreateFolder(false)
      setNewFolderName("")
    }
  }

const storageUsed = 45 // percentage
  const totalStorage = "5 GB"
  const usedStorage = "2.25 GB"

return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-blue-50">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Link href="/">
                <Button variant="ghost" size="icon" className="rounded-full">
                  <ArrowLeft className="h-5 w-5" />
                </Button>
              </Link>
              <div>
                <h1 className="text-xl font-bold text-slate-800">Health Vault</h1>
                <p className="text-sm text-slate-500">Your secure digital health locker</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Badge variant="outline" className="gap-1 bg-green-50 text-green-700 border-green-200">
                <Shield className="h-3 w-3" />
                256-bit Encrypted
              </Badge>
            </div>
          </div>
        </div>
      </header>

<main className="container mx-auto px-4 py-6 space-y-6">
        {/* Storage Overview */}
        <Card className="bg-gradient-to-r from-teal-600 to-cyan-600 text-white border-0">
          <CardContent className="p-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
                  <Lock className="h-8 w-8" />
                </div>
                <div>
                  <h2 className="text-lg font-semibold">Secure Health Storage</h2>
                  <p className="text-teal-100 text-sm">All your medical records in one place</p>
                </div>
              </div>
              <div className="flex-1 max-w-xs">
                <div className="flex justify-between text-sm mb-2">
                  <span>{usedStorage} used</span>
                  <span>{totalStorage} total</span>
                </div>
                <div className="h-3 bg-white/20 rounded-full overflow-hidden">
                  <div
                    className="h-full bg-white rounded-full transition-all duration-500"
                    style={{ width: `${storageUsed}%` }}
                  />
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Quick Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <Card className="bg-white/80 backdrop-blur border-slate-200">
            <CardContent className="p-4 text-center">
              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <FileText className="h-5 w-5 text-blue-600" />
              </div>
              <p className="text-2xl font-bold text-slate-800">{records.length}</p>
              <p className="text-xs text-slate-500">Total Records</p>
            </CardContent>
          </Card>
          <Card className="bg-white/80 backdrop-blur border-slate-200">
            <CardContent className="p-4 text-center">
              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <TestTube className="h-5 w-5 text-green-600" />
              </div>
              <p className="text-2xl font-bold text-slate-800">
                {records.filter((r) => r.type === "lab_report").length}
              </p>
              <p className="text-xs text-slate-500">Lab Reports</p>
            </CardContent>
          </Card>
          <Card className="bg-white/80 backdrop-blur border-slate-200">
            <CardContent className="p-4 text-center">
              <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <Syringe className="h-5 w-5 text-purple-600" />
              </div>
              <p className="text-2xl font-bold text-slate-800">
                {records.filter((r) => r.type === "vaccination").length}
              </p>
              <p className="text-xs text-slate-500">Vaccinations</p>
            </CardContent>
          </Card>
          <Card className="bg-white/80 backdrop-blur border-slate-200">
            <CardContent className="p-4 text-center">
              <div className="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-2">
                <Share2 className="h-5 w-5 text-orange-600" />
              </div>
              <p className="text-2xl font-bold text-slate-800">{records.filter((r) => r.isShared).length}</p>
              <p className="text-xs text-slate-500">Shared Records</p>
            </CardContent>
          </Card>
        </div>

{/* Main Content */}
        <Tabs defaultValue="records" className="space-y-4">
          <TabsList className="bg-white border border-slate-200 p-1">
            <TabsTrigger value="records" className="data-[state=active]:bg-teal-600 data-[state=active]:text-white">
              All Records
            </TabsTrigger>
            <TabsTrigger value="folders" className="data-[state=active]:bg-teal-600 data-[state=active]:text-white">
              Folders
            </TabsTrigger>
            <TabsTrigger value="shared" className="data-[state=active]:bg-teal-600 data-[state=active]:text-white">
              Shared
            </TabsTrigger>
          </TabsList>

<TabsContent value="records" className="space-y-4">
            {/* Search and Filter */}
            <div className="flex flex-col sm:flex-row gap-3">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                <Input
                  placeholder="Search records, doctors, hospitals..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 bg-white"
                />
              </div>
              <Select value={selectedType} onValueChange={setSelectedType}>
                <SelectTrigger className="w-full sm:w-48 bg-white">
                  <Filter className="h-4 w-4 mr-2" />
                  <SelectValue placeholder="Filter by type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Types</SelectItem>
                  <SelectItem value="prescription">Prescriptions</SelectItem>
                  <SelectItem value="lab_report">Lab Reports</SelectItem>
                  <SelectItem value="vaccination">Vaccinations</SelectItem>
                  <SelectItem value="discharge_summary">Discharge Summaries</SelectItem>
                  <SelectItem value="scan">Scans & Imaging</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
              <Button onClick={() => setShowUploadModal(true)} className="bg-teal-600 hover:bg-teal-700">
                <Upload className="h-4 w-4 mr-2" />
                Upload
              </Button>
            </div>

{/* Records List */}
            <div className="space-y-3">
              {filteredRecords.map((record) => (
                <Card
                  key={record.id}
                  className="bg-white hover:shadow-md transition-all cursor-pointer border-slate-200"
                  onClick={() => handleViewRecord(record)}
                >
                  <CardContent className="p-4">
                    <div className="flex items-start gap-4">
                      <div
                        className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${recordTypeColors[record.type]}`}
                      >
                        {recordTypeIcons[record.type]}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-start justify-between gap-2">
                          <div className="min-w-0">
                            <h3 className="font-semibold text-slate-800 truncate">{record.name}</h3>
                            <p className="text-sm text-slate-500">{record.category}</p>
                          </div>
                          <div className="flex items-center gap-2 flex-shrink-0">
                            {record.isShared && (
                              <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
                                <Share2 className="h-3 w-3 mr-1" />
                                Shared
                              </Badge>
                            )}
                            {record.aiSummary && (
                              <Badge
                                variant="outline"
                                className="text-xs bg-purple-50 text-purple-700 border-purple-200"
                              >
                                <Sparkles className="h-3 w-3 mr-1" />
                                AI
                              </Badge>
                            )}
                          </div>
                        </div>
                        <div className="flex flex-wrap items-center gap-3 mt-2 text-xs text-slate-500">
                          <span className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {new Date(record.date).toLocaleDateString("en-IN", {
                              day: "numeric",
                              month: "short",
                              year: "numeric",
                            })}
                          </span>
                          {record.doctor && (
                            <span className="flex items-center gap-1">
                              <Stethoscope className="h-3 w-3" />
                              {record.doctor}
                            </span>
                          )}
                          {record.hospital && (
                            <span className="flex items-center gap-1">
                              <Hospital className="h-3 w-3" />
                              <span className="truncate max-w-[120px]">{record.hospital}</span>
                            </span>
                          )}
                          <span className="flex items-center gap-1">
                            <FileText className="h-3 w-3" />
                            {record.fileType} • {record.fileSize}
                          </span>
                        </div>
                        {record.tags.length > 0 && (
                          <div className="flex flex-wrap gap-1 mt-2">
                            {record.tags.map((tag, idx) => (
                              <Badge key={idx} variant="secondary" className="text-xs bg-slate-100">
                                {tag}
                              </Badge>
                            ))}
                          </div>
                        )}
                      </div>
                      <ChevronRight className="h-5 w-5 text-slate-400 flex-shrink-0" />
                    </div>
                  </CardContent>
                </Card>
              ))}

{filteredRecords.length === 0 && (
                <Card className="bg-white border-slate-200">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Search className="h-8 w-8 text-slate-400" />
                    </div>
                    <h3 className="font-semibold text-slate-800 mb-1">No records found</h3>
                    <p className="text-sm text-slate-500">Try adjusting your search or filters</p>
                  </CardContent>
                </Card>
              )}
            </div>
          </TabsContent>

<TabsContent value="folders" className="space-y-4">
            <div className="flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">Your Folders</h3>
              <Button variant="outline" size="sm" onClick={() => setShowCreateFolder(true)}>
                <FolderPlus className="h-4 w-4 mr-2" />
                New Folder
              </Button>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              {folders.map((folder) => (
                <Card
                  key={folder.id}
                  className="bg-white hover:shadow-md transition-all cursor-pointer border-slate-200"
                >
                  <CardContent className="p-4">
                    <div className="flex items-center gap-3">
                      <div className={`w-10 h-10 ${folder.color} rounded-lg flex items-center justify-center`}>
                        <Folder className="h-5 w-5 text-white" />
                      </div>
                      <div className="min-w-0">
                        <h4 className="font-medium text-slate-800 truncate">{folder.name}</h4>
                        <p className="text-xs text-slate-500">{folder.recordCount} records</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

<TabsContent value="shared" className="space-y-4">
            <Card className="bg-white border-slate-200">
              <CardHeader>
                <CardTitle className="text-lg">Shared Records</CardTitle>
                <CardDescription>Records you've shared with healthcare providers</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                {records
                  .filter((r) => r.isShared)
                  .map((record) => (
                    <div key={record.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div
                          className={`w-10 h-10 rounded-lg flex items-center justify-center ${recordTypeColors[record.type]}`}
                        >
                          {recordTypeIcons[record.type]}
                        </div>
                        <div>
                          <h4 className="font-medium text-slate-800">{record.name}</h4>
                          <p className="text-xs text-slate-500">
                            Shared on {new Date(record.date).toLocaleDateString()}
                          </p>
                        </div>
                      </div>
                      <Button variant="ghost" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50">
                        Revoke
                      </Button>
                    </div>
                  ))}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>

{/* Upload Modal */}
      {showUploadModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
          <Card className="w-full max-w-lg bg-white max-h-[90vh] overflow-y-auto">
            <CardHeader className="border-b">
              <div className="flex items-center justify-between">
                <CardTitle>Upload Health Record</CardTitle>
                <Button variant="ghost" size="icon" onClick={() => setShowUploadModal(false)}>
                  <X className="h-5 w-5" />
                </Button>
              </div>
            </CardHeader>
            <CardContent className="p-6 space-y-4">
              {/* File Upload Area */}
              <div
                className="border-2 border-dashed border-slate-300 rounded-xl p-8 text-center cursor-pointer hover:border-teal-500 transition-colors"
                onClick={() => fileInputRef.current?.click()}
              >
                <input
                  type="file"
                  ref={fileInputRef}
                  className="hidden"
                  accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
                  onChange={handleFileSelect}
                />
                {uploadForm.file ? (
                  <div className="flex items-center justify-center gap-3">
                    <CheckCircle className="h-8 w-8 text-green-500" />
                    <div className="text-left">
                      <p className="font-medium text-slate-800">{uploadForm.file.name}</p>
                      <p className="text-sm text-slate-500">{(uploadForm.file.size / 1024 / 1024).toFixed(2)} MB</p>
                    </div>
                  </div>
                ) : (
                  <>
                    <Upload className="h-10 w-10 text-slate-400 mx-auto mb-3" />
                    <p className="font-medium text-slate-800">Click to upload or drag and drop</p>
                    <p className="text-sm text-slate-500">PDF, JPG, PNG, DOC up to 10MB</p>
                  </>
                )}
              </div>

{/* Form Fields */}
              <div className="space-y-4">
                <div>
                  <Label>Record Name</Label>
                  <Input
                    value={uploadForm.name}
                    onChange={(e) => setUploadForm({ ...uploadForm, name: e.target.value })}
                    placeholder="Enter record name"
                  />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label>Record Type</Label>
                    <Select
                      value={uploadForm.type}
                      onValueChange={(value) => setUploadForm({ ...uploadForm, type: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="prescription">Prescription</SelectItem>
                        <SelectItem value="lab_report">Lab Report</SelectItem>
                        <SelectItem value="vaccination">Vaccination</SelectItem>
                        <SelectItem value="discharge_summary">Discharge Summary</SelectItem>
                        <SelectItem value="scan">Scan/Imaging</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label>Date</Label>
                    <Input
                      type="date"
                      value={uploadForm.date}
                      onChange={(e) => setUploadForm({ ...uploadForm, date: e.target.value })}
                    />
                  </div>
                </div>
                <div>
                  <Label>Doctor Name (Optional)</Label>
                  <Input
                    value={uploadForm.doctor}
                    onChange={(e) => setUploadForm({ ...uploadForm, doctor: e.target.value })}
                    placeholder="Dr. Name"
                  />
                </div>
                <div>
                  <Label>Hospital/Clinic (Optional)</Label>
                  <Input
                    value={uploadForm.hospital}
                    onChange={(e) => setUploadForm({ ...uploadForm, hospital: e.target.value })}
                    placeholder="Hospital name"
                  />
                </div>
                <div>
                  <Label>Tags (Optional)</Label>
                  <Input
                    value={uploadForm.tags}
                    onChange={(e) => setUploadForm({ ...uploadForm, tags: e.target.value })}
                    placeholder="e.g., annual, routine, follow-up"
                  />
                </div>
              </div>

<div className="flex gap-3 pt-4">
                <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setShowUploadModal(false)}>
                  Cancel
                </Button>
                <Button
                  className="flex-1 bg-teal-600 hover:bg-teal-700"
                  onClick={handleUpload}
                  disabled={!uploadForm.file || !uploadForm.name}
                >
                  <Upload className="h-4 w-4 mr-2" />
                  Upload Record
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

{/* Record Detail Modal */}
      {showRecordModal && selectedRecord && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
          <Card className="w-full max-w-lg bg-white max-h-[90vh] overflow-y-auto">
            <CardHeader className="border-b">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div
                    className={`w-10 h-10 rounded-lg flex items-center justify-center ${recordTypeColors[selectedRecord.type]}`}
                  >
                    {recordTypeIcons[selectedRecord.type]}
                  </div>
                  <div>
                    <CardTitle className="text-lg">{selectedRecord.name}</CardTitle>
                    <p className="text-sm text-slate-500">{selectedRecord.category}</p>
                  </div>
                </div>
                <Button variant="ghost" size="icon" onClick={() => setShowRecordModal(false)}>
                  <X className="h-5 w-5" />
                </Button>
              </div>
            </CardHeader>
            <CardContent className="p-6 space-y-4">
              {/* Record Info */}
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-slate-50 p-3 rounded-lg">
                  <p className="text-xs text-slate-500">Date</p>
                  <p className="font-medium text-slate-800">
                    {new Date(selectedRecord.date).toLocaleDateString("en-IN", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    })}
                  </p>
                </div>
                <div className="bg-slate-50 p-3 rounded-lg">
                  <p className="text-xs text-slate-500">File Size</p>
                  <p className="font-medium text-slate-800">{selectedRecord.fileSize}</p>
                </div>
                {selectedRecord.doctor && (
                  <div className="bg-slate-50 p-3 rounded-lg">
                    <p className="text-xs text-slate-500">Doctor</p>
                    <p className="font-medium text-slate-800">{selectedRecord.doctor}</p>
                  </div>
                )}
                {selectedRecord.hospital && (
                  <div className="bg-slate-50 p-3 rounded-lg">
                    <p className="text-xs text-slate-500">Hospital</p>
                    <p className="font-medium text-slate-800 truncate">{selectedRecord.hospital}</p>
                  </div>
                )}
              </div>

{/* AI Summary Section */}
              <div className="border border-purple-200 rounded-xl overflow-hidden">
                <div
                  className="bg-purple-50 p-4 flex items-center justify-between cursor-pointer"
                  onClick={() =>
                    selectedRecord.aiSummary ? setShowAISummary(!showAISummary) : handleGenerateAISummary()
                  }
                >
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                      <Sparkles className="h-5 w-5 text-purple-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-purple-900">AI Summary</h4>
                      <p className="text-xs text-purple-600">
                        {selectedRecord.aiSummary
                          ? "Click to view simplified explanation"
                          : "Generate easy-to-understand summary"}
                      </p>
                    </div>
                  </div>
                  {isGeneratingSummary ? (
                    <div className="animate-spin h-5 w-5 border-2 border-purple-600 border-t-transparent rounded-full" />
                  ) : (
                    <ChevronRight
                      className={`h-5 w-5 text-purple-600 transition-transform ${showAISummary ? "rotate-90" : ""}`}
                    />
                  )}
                </div>
                {showAISummary && selectedRecord.aiSummary && (
                  <div className="p-4 bg-white border-t border-purple-200">
                    <p className="text-sm text-slate-700 leading-relaxed">{selectedRecord.aiSummary}</p>
                  </div>
                )}
              </div>

{/* Tags */}
              {selectedRecord.tags.length > 0 && (
                <div>
                  <p className="text-sm text-slate-500 mb-2">Tags</p>
                  <div className="flex flex-wrap gap-2">
                    {selectedRecord.tags.map((tag, idx) => (
                      <Badge key={idx} variant="secondary">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </div>
              )}

{/* Actions */}
              <div className="grid grid-cols-2 gap-3 pt-4">
                <Button variant="outline" className="gap-2 bg-transparent">
                  <Eye className="h-4 w-4" />
                  View
                </Button>
                <Button variant="outline" className="gap-2 bg-transparent">
                  <Download className="h-4 w-4" />
                  Download
                </Button>
                <Button variant="outline" className="gap-2 bg-transparent">
                  <Share2 className="h-4 w-4" />
                  Share
                </Button>
                <Button
                  variant="outline"
                  className="gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
                >
                  <Trash2 className="h-4 w-4" />
                  Delete
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

{/* Create Folder Modal */}
      {showCreateFolder && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
          <Card className="w-full max-w-sm bg-white">
            <CardHeader>
              <CardTitle>Create New Folder</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label>Folder Name</Label>
                <Input
                  value={newFolderName}
                  onChange={(e) => setNewFolderName(e.target.value)}
                  placeholder="e.g., Family Records"
                />
              </div>
              <div className="flex gap-3">
                <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setShowCreateFolder(false)}>
                  Cancel
                </Button>
                <Button
                  className="flex-1 bg-teal-600 hover:bg-teal-700"
                  onClick={handleCreateFolder}
                  disabled={!newFolderName.trim()}
                >
                  Create
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/health-vault/loading.tsx" isEdit="true" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent } from "@/components/ui/card"

export default function HealthVaultLoading() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-blue-50 p-4">
      <div className="container mx-auto space-y-6">
        <Skeleton className="h-10 w-48" />
        <Skeleton className="h-32 w-full rounded-xl" />
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <Card key={i}>
              <CardContent className="p-4">
                <Skeleton className="h-16 w-full" />
              </CardContent>
            </Card>
          ))}
        </div>
        <div className="space-y-3">
          {[1, 2, 3, 4].map((i) => (
            <Skeleton key={i} className="h-24 w-full rounded-xl" />
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/health-vault/route.ts" isMerged="true"
import { neon } from "@neondatabase/serverless"
import { type NextRequest, NextResponse } from "next/server"

const sql = neon(process.env.DATABASE_URL!)

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")
    const type = searchParams.get("type")
    const search = searchParams.get("search")
    const folderId = searchParams.get("folderId")

let query = `
      SELECT 
        hr.*,
        d.name as doctor_name,
        h.name as hospital_name
      FROM health_records hr
      LEFT JOIN doctors d ON hr.doctor_id = d.id
      LEFT JOIN hospitals h ON hr.hospital_id = h.id
      WHERE hr.user_id = $1
    `
    const params: any[] = [userId]
    let paramIndex = 2

if (type && type !== "all") {
      query += ` AND hr.record_type = $${paramIndex}`
      params.push(type)
      paramIndex++
    }

if (folderId && folderId !== "all") {
      query += ` AND hr.folder_id = $${paramIndex}`
      params.push(folderId)
      paramIndex++
    }

if (search) {
      query += ` AND (
        LOWER(hr.name) LIKE $${paramIndex} OR 
        LOWER(hr.category) LIKE $${paramIndex} OR
        EXISTS (SELECT 1 FROM unnest(hr.tags) tag WHERE LOWER(tag) LIKE $${paramIndex})
      )`
      params.push(`%${search.toLowerCase()}%`)
      paramIndex++
    }

query += " ORDER BY hr.record_date DESC"

const records = await sql(query, params)

return NextResponse.json({
      success: true,
      records,
    })
  } catch (error) {
    console.error("Error fetching health records:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch health records" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const {
      userId,
      name,
      recordType,
      category,
      recordDate,
      doctorId,
      hospitalId,
      fileUrl,
      fileSize,
      fileType,
      tags,
      folderId,
    } = body

const result = await sql`
      INSERT INTO health_records (
        user_id, name, record_type, category, record_date, 
        doctor_id, hospital_id, file_url, file_size, file_type, 
        tags, folder_id, created_at
      ) VALUES (
        ${userId}, ${name}, ${recordType}, ${category}, ${recordDate},
        ${doctorId || null}, ${hospitalId || null}, ${fileUrl}, ${fileSize}, ${fileType},
        ${tags || []}, ${folderId || null}, NOW()
      )
      RETURNING *
    `

return NextResponse.json({
      success: true,
      record: result[0],
      message: "Health record uploaded successfully",
    })
  } catch (error) {
    console.error("Error uploading health record:", error)
    return NextResponse.json({ success: false, error: "Failed to upload health record" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/health-vault/[id]/ai-summary/route.ts" isMerged="true"
import { neon } from "@neondatabase/serverless"
import { type NextRequest, NextResponse } from "next/server"
import { generateText } from "ai"

const sql = neon(process.env.DATABASE_URL!)

export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const { id } = await params

// Fetch the record
    const records = await sql`
      SELECT * FROM health_records WHERE id = ${id}
    `

if (records.length === 0) {
      return NextResponse.json({ success: false, error: "Record not found" }, { status: 404 })
    }

const record = records[0]

// Generate AI summary using Vercel AI SDK
    const { text: summary } = await generateText({
      model: "openai/gpt-4o-mini",
      prompt: `You are a helpful medical assistant. Analyze the following medical record and provide a simple, easy-to-understand summary for a patient. Avoid medical jargon and explain any important findings or recommendations clearly.

Record Type: ${record.record_type}
Category: ${record.category}
Name: ${record.name}
Date: ${record.record_date}

Please provide:
1. A brief summary of what this record is about
2. Key findings or information (if any)
3. Any important follow-up actions or recommendations

Keep the response concise and patient-friendly.`,
    })

// Update the record with AI summary
    await sql`
      UPDATE health_records 
      SET ai_summary = ${summary}, updated_at = NOW()
      WHERE id = ${id}
    `

return NextResponse.json({
      success: true,
      summary,
    })
  } catch (error) {
    console.error("Error generating AI summary:", error)
    return NextResponse.json({ success: false, error: "Failed to generate AI summary" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/health-vault/folders/route.ts" isMerged="true"
import { neon } from "@neondatabase/serverless"
import { type NextRequest, NextResponse } from "next/server"

const sql = neon(process.env.DATABASE_URL!)

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")

const folders = await sql`
      SELECT 
        f.*,
        COUNT(hr.id) as record_count
      FROM health_folders f
      LEFT JOIN health_records hr ON hr.folder_id = f.id
      WHERE f.user_id = ${userId}
      GROUP BY f.id
      ORDER BY f.name ASC
    `

return NextResponse.json({
      success: true,
      folders,
    })
  } catch (error) {
    console.error("Error fetching folders:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch folders" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { userId, name, color } = body

const result = await sql`
      INSERT INTO health_folders (user_id, name, color, created_at)
      VALUES (${userId}, ${name}, ${color || "bg-blue-500"}, NOW())
      RETURNING *
    `

return NextResponse.json({
      success: true,
      folder: result[0],
      message: "Folder created successfully",
    })
  } catch (error) {
    console.error("Error creating folder:", error)
    return NextResponse.json({ success: false, error: "Failed to create folder" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/07-health-vault-tables.sql" isMerged="true"
-- Health Folders Table
CREATE TABLE IF NOT EXISTS health_folders (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
  name VARCHAR(100) NOT NULL,
  color VARCHAR(50) DEFAULT 'bg-blue-500',
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Health Records Table
CREATE TABLE IF NOT EXISTS health_records (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
  folder_id INTEGER REFERENCES health_folders(id) ON DELETE SET NULL,
  name VARCHAR(255) NOT NULL,
  record_type VARCHAR(50) NOT NULL CHECK (record_type IN ('prescription', 'lab_report', 'vaccination', 'discharge_summary', 'scan', 'other')),
  category VARCHAR(100),
  record_date DATE NOT NULL,
  doctor_id INTEGER REFERENCES doctors(id) ON DELETE SET NULL,
  hospital_id INTEGER REFERENCES hospitals(id) ON DELETE SET NULL,
  file_url TEXT NOT NULL,
  file_size VARCHAR(50),
  file_type VARCHAR(20),
  tags TEXT[] DEFAULT '{}',
  is_shared BOOLEAN DEFAULT FALSE,
  shared_with TEXT[] DEFAULT '{}',
  ai_summary TEXT,
  notes TEXT,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Record Sharing Table
CREATE TABLE IF NOT EXISTS health_record_shares (
  id SERIAL PRIMARY KEY,
  record_id INTEGER REFERENCES health_records(id) ON DELETE CASCADE,
  shared_with_email VARCHAR(255) NOT NULL,
  shared_with_type VARCHAR(50) CHECK (shared_with_type IN ('doctor', 'hospital', 'family', 'other')),
  access_level VARCHAR(20) DEFAULT 'view' CHECK (access_level IN ('view', 'download')),
  expires_at TIMESTAMP,
  share_code VARCHAR(100) UNIQUE,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Create indexes for performance
CREATE INDEX IF NOT EXISTS idx_health_records_user ON health_records(user_id);
CREATE INDEX IF NOT EXISTS idx_health_records_type ON health_records(record_type);
CREATE INDEX IF NOT EXISTS idx_health_records_date ON health_records(record_date DESC);
CREATE INDEX IF NOT EXISTS idx_health_records_folder ON health_records(folder_id);
CREATE INDEX IF NOT EXISTS idx_health_folders_user ON health_folders(user_id);
CREATE INDEX IF NOT EXISTS idx_health_record_shares_record ON health_record_shares(record_id);

-- Insert default folders for new users (trigger function)
CREATE OR REPLACE FUNCTION create_default_health_folders()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO health_folders (user_id, name, color) VALUES
    (NEW.id, 'Prescriptions', 'bg-blue-500'),
    (NEW.id, 'Lab Reports', 'bg-green-500'),
    (NEW.id, 'Vaccinations', 'bg-purple-500'),
    (NEW.id, 'Discharge Summaries', 'bg-orange-500'),
    (NEW.id, 'Scans & Imaging', 'bg-pink-500'),
    (NEW.id, 'Family Records', 'bg-teal-500');
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger for default folders
DROP TRIGGER IF EXISTS trigger_create_default_folders ON users;
CREATE TRIGGER trigger_create_default_folders
  AFTER INSERT ON users
  FOR EACH ROW
  EXECUTE FUNCTION create_default_health_folders();
[V0_FILE]typescriptreact:file="app/ai-assistant/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  ArrowLeft,
  Bot,
  Send,
  Mic,
  MicOff,
  Sparkles,
  Pill,
  Bell,
  Heart,
  Brain,
  AlertTriangle,
  CheckCircle,
  Clock,
  Plus,
  Trash2,
  X,
  Stethoscope,
  Apple,
  Dumbbell,
  Moon,
  Droplets,
} from "lucide-react"
import Link from "next/link"

interface Message {
  id: string
  role: "user" | "assistant"
  content: string
  timestamp: Date
  suggestions?: string[]
}

interface Symptom {
  id: string
  name: string
  severity: "mild" | "moderate" | "severe"
  duration: string
}

interface MedicineReminder {
  id: string
  medicineName: string
  dosage: string
  frequency: string
  times: string[]
  isActive: boolean
  nextDose?: string
}

interface HealthGoal {
  id: string
  type: "water" | "steps" | "sleep" | "calories"
  target: number
  current: number
  unit: string
}

export default function AIAssistantPage() {
  const [activeTab, setActiveTab] = useState("chat")
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      role: "assistant",
      content:
        "Hello! I'm your MediCheck AI Health Assistant. I can help you with:\n\n• Symptom checking and preliminary guidance\n• Medicine reminders and dosage information\n• Fitness and lifestyle recommendations\n• Understanding your health reports\n\nHow can I assist you today?",
      timestamp: new Date(),
      suggestions: ["Check my symptoms", "Set medicine reminder", "Health tips", "Understand my report"],
    },
  ])
  const [inputMessage, setInputMessage] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const [isListening, setIsListening] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Symptom Checker State
  const [selectedSymptoms, setSelectedSymptoms] = useState<Symptom[]>([])
  const [symptomSearch, setSymptomSearch] = useState("")
  const [showDiagnosis, setShowDiagnosis] = useState(false)
  const [isAnalyzing, setIsAnalyzing] = useState(false)

// Medicine Reminders State
  const [reminders, setReminders] = useState<MedicineReminder[]>([
    {
      id: "1",
      medicineName: "Metformin 500mg",
      dosage: "1 tablet",
      frequency: "Twice daily",
      times: ["08:00", "20:00"],
      isActive: true,
      nextDose: "Today, 8:00 PM",
    },
    {
      id: "2",
      medicineName: "Vitamin D3",
      dosage: "1 capsule",
      frequency: "Once daily",
      times: ["09:00"],
      isActive: true,
      nextDose: "Tomorrow, 9:00 AM",
    },
    {
      id: "3",
      medicineName: "Aspirin 75mg",
      dosage: "1 tablet",
      frequency: "Once daily",
      times: ["07:00"],
      isActive: false,
    },
  ])
  const [showAddReminder, setShowAddReminder] = useState(false)
  const [newReminder, setNewReminder] = useState({
    medicineName: "",
    dosage: "",
    frequency: "once",
    times: ["08:00"],
  })

// Health Goals State
  const [healthGoals, setHealthGoals] = useState<HealthGoal[]>([
    { id: "1", type: "water", target: 8, current: 5, unit: "glasses" },
    { id: "2", type: "steps", target: 10000, current: 6500, unit: "steps" },
    { id: "3", type: "sleep", target: 8, current: 7, unit: "hours" },
    { id: "4", type: "calories", target: 2000, current: 1450, unit: "kcal" },
  ])

const commonSymptoms = [
    "Headache",
    "Fever",
    "Cough",
    "Sore Throat",
    "Fatigue",
    "Body Pain",
    "Nausea",
    "Dizziness",
    "Chest Pain",
    "Shortness of Breath",
    "Abdominal Pain",
    "Back Pain",
    "Joint Pain",
    "Skin Rash",
    "Cold/Runny Nose",
    "Loss of Appetite",
    "Vomiting",
    "Diarrhea",
    "Constipation",
    "Insomnia",
  ]

const filteredSymptoms = commonSymptoms.filter(
    (s) => s.toLowerCase().includes(symptomSearch.toLowerCase()) && !selectedSymptoms.find((sel) => sel.name === s),
  )

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

const handleSendMessage = async (message?: string) => {
    const text = message || inputMessage.trim()
    if (!text) return

const userMessage: Message = {
      id: Date.now().toString(),
      role: "user",
      content: text,
      timestamp: new Date(),
    }

setMessages((prev) => [...prev, userMessage])
    setInputMessage("")
    setIsTyping(true)

// Simulate AI response
    setTimeout(() => {
      const aiResponse = generateAIResponse(text)
      setMessages((prev) => [...prev, aiResponse])
      setIsTyping(false)
    }, 1500)
  }

const generateAIResponse = (userMessage: string): Message => {
    const lowerMessage = userMessage.toLowerCase()
    let response = ""
    let suggestions: string[] = []

if (lowerMessage.includes("symptom") || lowerMessage.includes("check")) {
      response =
        "I can help you check your symptoms. Please go to the 'Symptom Checker' tab where you can select your symptoms and I'll provide preliminary guidance.\n\n⚠️ Note: This is not a substitute for professional medical advice. Please consult a doctor for proper diagnosis."
      suggestions = ["Go to Symptom Checker", "Talk to a doctor", "View nearby hospitals"]
    } else if (lowerMessage.includes("medicine") || lowerMessage.includes("reminder")) {
      response =
        "I can help you set up medicine reminders! Go to the 'Medicine Reminders' tab to:\n\n• Add new medicine reminders\n• Set dosage and timing\n• Get notifications before each dose\n\nWould you like me to explain how any of your current medicines work?"
      suggestions = ["Set new reminder", "My current medicines", "Drug interactions"]
    } else if (lowerMessage.includes("headache")) {
      response =
        "I understand you're experiencing headaches. Here are some questions to help me better understand:\n\n• How long have you had the headache?\n• Is it on one side or both sides?\n• Is it throbbing or constant pressure?\n• Any other symptoms like nausea or sensitivity to light?\n\n🏥 If the headache is severe, sudden, or accompanied by fever, stiff neck, or confusion, please seek immediate medical attention."
      suggestions = ["It's a migraine", "Tension headache", "See a doctor", "Home remedies"]
    } else if (lowerMessage.includes("fever")) {
      response =
        "For fever management:\n\n• Stay hydrated - drink plenty of fluids\n• Rest adequately\n• Take paracetamol if temperature is above 100.4°F (38°C)\n• Use a cool compress on forehead\n\n⚠️ Seek medical attention if:\n• Fever persists more than 3 days\n• Temperature exceeds 103°F (39.4°C)\n• Accompanied by severe symptoms"
      suggestions = ["Check temperature", "Find medicines", "Book doctor"]
    } else if (lowerMessage.includes("health tip") || lowerMessage.includes("tips")) {
      response =
        "Here are some daily health tips:\n\n💧 Drink at least 8 glasses of water\n🚶 Walk 10,000 steps daily\n😴 Get 7-8 hours of quality sleep\n🥗 Eat balanced meals with fruits & vegetables\n🧘 Practice 10 minutes of meditation\n\nTrack your daily goals in the 'Lifestyle' tab!"
      suggestions = ["Track water intake", "Set fitness goals", "Sleep tips", "Diet advice"]
    } else if (lowerMessage.includes("report") || lowerMessage.includes("understand")) {
      response =
        "I can help you understand your medical reports! You can:\n\n1. Upload your report in the Health Vault\n2. Click on 'AI Summary' to get a simplified explanation\n3. Ask me specific questions about any values\n\nWhich report would you like help understanding?"
      suggestions = ["Blood test", "Thyroid test", "Cholesterol", "Go to Health Vault"]
    } else {
      response =
        "I'm here to help with your health-related queries. I can assist with:\n\n• Symptom checking and preliminary guidance\n• Medicine information and reminders\n• Understanding medical reports\n• Fitness and lifestyle tips\n\nWhat would you like to know?"
      suggestions = ["Check symptoms", "Medicine reminders", "Health tips", "Understand reports"]
    }

return {
      id: Date.now().toString(),
      role: "assistant",
      content: response,
      timestamp: new Date(),
      suggestions,
    }
  }

const handleAddSymptom = (symptomName: string) => {
    const newSymptom: Symptom = {
      id: Date.now().toString(),
      name: symptomName,
      severity: "mild",
      duration: "1-2 days",
    }
    setSelectedSymptoms((prev) => [...prev, newSymptom])
    setSymptomSearch("")
  }

const handleRemoveSymptom = (id: string) => {
    setSelectedSymptoms((prev) => prev.filter((s) => s.id !== id))
  }

const handleUpdateSymptom = (id: string, field: keyof Symptom, value: string) => {
    setSelectedSymptoms((prev) => prev.map((s) => (s.id === id ? { ...s, [field]: value } : s)))
  }

const handleAnalyzeSymptoms = () => {
    setIsAnalyzing(true)
    setTimeout(() => {
      setIsAnalyzing(false)
      setShowDiagnosis(true)
    }, 2000)
  }

const handleAddReminder = () => {
    const reminder: MedicineReminder = {
      id: Date.now().toString(),
      ...newReminder,
      frequency:
        newReminder.frequency === "once"
          ? "Once daily"
          : newReminder.frequency === "twice"
            ? "Twice daily"
            : "Three times daily",
      isActive: true,
      nextDose: "Today, " + newReminder.times[0],
    }
    setReminders((prev) => [...prev, reminder])
    setShowAddReminder(false)
    setNewReminder({ medicineName: "", dosage: "", frequency: "once", times: ["08:00"] })
  }

const handleToggleReminder = (id: string) => {
    setReminders((prev) => prev.map((r) => (r.id === id ? { ...r, isActive: !r.isActive } : r)))
  }

const handleDeleteReminder = (id: string) => {
    setReminders((prev) => prev.filter((r) => r.id !== id))
  }

const handleUpdateGoal = (id: string, increment: number) => {
    setHealthGoals((prev) => prev.map((g) => (g.id === id ? { ...g, current: Math.max(0, g.current + increment) } : g)))
  }

const goalIcons: Record<string, React.ReactNode> = {
    water: <Droplets className="h-5 w-5" />,
    steps: <Dumbbell className="h-5 w-5" />,
    sleep: <Moon className="h-5 w-5" />,
    calories: <Apple className="h-5 w-5" />,
  }

const goalColors: Record<string, string> = {
    water: "bg-blue-500",
    steps: "bg-green-500",
    sleep: "bg-purple-500",
    calories: "bg-orange-500",
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-purple-50">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Link href="/">
                <Button variant="ghost" size="icon" className="rounded-full">
                  <ArrowLeft className="h-5 w-5" />
                </Button>
              </Link>
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
                  <Bot className="h-5 w-5 text-white" />
                </div>
                <div>
                  <h1 className="text-xl font-bold text-slate-800">AI Health Assistant</h1>
                  <p className="text-xs text-green-600 flex items-center gap-1">
                    <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                    Online & Ready
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

<main className="container mx-auto px-4 py-6">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
          <TabsList className="bg-white border border-slate-200 p-1 grid grid-cols-4 w-full">
            <TabsTrigger
              value="chat"
              className="data-[state=active]:bg-purple-600 data-[state=active]:text-white text-xs sm:text-sm"
            >
              <Bot className="h-4 w-4 mr-1 hidden sm:block" />
              Chat
            </TabsTrigger>
            <TabsTrigger
              value="symptoms"
              className="data-[state=active]:bg-purple-600 data-[state=active]:text-white text-xs sm:text-sm"
            >
              <Stethoscope className="h-4 w-4 mr-1 hidden sm:block" />
              Symptoms
            </TabsTrigger>
            <TabsTrigger
              value="reminders"
              className="data-[state=active]:bg-purple-600 data-[state=active]:text-white text-xs sm:text-sm"
            >
              <Bell className="h-4 w-4 mr-1 hidden sm:block" />
              Reminders
            </TabsTrigger>
            <TabsTrigger
              value="lifestyle"
              className="data-[state=active]:bg-purple-600 data-[state=active]:text-white text-xs sm:text-sm"
            >
              <Heart className="h-4 w-4 mr-1 hidden sm:block" />
              Lifestyle
            </TabsTrigger>
          </TabsList>

{/* Chat Tab */}
          <TabsContent value="chat" className="space-y-4">
            <Card className="bg-white border-slate-200">
              <CardContent className="p-0">
                {/* Messages */}
                <div className="h-[50vh] overflow-y-auto p-4 space-y-4">
                  {messages.map((msg) => (
                    <div key={msg.id} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
                      <div className={`max-w-[85%] ${msg.role === "user" ? "order-2" : ""}`}>
                        {msg.role === "assistant" && (
                          <div className="flex items-center gap-2 mb-1">
                            <div className="w-6 h-6 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
                              <Bot className="h-3 w-3 text-white" />
                            </div>
                            <span className="text-xs text-slate-500">MediCheck AI</span>
                          </div>
                        )}
                        <div
                          className={`rounded-2xl px-4 py-3 ${
                            msg.role === "user"
                              ? "bg-purple-600 text-white rounded-br-md"
                              : "bg-slate-100 text-slate-800 rounded-bl-md"
                          }`}
                        >
                          <p className="text-sm whitespace-pre-line">{msg.content}</p>
                        </div>
                        {msg.suggestions && msg.suggestions.length > 0 && (
                          <div className="flex flex-wrap gap-2 mt-2">
                            {msg.suggestions.map((suggestion, idx) => (
                              <Button
                                key={idx}
                                variant="outline"
                                size="sm"
                                className="text-xs rounded-full bg-transparent"
                                onClick={() => handleSendMessage(suggestion)}
                              >
                                {suggestion}
                              </Button>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                  {isTyping && (
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
                        <Bot className="h-3 w-3 text-white" />
                      </div>
                      <div className="bg-slate-100 rounded-2xl px-4 py-3 rounded-bl-md">
                        <div className="flex gap-1">
                          <span
                            className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"
                            style={{ animationDelay: "0ms" }}
                          />
                          <span
                            className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"
                            style={{ animationDelay: "150ms" }}
                          />
                          <span
                            className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"
                            style={{ animationDelay: "300ms" }}
                          />
                        </div>
                      </div>
                    </div>
                  )}
                  <div ref={messagesEndRef} />
                </div>

{/* Input */}
                <div className="border-t p-4">
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="icon"
                      className={`rounded-full flex-shrink-0 ${isListening ? "bg-red-50 border-red-300 text-red-600" : ""}`}
                      onClick={() => setIsListening(!isListening)}
                    >
                      {isListening ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
                    </Button>
                    <Input
                      placeholder="Type your health question..."
                      value={inputMessage}
                      onChange={(e) => setInputMessage(e.target.value)}
                      onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
                      className="flex-1"
                    />
                    <Button
                      className="bg-purple-600 hover:bg-purple-700 rounded-full px-4"
                      onClick={() => handleSendMessage()}
                      disabled={!inputMessage.trim()}
                    >
                      <Send className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

{/* Symptom Checker Tab */}
          <TabsContent value="symptoms" className="space-y-4">
            <Card className="bg-white border-slate-200">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Stethoscope className="h-5 w-5 text-purple-600" />
                  Symptom Checker
                </CardTitle>
                <CardDescription>Select your symptoms for AI-powered preliminary guidance</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Symptom Search */}
                <div className="relative">
                  <Input
                    placeholder="Search symptoms..."
                    value={symptomSearch}
                    onChange={(e) => setSymptomSearch(e.target.value)}
                    className="pr-10"
                  />
                  {symptomSearch && filteredSymptoms.length > 0 && (
                    <div className="absolute top-full left-0 right-0 z-10 bg-white border rounded-lg shadow-lg mt-1 max-h-48 overflow-y-auto">
                      {filteredSymptoms.map((symptom) => (
                        <button
                          key={symptom}
                          className="w-full text-left px-4 py-2 hover:bg-slate-50 text-sm"
                          onClick={() => handleAddSymptom(symptom)}
                        >
                          {symptom}
                        </button>
                      ))}
                    </div>
                  )}
                </div>

{/* Quick Add Symptoms */}
                <div>
                  <p className="text-sm text-slate-500 mb-2">Common symptoms:</p>
                  <div className="flex flex-wrap gap-2">
                    {commonSymptoms.slice(0, 8).map((symptom) => (
                      <Button
                        key={symptom}
                        variant="outline"
                        size="sm"
                        className="text-xs bg-transparent"
                        onClick={() => handleAddSymptom(symptom)}
                        disabled={selectedSymptoms.some((s) => s.name === symptom)}
                      >
                        <Plus className="h-3 w-3 mr-1" />
                        {symptom}
                      </Button>
                    ))}
                  </div>
                </div>

{/* Selected Symptoms */}
                {selectedSymptoms.length > 0 && (
                  <div className="space-y-3">
                    <p className="text-sm font-medium text-slate-700">Your symptoms:</p>
                    {selectedSymptoms.map((symptom) => (
                      <Card key={symptom.id} className="bg-slate-50 border-slate-200">
                        <CardContent className="p-3">
                          <div className="flex items-start justify-between gap-3">
                            <div className="flex-1 space-y-2">
                              <div className="flex items-center justify-between">
                                <span className="font-medium text-slate-800">{symptom.name}</span>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-6 w-6 text-slate-400 hover:text-red-600"
                                  onClick={() => handleRemoveSymptom(symptom.id)}
                                >
                                  <X className="h-4 w-4" />
                                </Button>
                              </div>
                              <div className="grid grid-cols-2 gap-2">
                                <div>
                                  <Label className="text-xs">Severity</Label>
                                  <Select
                                    value={symptom.severity}
                                    onValueChange={(value) => handleUpdateSymptom(symptom.id, "severity", value)}
                                  >
                                    <SelectTrigger className="h-8 text-xs">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="mild">Mild</SelectItem>
                                      <SelectItem value="moderate">Moderate</SelectItem>
                                      <SelectItem value="severe">Severe</SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                                <div>
                                  <Label className="text-xs">Duration</Label>
                                  <Select
                                    value={symptom.duration}
                                    onValueChange={(value) => handleUpdateSymptom(symptom.id, "duration", value)}
                                  >
                                    <SelectTrigger className="h-8 text-xs">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="few-hours">Few hours</SelectItem>
                                      <SelectItem value="1-2 days">1-2 days</SelectItem>
                                      <SelectItem value="3-5 days">3-5 days</SelectItem>
                                      <SelectItem value="week+">More than a week</SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}

<Button
                      className="w-full bg-purple-600 hover:bg-purple-700"
                      onClick={handleAnalyzeSymptoms}
                      disabled={isAnalyzing}
                    >
                      {isAnalyzing ? (
                        <>
                          <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full mr-2" />
                          Analyzing...
                        </>
                      ) : (
                        <>
                          <Sparkles className="h-4 w-4 mr-2" />
                          Analyze Symptoms
                        </>
                      )}
                    </Button>
                  </div>
                )}

{/* Diagnosis Result */}
                {showDiagnosis && (
                  <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
                    <CardContent className="p-4 space-y-4">
                      <div className="flex items-start gap-3">
                        <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                          <Brain className="h-5 w-5 text-purple-600" />
                        </div>
                        <div>
                          <h3 className="font-semibold text-purple-900">AI Analysis Results</h3>
                          <p className="text-sm text-purple-700">Based on your symptoms</p>
                        </div>
                      </div>

<div className="space-y-3">
                        <div className="bg-white/80 rounded-lg p-3">
                          <div className="flex items-center gap-2 mb-2">
                            <AlertTriangle className="h-4 w-4 text-amber-500" />
                            <span className="text-sm font-medium">Possible Conditions:</span>
                          </div>
                          <ul className="text-sm text-slate-700 space-y-1 ml-6">
                            <li>• Common Cold / Viral Infection (High likelihood)</li>
                            <li>• Seasonal Flu (Moderate likelihood)</li>
                            <li>• Allergic Rhinitis (Low likelihood)</li>
                          </ul>
                        </div>

<div className="bg-white/80 rounded-lg p-3">
                          <div className="flex items-center gap-2 mb-2">
                            <CheckCircle className="h-4 w-4 text-green-500" />
                            <span className="text-sm font-medium">Recommendations:</span>
                          </div>
                          <ul className="text-sm text-slate-700 space-y-1 ml-6">
                            <li>• Rest and stay hydrated</li>
                            <li>• Take over-the-counter cold medicine</li>
                            <li>• Monitor temperature regularly</li>
                            <li>• Consult a doctor if symptoms worsen</li>
                          </ul>
                        </div>

<div className="bg-red-50 rounded-lg p-3 border border-red-200">
                          <p className="text-xs text-red-700">
                            <strong>Disclaimer:</strong> This is AI-generated preliminary guidance only. Please consult
                            a qualified healthcare professional for proper diagnosis and treatment.
                          </p>
                        </div>
                      </div>

<div className="flex gap-2">
                        <Button variant="outline" className="flex-1 bg-transparent" asChild>
                          <Link href="/booking">Book Doctor</Link>
                        </Button>
                        <Button className="flex-1 bg-purple-600 hover:bg-purple-700" asChild>
                          <Link href="/consultation">Video Consult</Link>
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                )}
              </CardContent>
            </Card>
          </TabsContent>

{/* Medicine Reminders Tab */}
          <TabsContent value="reminders" className="space-y-4">
            <Card className="bg-white border-slate-200">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="flex items-center gap-2">
                      <Bell className="h-5 w-5 text-purple-600" />
                      Medicine Reminders
                    </CardTitle>
                    <CardDescription>Never miss your medication doses</CardDescription>
                  </div>
                  <Button className="bg-purple-600 hover:bg-purple-700" onClick={() => setShowAddReminder(true)}>
                    <Plus className="h-4 w-4 mr-2" />
                    Add
                  </Button>
                </div>
              </CardHeader>
              <CardContent className="space-y-3">
                {reminders.map((reminder) => (
                  <Card
                    key={reminder.id}
                    className={`border ${reminder.isActive ? "border-slate-200" : "border-slate-100 bg-slate-50"}`}
                  >
                    <CardContent className="p-4">
                      <div className="flex items-start justify-between gap-3">
                        <div className="flex items-start gap-3">
                          <div
                            className={`w-10 h-10 rounded-full flex items-center justify-center ${
                              reminder.isActive ? "bg-purple-100" : "bg-slate-200"
                            }`}
                          >
                            <Pill className={`h-5 w-5 ${reminder.isActive ? "text-purple-600" : "text-slate-400"}`} />
                          </div>
                          <div>
                            <h4 className={`font-medium ${reminder.isActive ? "text-slate-800" : "text-slate-400"}`}>
                              {reminder.medicineName}
                            </h4>
                            <p className="text-sm text-slate-500">
                              {reminder.dosage} • {reminder.frequency}
                            </p>
                            <div className="flex flex-wrap gap-1 mt-1">
                              {reminder.times.map((time, idx) => (
                                <Badge
                                  key={idx}
                                  variant="secondary"
                                  className={`text-xs ${reminder.isActive ? "" : "bg-slate-100 text-slate-400"}`}
                                >
                                  <Clock className="h-3 w-3 mr-1" />
                                  {time}
                                </Badge>
                              ))}
                            </div>
                            {reminder.nextDose && reminder.isActive && (
                              <p className="text-xs text-green-600 mt-2 flex items-center gap-1">
                                <Bell className="h-3 w-3" />
                                Next: {reminder.nextDose}
                              </p>
                            )}
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Switch
                            checked={reminder.isActive}
                            onCheckedChange={() => handleToggleReminder(reminder.id)}
                          />
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-slate-400 hover:text-red-600"
                            onClick={() => handleDeleteReminder(reminder.id)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}

{reminders.length === 0 && (
                  <div className="text-center py-8">
                    <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3">
                      <Bell className="h-8 w-8 text-slate-400" />
                    </div>
                    <h3 className="font-medium text-slate-800 mb-1">No reminders yet</h3>
                    <p className="text-sm text-slate-500">Add your first medicine reminder</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

{/* Lifestyle Tab */}
          <TabsContent value="lifestyle" className="space-y-4">
            <Card className="bg-white border-slate-200">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Heart className="h-5 w-5 text-purple-600" />
                  Daily Health Goals
                </CardTitle>
                <CardDescription>Track your daily wellness activities</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {healthGoals.map((goal) => {
                  const percentage = Math.min(100, (goal.current / goal.target) * 100)
                  return (
                    <Card key={goal.id} className="bg-slate-50 border-slate-200">
                      <CardContent className="p-4">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center gap-3">
                            <div
                              className={`w-10 h-10 ${goalColors[goal.type]} rounded-full flex items-center justify-center text-white`}
                            >
                              {goalIcons[goal.type]}
                            </div>
                            <div>
                              <h4 className="font-medium text-slate-800 capitalize">{goal.type}</h4>
                              <p className="text-sm text-slate-500">
                                {goal.current} / {goal.target} {goal.unit}
                              </p>
                            </div>
                          </div>
                          <div className="flex items-center gap-1">
                            <Button
                              variant="outline"
                              size="icon"
                              className="h-8 w-8 bg-transparent"
                              onClick={() => handleUpdateGoal(goal.id, goal.type === "steps" ? -500 : -1)}
                            >
                              -
                            </Button>
                            <Button
                              variant="outline"
                              size="icon"
                              className="h-8 w-8 bg-transparent"
                              onClick={() => handleUpdateGoal(goal.id, goal.type === "steps" ? 500 : 1)}
                            >
                              +
                            </Button>
                          </div>
                        </div>
                        <div className="h-2 bg-slate-200 rounded-full overflow-hidden">
                          <div
                            className={`h-full ${goalColors[goal.type]} rounded-full transition-all duration-500`}
                            style={{ width: `${percentage}%` }}
                          />
                        </div>
                        {percentage >= 100 && (
                          <p className="text-xs text-green-600 mt-2 flex items-center gap-1">
                            <CheckCircle className="h-3 w-3" />
                            Goal achieved! Great job!
                          </p>
                        )}
                      </CardContent>
                    </Card>
                  )
                })}
              </CardContent>
            </Card>

{/* Health Tips */}
            <Card className="bg-gradient-to-br from-purple-600 to-pink-600 text-white border-0">
              <CardContent className="p-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
                    <Sparkles className="h-6 w-6" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-2">Daily Health Tip</h3>
                    <p className="text-purple-100 text-sm leading-relaxed">
                      Did you know? Walking for just 30 minutes a day can reduce the risk of heart disease by up to 35%.
                      Try taking a short walk after lunch to boost your energy and improve digestion!
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>

{/* Add Reminder Modal */}
      {showAddReminder && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
          <Card className="w-full max-w-md bg-white">
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle>Add Medicine Reminder</CardTitle>
                <Button variant="ghost" size="icon" onClick={() => setShowAddReminder(false)}>
                  <X className="h-5 w-5" />
                </Button>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label>Medicine Name</Label>
                <Input
                  placeholder="e.g., Paracetamol 500mg"
                  value={newReminder.medicineName}
                  onChange={(e) => setNewReminder({ ...newReminder, medicineName: e.target.value })}
                />
              </div>
              <div>
                <Label>Dosage</Label>
                <Input
                  placeholder="e.g., 1 tablet"
                  value={newReminder.dosage}
                  onChange={(e) => setNewReminder({ ...newReminder, dosage: e.target.value })}
                />
              </div>
              <div>
                <Label>Frequency</Label>
                <Select
                  value={newReminder.frequency}
                  onValueChange={(value) => {
                    const times =
                      value === "once"
                        ? ["08:00"]
                        : value === "twice"
                          ? ["08:00", "20:00"]
                          : ["08:00", "14:00", "20:00"]
                    setNewReminder({ ...newReminder, frequency: value, times })
                  }}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="once">Once daily</SelectItem>
                    <SelectItem value="twice">Twice daily</SelectItem>
                    <SelectItem value="thrice">Three times daily</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Reminder Times</Label>
                <div className="flex flex-wrap gap-2 mt-2">
                  {newReminder.times.map((time, idx) => (
                    <Input
                      key={idx}
                      type="time"
                      value={time}
                      onChange={(e) => {
                        const newTimes = [...newReminder.times]
                        newTimes[idx] = e.target.value
                        setNewReminder({ ...newReminder, times: newTimes })
                      }}
                      className="w-32"
                    />
                  ))}
                </div>
              </div>
              <div className="flex gap-3 pt-4">
                <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setShowAddReminder(false)}>
                  Cancel
                </Button>
                <Button
                  className="flex-1 bg-purple-600 hover:bg-purple-700"
                  onClick={handleAddReminder}
                  disabled={!newReminder.medicineName || !newReminder.dosage}
                >
                  Add Reminder
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ai-assistant/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent } from "@/components/ui/card"

export default function AIAssistantLoading() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-purple-50 p-4">
      <div className="container mx-auto space-y-6">
        <Skeleton className="h-10 w-48" />
        <Card>
          <CardContent className="p-4">
            <Skeleton className="h-[50vh] w-full" />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/ai-assistant/chat/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { streamText } from "ai"

export async function POST(request: NextRequest) {
  try {
    const { messages, userId } = await request.json()

const systemPrompt = `You are MediCheck AI, a helpful and empathetic health assistant for Indian patients. Your role is to:

1. Provide preliminary health guidance based on symptoms
2. Help users understand their medical reports and prescriptions
3. Offer general wellness and lifestyle advice
4. Remind users to consult qualified healthcare professionals for proper diagnosis

Guidelines:
- Always be empathetic and reassuring
- Use simple, non-medical jargon language
- Provide actionable advice when appropriate
- Always include a disclaimer about seeking professional medical help
- Be culturally sensitive to Indian healthcare context
- Never diagnose conditions definitively
- Recommend emergency care when symptoms sound serious

Remember: You are NOT a replacement for professional medical advice.`

const result = streamText({
      model: "openai/gpt-4o-mini",
      system: systemPrompt,
      messages,
    })

return result.toUIMessageStreamResponse()
  } catch (error) {
    console.error("Error in AI chat:", error)
    return NextResponse.json({ success: false, error: "Failed to process chat" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/ai-assistant/symptom-analysis/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { generateText } from "ai"

export async function POST(request: NextRequest) {
  try {
    const { symptoms } = await request.json()

const symptomList = symptoms
      .map((s: any) => `- ${s.name} (Severity: ${s.severity}, Duration: ${s.duration})`)
      .join("\n")

const { text: analysis } = await generateText({
      model: "openai/gpt-4o-mini",
      prompt: `You are a medical AI assistant. Analyze the following symptoms and provide:
1. Possible conditions (with likelihood: high/moderate/low)
2. Recommended actions
3. Warning signs to watch for
4. When to seek immediate medical attention

Symptoms:
${symptomList}

Provide your response in a structured JSON format:
{
  "possibleConditions": [{"name": "...", "likelihood": "high|moderate|low", "description": "..."}],
  "recommendations": ["..."],
  "warningsSigns": ["..."],
  "seekImmediateCare": ["..."],
  "disclaimer": "..."
}

Important: Always include appropriate medical disclaimers and recommend consulting a healthcare professional.`,
    })

// Parse the JSON response
    let analysisData
    try {
      analysisData = JSON.parse(analysis)
    } catch {
      analysisData = {
        possibleConditions: [
          { name: "Common Cold / Viral Infection", likelihood: "high", description: "Based on the symptoms reported" },
        ],
        recommendations: ["Rest and stay hydrated", "Monitor symptoms closely", "Consult a doctor if symptoms worsen"],
        warningsSigns: ["High fever above 103°F", "Difficulty breathing", "Severe headache or confusion"],
        seekImmediateCare: ["If symptoms suddenly worsen", "If you experience chest pain or difficulty breathing"],
        disclaimer:
          "This is AI-generated preliminary guidance only. Please consult a qualified healthcare professional for proper diagnosis and treatment.",
      }
    }

return NextResponse.json({
      success: true,
      analysis: analysisData,
    })
  } catch (error) {
    console.error("Error analyzing symptoms:", error)
    return NextResponse.json({ success: false, error: "Failed to analyze symptoms" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/medicine-reminders/route.ts" isMerged="true"
import { neon } from "@neondatabase/serverless"
import { type NextRequest, NextResponse } from "next/server"

const sql = neon(process.env.DATABASE_URL!)

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")

const reminders = await sql`
      SELECT * FROM medicine_reminders
      WHERE user_id = ${userId}
      ORDER BY created_at DESC
    `

return NextResponse.json({
      success: true,
      reminders,
    })
  } catch (error) {
    console.error("Error fetching reminders:", error)
    return NextResponse.json({ success: false, error: "Failed to fetch reminders" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { userId, medicineName, dosage, frequency, times, startDate, endDate } = body

const result = await sql`
      INSERT INTO medicine_reminders (
        user_id, medicine_name, dosage, frequency, 
        reminder_times, start_date, end_date, is_active, created_at
      ) VALUES (
        ${userId}, ${medicineName}, ${dosage}, ${frequency},
        ${times}, ${startDate || new Date().toISOString()}, ${endDate || null}, true, NOW()
      )
      RETURNING *
    `

return NextResponse.json({
      success: true,
      reminder: result[0],
      message: "Reminder created successfully",
    })
  } catch (error) {
    console.error("Error creating reminder:", error)
    return NextResponse.json({ success: false, error: "Failed to create reminder" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/08-ai-assistant-tables.sql" isMerged="true"
-- Medicine Reminders Table
CREATE TABLE IF NOT EXISTS medicine_reminders (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
  medicine_name VARCHAR(200) NOT NULL,
  dosage VARCHAR(100) NOT NULL,
  frequency VARCHAR(50) NOT NULL,
  reminder_times TEXT[] DEFAULT '{}',
  start_date DATE NOT NULL,
  end_date DATE,
  is_active BOOLEAN DEFAULT TRUE,
  notes TEXT,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Medicine Reminder Logs (Track taken/missed doses)
CREATE TABLE IF NOT EXISTS medicine_reminder_logs (
  id SERIAL PRIMARY KEY,
  reminder_id INTEGER REFERENCES medicine_reminders(id) ON DELETE CASCADE,
  scheduled_time TIMESTAMP NOT NULL,
  status VARCHAR(20) CHECK (status IN ('taken', 'missed', 'skipped', 'pending')),
  taken_at TIMESTAMP,
  notes TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Health Goals Table
CREATE TABLE IF NOT EXISTS health_goals (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
  goal_type VARCHAR(50) NOT NULL CHECK (goal_type IN ('water', 'steps', 'sleep', 'calories', 'exercise', 'meditation')),
  target_value DECIMAL(10, 2) NOT NULL,
  unit VARCHAR(20) NOT NULL,
  is_active BOOLEAN DEFAULT TRUE,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Health Goal Logs (Daily tracking)
CREATE TABLE IF NOT EXISTS health_goal_logs (
  id SERIAL PRIMARY KEY,
  goal_id INTEGER REFERENCES health_goals(id) ON DELETE CASCADE,
  log_date DATE NOT NULL,
  current_value DECIMAL(10, 2) NOT NULL,
  notes TEXT,
  created_at TIMESTAMP DEFAULT NOW(),
  UNIQUE(goal_id, log_date)
);

-- AI Chat History
CREATE TABLE IF NOT EXISTS ai_chat_history (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
  session_id VARCHAR(100) NOT NULL,
  role VARCHAR(20) CHECK (role IN ('user', 'assistant')),
  content TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Symptom Check History
CREATE TABLE IF NOT EXISTS symptom_checks (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
  symptoms JSONB NOT NULL,
  ai_analysis JSONB,
  follow_up_action VARCHAR(50),
  created_at TIMESTAMP DEFAULT NOW()
);

-- Create indexes
CREATE INDEX IF NOT EXISTS idx_medicine_reminders_user ON medicine_reminders(user_id);
CREATE INDEX IF NOT EXISTS idx_medicine_reminders_active ON medicine_reminders(is_active);
CREATE INDEX IF NOT EXISTS idx_health_goals_user ON health_goals(user_id);
CREATE INDEX IF NOT EXISTS idx_health_goal_logs_date ON health_goal_logs(log_date);
CREATE INDEX IF NOT EXISTS idx_ai_chat_session ON ai_chat_history(session_id);
CREATE INDEX IF NOT EXISTS idx_symptom_checks_user ON symptom_checks(user_id);
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isEdit="true" isQuickEdit="true"
import type * 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 }

export default Textarea118:T793d8,[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  /* Updated color palette for calming healthcare theme */
  --background: #ffffff;
  --foreground: #4f83c2;
  --card: #f0f4f8;
  --card-foreground: #374151;
  --popover: #ffffff;
  --popover-foreground: #4f83c2;
  --primary: #4f83c2;
  --primary-foreground: #ffffff;
  --secondary: #a8d5ba;
  --secondary-foreground: #374151;
  --muted: #b0c4de;
  --muted-foreground: #374151;
  --accent: #a8d5ba;
  --accent-foreground: #374151;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #d1d5db;
  --input: #f0f4f8;
  --ring: #a8d5ba;
  --chart-1: #4f83c2;
  --chart-2: #a8d5ba;
  --chart-3: #b0c4de;
  --chart-4: #e1f1f3;
  --chart-5: #f0f4f8;
  --radius: 0.5rem;
  --sidebar: #f0f4f8;
  --sidebar-foreground: #374151;
  --sidebar-primary: #4f83c2;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #a8d5ba;
  --sidebar-accent-foreground: #374151;
  --sidebar-border: #d1d5db;
  --sidebar-ring: #a8d5ba;
}

.dark {
  --background: #1f2937;
  --foreground: #f9fafb;
  --card: #374151;
  --card-foreground: #f9fafb;
  --popover: #374151;
  --popover-foreground: #f9fafb;
  --primary: #60a5fa;
  --primary-foreground: #1f2937;
  --secondary: #6ee7b7;
  --secondary-foreground: #1f2937;
  --muted: #4b5563;
  --muted-foreground: #d1d5db;
  --accent: #6ee7b7;
  --accent-foreground: #1f2937;
  --destructive: #ef4444;
  --destructive-foreground: #f9fafb;
  --border: #4b5563;
  --input: #374151;
  --ring: #6ee7b7;
  --chart-1: #60a5fa;
  --chart-2: #6ee7b7;
  --chart-3: #93c5fd;
  --chart-4: #a7f3d0;
  --chart-5: #e5e7eb;
  --sidebar: #374151;
  --sidebar-foreground: #f9fafb;
  --sidebar-primary: #60a5fa;
  --sidebar-primary-foreground: #1f2937;
  --sidebar-accent: #6ee7b7;
  --sidebar-accent-foreground: #1f2937;
  --sidebar-border: #4b5563;
  --sidebar-ring: #6ee7b7;
}

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

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67",
    "pg": "8.16.3",
    "bcryptjs": "3.0.2",
    "jsonwebtoken": "9.0.2",
    "@neondatabase/serverless": "1.0.1",
    "ai": "5.0.106"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]png:file="public/female-doctor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/female-doctor-tepfbvAfyn1xFgybZj12ofclQdQKPr.png" isMerged="true"
[V0_FILE]png:file="public/male-doctor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/male-doctor-cJm9GPB5QM4QDdmjUkVfFmNSMIKbbG.png" isMerged="true"
[V0_FILE]png:file="public/female-pediatrician.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/female-pediatrician-ohr87shdDSwtig8AlY1b1o9FdTb3MM.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/medicine/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/emergency/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/whatsapp/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, MessageCircle, Copy, Check, Bot, Calendar, Pill, Heart } from "lucide-react"
import Link from "next/link"

const whatsappNumber = "+91-98765-43210"
const whatsappLink = `https://wa.me/${whatsappNumber.replace(/[^0-9]/g, "")}`

const quickCommands = [
  {
    code: "0001",
    description: "Book Doctor Appointment",
    example: "0001 Cardiologist Apollo Hospital",
    icon: Calendar,
    color: "bg-primary/10 text-primary",
  },
  {
    code: "0002",
    description: "Find Medicine",
    example: "0002 Paracetamol 500mg",
    icon: Pill,
    color: "bg-secondary/20 text-secondary-foreground",
  },
  {
    code: "0003",
    description: "Emergency Assistance",
    example: "0003 Need ambulance",
    icon: Heart,
    color: "bg-destructive/10 text-destructive",
  },
  {
    code: "0004",
    description: "Check Appointment Status",
    example: "0004 Booking ID: 12345",
    icon: MessageCircle,
    color: "bg-accent/20 text-accent-foreground",
  },
]

const chatHistory = [
  {
    type: "user",
    message: "0001 Cardiologist",
    time: "10:30 AM",
  },
  {
    type: "bot",
    message:
      "Hi! I found 3 cardiologists near you:\n\n1. Dr. Priya Sharma - Apollo Hospital (2.3km)\n   Next slot: 2:30 PM today\n   Fee: ₹800\n\n2. Dr. Rajesh Kumar - Max Healthcare (1.8km)\n   Next slot: 4:00 PM today\n   Fee: ₹600\n\nReply with the number to book (1 or 2)",
    time: "10:30 AM",
  },
  {
    type: "user",
    message: "1",
    time: "10:31 AM",
  },
  {
    type: "bot",
    message:
      "Perfect! ✅ Appointment booked with Dr. Priya Sharma\n\n📅 Date: Today, 2:30 PM\n🏥 Apollo Hospital\n💰 Fee: ₹800\n📍 2.3km away\n\nBooking ID: APL12345\n\nYou'll receive SMS confirmation shortly. Need directions? Reply 'MAP'",
    time: "10:31 AM",
  },
]

export default function WhatsAppPage() {
  const [copiedCode, setCopiedCode] = useState<string | null>(null)
  const [phoneNumber, setPhoneNumber] = useState("")

const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    setCopiedCode(text)
    setTimeout(() => setCopiedCode(null), 2000)
  }

const openWhatsApp = (message?: string) => {
    const encodedMessage = message ? encodeURIComponent(message) : ""
    const url = `${whatsappLink}${message ? `?text=${encodedMessage}` : ""}`
    window.open(url, "_blank")
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-[#25D366] text-white px-4 py-4">
        <div className="max-w-md mx-auto">
          <div className="flex items-center gap-3 mb-4">
            <Link href="/">
              <Button variant="ghost" size="sm" className="p-2 text-white hover:bg-white/10">
                <ArrowLeft className="w-5 h-5" />
              </Button>
            </Link>
            <div className="flex items-center gap-3">
              <MessageCircle className="w-6 h-6" />
              <div>
                <h1 className="text-xl font-bold">WhatsApp Booking</h1>
                <p className="text-sm text-white/80">AI-powered healthcare assistant</p>
              </div>
            </div>
          </div>

{/* WhatsApp Number */}
          <Card className="bg-white/10 border-white/20">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-white/80">MediCheck WhatsApp</p>
                  <p className="font-bold text-lg">{whatsappNumber}</p>
                </div>
                <Button onClick={() => openWhatsApp()} className="bg-white text-[#25D366] hover:bg-white/90">
                  <MessageCircle className="w-4 h-4 mr-2" />
                  Chat Now
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </header>

{/* Main Content */}
      <main className="max-w-md mx-auto px-4 py-6 space-y-6">
        {/* How it Works */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg text-card-foreground flex items-center gap-2">
              <Bot className="w-5 h-5 text-primary" />
              How WhatsApp Booking Works
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm flex items-center justify-center font-bold">
                1
              </div>
              <div>
                <p className="font-medium text-card-foreground">Send a Code</p>
                <p className="text-sm text-muted-foreground">Use quick codes like "0001" for instant booking</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm flex items-center justify-center font-bold">
                2
              </div>
              <div>
                <p className="font-medium text-card-foreground">AI Responds</p>
                <p className="text-sm text-muted-foreground">Get instant replies with available options</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm flex items-center justify-center font-bold">
                3
              </div>
              <div>
                <p className="font-medium text-card-foreground">Confirm Booking</p>
                <p className="text-sm text-muted-foreground">Simple replies to complete your appointment</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Quick Commands */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg text-card-foreground">Quick Command Codes</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {quickCommands.map((command, index) => (
              <Card key={index} className="border border-border">
                <CardContent className="p-4">
                  <div className="flex items-start gap-3">
                    <div className={`w-10 h-10 rounded-full ${command.color} flex items-center justify-center`}>
                      <command.icon className="w-5 h-5" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <Badge variant="outline" className="font-mono font-bold">
                          {command.code}
                        </Badge>
                        <span className="font-medium text-card-foreground">{command.description}</span>
                      </div>
                      <p className="text-sm text-muted-foreground mb-2">
                        Example: <span className="font-mono bg-muted px-1 rounded">{command.example}</span>
                      </p>
                      <div className="flex gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => copyToClipboard(command.code)}
                          className="h-8"
                        >
                          {copiedCode === command.code ? (
                            <Check className="w-3 h-3 mr-1" />
                          ) : (
                            <Copy className="w-3 h-3 mr-1" />
                          )}
                          {copiedCode === command.code ? "Copied!" : "Copy Code"}
                        </Button>
                        <Button size="sm" onClick={() => openWhatsApp(command.example)} className="h-8">
                          Try Now
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </CardContent>
        </Card>

{/* Sample Conversation */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg text-card-foreground">Sample Conversation</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="bg-muted/50 rounded-lg p-3 space-y-3 max-h-64 overflow-y-auto">
              {chatHistory.map((message, index) => (
                <div key={index} className={`flex ${message.type === "user" ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[80%] rounded-lg p-3 ${
                      message.type === "user"
                        ? "bg-primary text-primary-foreground"
                        : "bg-white border border-border text-card-foreground"
                    }`}
                  >
                    <p className="text-sm whitespace-pre-line">{message.message}</p>
                    <p
                      className={`text-xs mt-1 ${
                        message.type === "user" ? "text-primary-foreground/70" : "text-muted-foreground"
                      }`}
                    >
                      {message.time}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Quick Start */}
        <Card className="bg-[#25D366]/5 border-[#25D366]/20">
          <CardContent className="p-6 text-center">
            <MessageCircle className="w-12 h-12 text-[#25D366] mx-auto mb-4" />
            <h3 className="font-bold text-lg text-card-foreground mb-2">Ready to Get Started?</h3>
            <p className="text-sm text-muted-foreground mb-4">
              Send "0001" to our WhatsApp number to book your first appointment instantly
            </p>
            <Button onClick={() => openWhatsApp("0001")} className="bg-[#25D366] hover:bg-[#25D366]/90 text-white">
              <MessageCircle className="w-4 h-4 mr-2" />
              Start Booking Now
            </Button>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/whatsapp/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/map/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft, MapPin, Navigation, Phone, Clock, Star, Search, Locate } from "lucide-react"
import Link from "next/link"

// Mock data for nearby locations
const nearbyLocations = [
  {
    id: 1,
    name: "Apollo Hospital",
    type: "hospital",
    address: "Sarita Vihar, New Delhi",
    distance: "1.2 km",
    estimatedTime: "4 mins",
    rating: 4.8,
    phone: "+91-11-2692-5858",
    coordinates: { lat: 28.5355, lng: 77.291 },
    specialties: ["Cardiology", "Emergency", "Trauma"],
    status: "Open 24/7",
  },
  {
    id: 2,
    name: "Apollo Pharmacy",
    type: "pharmacy",
    address: "Nehru Place, New Delhi",
    distance: "0.8 km",
    estimatedTime: "3 mins",
    rating: 4.5,
    phone: "+91-11-2644-2200",
    coordinates: { lat: 28.5478, lng: 77.291 },
    medicines: ["Paracetamol", "Amoxicillin", "Cetirizine"],
    status: "Open until 11 PM",
  },
  {
    id: 3,
    name: "Max Super Speciality Hospital",
    type: "hospital",
    address: "Saket, New Delhi",
    distance: "2.1 km",
    estimatedTime: "7 mins",
    rating: 4.6,
    phone: "+91-11-2651-5050",
    coordinates: { lat: 28.5244, lng: 77.2066 },
    specialties: ["Neurology", "Orthopedic", "Emergency"],
    status: "Open 24/7",
  },
  {
    id: 4,
    name: "MedPlus Pharmacy",
    type: "pharmacy",
    address: "Lajpat Nagar, New Delhi",
    distance: "1.5 km",
    estimatedTime: "5 mins",
    rating: 4.3,
    phone: "+91-11-2984-4400",
    coordinates: { lat: 28.5677, lng: 77.243 },
    medicines: ["Metformin", "Insulin", "Blood pressure meds"],
    status: "Open until 10 PM",
  },
  {
    id: 5,
    name: "Fortis Hospital",
    type: "hospital",
    address: "Vasant Kunj, New Delhi",
    distance: "3.5 km",
    estimatedTime: "12 mins",
    rating: 4.7,
    phone: "+91-11-4277-6222",
    coordinates: { lat: 28.5167, lng: 77.15 },
    specialties: ["Emergency", "Cardiology", "Pediatrics"],
    status: "Open 24/7",
  },
]

const filterOptions = ["All", "Hospitals", "Pharmacies", "Open Now", "Emergency"]

export default function MapPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedFilter, setSelectedFilter] = useState("All")
  const [userLocation, setUserLocation] = useState<{ lat: number; lng: number } | null>(null)
  const [selectedLocation, setSelectedLocation] = useState<number | null>(null)

useEffect(() => {
    // Simulate getting user location
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setUserLocation({
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          })
        },
        (error) => {
          console.log("Location access denied")
          // Use default Delhi location
          setUserLocation({ lat: 28.5355, lng: 77.291 })
        },
      )
    }
  }, [])

const filteredLocations = nearbyLocations.filter((location) => {
    const matchesSearch =
      location.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      location.address.toLowerCase().includes(searchQuery.toLowerCase())

let matchesFilter = true
    if (selectedFilter === "Hospitals") matchesFilter = location.type === "hospital"
    else if (selectedFilter === "Pharmacies") matchesFilter = location.type === "pharmacy"
    else if (selectedFilter === "Open Now") matchesFilter = location.status.includes("Open")
    else if (selectedFilter === "Emergency") matchesFilter = location.type === "hospital"

return matchesSearch && matchesFilter
  })

const openGoogleMaps = (location: (typeof nearbyLocations)[0]) => {
    const url = `https://www.google.com/maps/dir/?api=1&destination=${location.coordinates.lat},${location.coordinates.lng}&travelmode=driving`
    window.open(url, "_blank")
  }

const getLocationIcon = (type: string) => {
    return type === "hospital" ? "🏥" : "💊"
  }

const getStatusColor = (status: string) => {
    if (status.includes("24/7")) return "bg-secondary text-secondary-foreground"
    if (status.includes("Open")) return "bg-secondary text-secondary-foreground"
    return "bg-yellow-100 text-yellow-800"
  }

{/* Search and Filter */}
          <div className="space-y-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
              <Input
                placeholder="Search hospitals, pharmacies..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 text-base h-12 bg-input border-border"
              />
            </div>

<div className="flex gap-2">
              <Select value={selectedFilter} onValueChange={setSelectedFilter}>
                <SelectTrigger className="flex-1 h-10 bg-input border-border">
                  <SelectValue placeholder="Filter" />
                </SelectTrigger>
                <SelectContent>
                  {filterOptions.map((option) => (
                    <SelectItem key={option} value={option}>
                      {option}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

{/* Map Placeholder */}
      <div className="bg-muted/30 h-48 relative">
        <img src="/placeholder-ocf87.png" alt="Interactive Google Maps" className="w-full h-full object-cover" />

<div className="absolute inset-0 bg-black/20 flex items-center justify-center">
          <div className="text-center text-white">
            <MapPin className="w-12 h-12 mx-auto mb-2" />
            <p className="text-sm font-medium">Interactive Google Maps</p>
            <p className="text-xs">Showing {filteredLocations.length} nearby locations</p>
          </div>
        </div>

{/* Location Markers Overlay */}
        <div className="absolute inset-0">
          {filteredLocations.slice(0, 3).map((location, index) => (
            <div
              key={location.id}
              className="absolute w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-bold cursor-pointer"
              style={{
                left: `${20 + index * 25}%`,
                top: `${30 + index * 15}%`,
              }}
              onClick={() => setSelectedLocation(location.id)}
            >
              {index + 1}
            </div>
          ))}
        </div>
      </div>

{/* Location List */}
      <main className="max-w-md mx-auto px-4 py-6 space-y-4">
        {filteredLocations.map((location, index) => (
          <Card key={location.id} className="hover:shadow-md transition-shadow">
            <CardContent className="p-4">
              <div className="space-y-3">
                {/* Location Info */}
                <div className="flex items-start gap-3">
                  <div className="text-2xl">{getLocationIcon(location.type)}</div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-card-foreground text-lg">{location.name}</h3>
                    <p className="text-sm text-muted-foreground">{location.address}</p>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground mt-1">
                      <div className="flex items-center gap-1">
                        <MapPin className="w-4 h-4" />
                        <span>{location.distance}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Clock className="w-4 h-4" />
                        <span>{location.estimatedTime}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                        <span>{location.rating}</span>
                      </div>
                    </div>
                  </div>
                </div>

{/* Status */}
                <div className="flex items-center justify-between">
                  <Badge className={getStatusColor(location.status)}>{location.status}</Badge>
                  <span className="text-sm font-medium text-card-foreground">#{index + 1}</span>
                </div>

{/* Specialties/Medicines */}
                {location.type === "hospital" && location.specialties && (
                  <div className="flex flex-wrap gap-1">
                    {location.specialties.map((specialty, idx) => (
                      <Badge key={idx} variant="outline" className="text-xs">
                        {specialty}
                      </Badge>
                    ))}
                  </div>
                )}

{location.type === "pharmacy" && location.medicines && (
                  <div>
                    <p className="text-sm font-medium text-card-foreground mb-1">Available medicines:</p>
                    <div className="flex flex-wrap gap-1">
                      {location.medicines.map((medicine, idx) => (
                        <Badge key={idx} variant="outline" className="text-xs">
                          {medicine}
                        </Badge>
                      ))}
                    </div>
                  </div>
                )}

{/* Action Buttons */}
                <div className="flex gap-2 pt-2">
                  <Button className="flex-1 h-10" onClick={() => openGoogleMaps(location)}>
                    <Navigation className="w-4 h-4 mr-2" />
                    Get Directions
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    className="px-3 bg-transparent"
                    onClick={() => window.open(`tel:${location.phone}`)}
                  >
                    <Phone className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}

{filteredLocations.length === 0 && (
          <Card>
            <CardContent className="p-8 text-center">
              <MapPin className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="font-semibold text-card-foreground mb-2">No locations found</h3>
              <p className="text-sm text-muted-foreground">Try adjusting your search or filter options</p>
            </CardContent>
          </Card>
        )}

{/* Location Services Info */}
        <Card className="bg-accent/10 border-accent/20">
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <Locate className="w-5 h-5 text-accent-foreground mt-0.5" />
              <div>
                <h4 className="font-medium text-accent-foreground mb-1">Live Location Tracking</h4>
                <p className="text-sm text-accent-foreground/80">
                  Real-time updates on traffic, wait times, and availability. Enable location services for the most
                  accurate results.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/map/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/prescription-scanner/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Camera, Upload, Check, AlertCircle, MapPin, ShoppingCart, Eye } from "lucide-react"
import Link from "next/link"

// Mock OCR results
const mockScanResults = [
  {
    id: 1,
    name: "Paracetamol 500mg",
    dosage: "1 tablet twice daily",
    duration: "5 days",
    quantity: "10 tablets",
    available: true,
    price: 45,
    nearbyPharmacies: 3,
  },
  {
    id: 2,
    name: "Amoxicillin 250mg",
    dosage: "1 capsule three times daily",
    duration: "7 days",
    quantity: "21 capsules",
    available: true,
    price: 120,
    nearbyPharmacies: 2,
  },
  {
    id: 3,
    name: "Cetirizine 10mg",
    dosage: "1 tablet once daily",
    duration: "3 days",
    quantity: "3 tablets",
    available: false,
    price: 35,
    nearbyPharmacies: 1,
  },
]

export default function PrescriptionScannerPage() {
  const [scanStep, setScanStep] = useState<"upload" | "scanning" | "results">("upload")
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const [scanResults, setScanResults] = useState(mockScanResults)
  const fileInputRef = useRef<HTMLInputElement>(null)

const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        setSelectedImage(e.target?.result as string)
        setScanStep("scanning")

// Simulate AI processing
        setTimeout(() => {
          setScanStep("results")
        }, 3000)
      }
      reader.readAsDataURL(file)
    }
  }

const handleCameraCapture = () => {
    // In a real app, this would open the camera
    fileInputRef.current?.click()
  }

const handleRetake = () => {
    setSelectedImage(null)
    setScanStep("upload")
    setScanResults(mockScanResults)
  }

const getAvailabilityStatus = (available: boolean, nearbyPharmacies: number) => {
    if (!available) return { text: "Out of Stock", color: "bg-destructive text-destructive-foreground" }
    if (nearbyPharmacies <= 1) return { text: "Limited Stock", color: "bg-yellow-100 text-yellow-800" }
    return { text: "Available", color: "bg-secondary text-secondary-foreground" }
  }

{/* Main Content */}
      <main className="max-w-md mx-auto px-4 py-6 space-y-6">
        {/* Upload Step */}
        {scanStep === "upload" && (
          <>
            <Card className="bg-accent/10 border-accent/20">
              <CardContent className="p-6 text-center">
                <Camera className="w-16 h-16 text-accent-foreground mx-auto mb-4" />
                <h2 className="text-xl font-bold text-accent-foreground mb-2">Scan Your Prescription</h2>
                <p className="text-sm text-accent-foreground/80 mb-6">
                  Our AI will instantly read your prescription and find all medicines with real-time availability
                </p>

<div className="space-y-3">
                  <Button onClick={handleCameraCapture} className="w-full h-12 text-base">
                    <Camera className="w-5 h-5 mr-2" />
                    Take Photo
                  </Button>

<Button
                    variant="outline"
                    onClick={() => fileInputRef.current?.click()}
                    className="w-full h-12 text-base"
                  >
                    <Upload className="w-5 h-5 mr-2" />
                    Upload from Gallery
                  </Button>
                </div>

{/* Tips */}
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-lg text-card-foreground">Scanning Tips</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm flex items-center justify-center font-bold">
                    1
                  </div>
                  <div>
                    <p className="font-medium text-card-foreground">Good Lighting</p>
                    <p className="text-sm text-muted-foreground">Ensure prescription is well-lit and clearly visible</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm flex items-center justify-center font-bold">
                    2
                  </div>
                  <div>
                    <p className="font-medium text-card-foreground">Flat Surface</p>
                    <p className="text-sm text-muted-foreground">
                      Place prescription on a flat, contrasting background
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground text-sm flex items-center justify-center font-bold">
                    3
                  </div>
                  <div>
                    <p className="font-medium text-card-foreground">Full Prescription</p>
                    <p className="text-sm text-muted-foreground">
                      Capture the entire prescription including doctor's signature
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </>
        )}

{/* Scanning Step */}
        {scanStep === "scanning" && (
          <Card>
            <CardContent className="p-8 text-center">
              {selectedImage && (
                <div className="mb-6">
                  <img
                    src={selectedImage || "/placeholder.svg"}
                    alt="Prescription"
                    className="w-full max-w-xs mx-auto rounded-lg border border-border"
                  />
                </div>
              )}

<div className="animate-spin w-12 h-12 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4"></div>
              <h3 className="text-xl font-bold text-card-foreground mb-2">AI is Reading Your Prescription</h3>
              <p className="text-sm text-muted-foreground mb-4">Analyzing text and identifying medicines...</p>

<div className="space-y-2 text-sm text-muted-foreground">
                <div className="flex items-center justify-center gap-2">
                  <Check className="w-4 h-4 text-secondary" />
                  <span>Text recognition complete</span>
                </div>
                <div className="flex items-center justify-center gap-2">
                  <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
                  <span>Identifying medicines...</span>
                </div>
                <div className="flex items-center justify-center gap-2 text-muted-foreground/50">
                  <div className="w-4 h-4 border-2 border-muted border-t-transparent rounded-full"></div>
                  <span>Checking availability...</span>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

{/* Results Step */}
        {scanStep === "results" && (
          <>
            <Card className="bg-secondary/10 border-secondary/20">
              <CardContent className="p-4">
                <div className="flex items-center gap-3 mb-3">
                  <Check className="w-6 h-6 text-secondary" />
                  <div>
                    <h3 className="font-bold text-secondary-foreground">Scan Complete!</h3>
                    <p className="text-sm text-secondary-foreground/80">Found {scanResults.length} medicines</p>
                  </div>
                </div>

{selectedImage && (
                  <div className="flex items-center gap-2">
                    <img
                      src={selectedImage || "/placeholder.svg"}
                      alt="Scanned prescription"
                      className="w-16 h-16 rounded border border-border object-cover"
                    />
                    <Button variant="outline" size="sm" onClick={handleRetake}>
                      <Camera className="w-4 h-4 mr-1" />
                      Retake
                    </Button>
                  </div>
                )}
              </CardContent>
            </Card>

{/* Medicine Results */}
            <div className="space-y-4">
              {scanResults.map((medicine) => {
                const status = getAvailabilityStatus(medicine.available, medicine.nearbyPharmacies)

return (
                  <Card key={medicine.id} className="border border-border">
                    <CardContent className="p-4">
                      <div className="space-y-3">
                        {/* Medicine Info */}
                        <div>
                          <h3 className="font-semibold text-card-foreground text-lg">{medicine.name}</h3>
                          <div className="text-sm text-muted-foreground space-y-1">
                            <p>
                              <span className="font-medium">Dosage:</span> {medicine.dosage}
                            </p>
                            <p>
                              <span className="font-medium">Duration:</span> {medicine.duration}
                            </p>
                            <p>
                              <span className="font-medium">Quantity:</span> {medicine.quantity}
                            </p>
                          </div>
                        </div>

{/* Price and Availability */}
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <span className="text-xl font-bold text-primary">₹{medicine.price}</span>
                            <Badge className={status.color}>{status.text}</Badge>
                          </div>
                          <div className="flex items-center gap-1 text-sm text-muted-foreground">
                            <MapPin className="w-4 h-4" />
                            <span>{medicine.nearbyPharmacies} stores</span>
                          </div>
                        </div>

{/* Action Buttons */}
                        <div className="flex gap-2 pt-2">
                          <Button className="flex-1 h-10" disabled={!medicine.available}>
                            <ShoppingCart className="w-4 h-4 mr-2" />
                            {medicine.available ? "Find & Order" : "Out of Stock"}
                          </Button>
                          <Link href={`/medicine?search=${encodeURIComponent(medicine.name)}`}>
                            <Button variant="outline" size="sm" className="px-3 bg-transparent">
                              <Eye className="w-4 h-4" />
                            </Button>
                          </Link>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                )
              })}
            </div>

{/* Summary Actions */}
            <Card className="bg-primary/5 border-primary/20">
              <CardContent className="p-4">
                <div className="text-center space-y-3">
                  <h4 className="font-bold text-primary">Complete Order</h4>
                  <p className="text-sm text-primary/80">Order all available medicines from the nearest pharmacy</p>
                  <div className="flex gap-2">
                    <Button className="flex-1">Order All Available</Button>
                    <Button variant="outline" className="flex-1 bg-transparent">
                      Save Prescription
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* AI Insights */}
            <Card className="bg-accent/10 border-accent/20">
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <AlertCircle className="w-5 h-5 text-accent-foreground mt-0.5" />
                  <div>
                    <h4 className="font-medium text-accent-foreground mb-1">AI Health Insights</h4>
                    <p className="text-sm text-accent-foreground/80">
                      This prescription contains antibiotics. Remember to complete the full course even if you feel
                      better. Cetirizine may cause drowsiness - avoid driving.
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/prescription-scanner/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/emergency/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Phone, MapPin, Clock, AlertTriangle, Navigation, Heart, Ambulance } from "lucide-react"
import Link from "next/link"

// Mock data for nearby hospitals
const nearbyHospitals = [
  {
    id: 1,
    name: "Apollo Hospital",
    distance: "1.2 km",
    estimatedTime: "4 mins",
    emergencyWaitTime: "8 mins",
    generalBeds: { available: 12, total: 45, occupied: 33 },
    icuBeds: { available: 3, total: 15, occupied: 12 },
    emergencyBeds: { available: 5, total: 8, occupied: 3 },
    phone: "+91-11-2692-5858",
    rating: 4.8,
    specialties: ["Cardiology", "Emergency", "Trauma"],
    address: "Sector 26, Noida",
    bookingAvailable: true,
  },
  {
    id: 2,
    name: "Max Super Speciality Hospital",
    distance: "2.1 km",
    estimatedTime: "7 mins",
    emergencyWaitTime: "15 mins",
    generalBeds: { available: 8, total: 60, occupied: 52 },
    icuBeds: { available: 1, total: 20, occupied: 19 },
    emergencyBeds: { available: 3, total: 10, occupied: 7 },
    phone: "+91-11-2651-5050",
    rating: 4.6,
    specialties: ["Neurology", "Orthopedic", "Emergency"],
    address: "Sector 19, Noida",
    bookingAvailable: true,
  },
  {
    id: 3,
    name: "Fortis Hospital",
    distance: "3.5 km",
    estimatedTime: "12 mins",
    emergencyWaitTime: "5 mins",
    generalBeds: { available: 15, total: 80, occupied: 65 },
    icuBeds: { available: 4, total: 25, occupied: 21 },
    emergencyBeds: { available: 7, total: 12, occupied: 5 },
    phone: "+91-11-4277-6222",
    rating: 4.7,
    specialties: ["Emergency", "Cardiology", "Pediatrics"],
    address: "Sector 62, Noida",
    bookingAvailable: true,
  },
  {
    id: 4,
    name: "Kailash Hospital",
    distance: "4.2 km",
    estimatedTime: "15 mins",
    emergencyWaitTime: "12 mins",
    generalBeds: { available: 22, total: 100, occupied: 78 },
    icuBeds: { available: 6, total: 30, occupied: 24 },
    emergencyBeds: { available: 4, total: 15, occupied: 11 },
    phone: "+91-11-4567-8900",
    rating: 4.5,
    specialties: ["General Medicine", "Surgery", "Emergency"],
    address: "Sector 27, Noida",
    bookingAvailable: true,
  },
]

const emergencyContacts = [
  { name: "Ambulance", number: "108", icon: Ambulance },
  { name: "Police", number: "100", icon: AlertTriangle },
  { name: "Fire", number: "101", icon: AlertTriangle },
  { name: "Medical Emergency", number: "102", icon: Heart },
]

export default function EmergencyPage() {
  const [isEmergencyActive, setIsEmergencyActive] = useState(false)
  const [countdown, setCountdown] = useState(10)
  const [selectedHospital, setSelectedHospital] = useState<number | null>(null)
  const [selectedBedType, setSelectedBedType] = useState<string>("")

useEffect(() => {
    let interval: NodeJS.Timeout
    if (isEmergencyActive && countdown > 0) {
      interval = setInterval(() => {
        setCountdown((prev) => prev - 1)
      }, 1000)
    }
    return () => clearInterval(interval)
  }, [isEmergencyActive, countdown])

const handleEmergencyCall = () => {
    setIsEmergencyActive(true)
    // In a real app, this would trigger location sharing and emergency contacts
  }

const getBedStatusColor = (available: number, total: number) => {
    const percentage = (available / total) * 100
    if (percentage === 0) return "bg-destructive text-destructive-foreground"
    if (percentage <= 20) return "bg-yellow-100 text-yellow-800"
    return "bg-secondary text-secondary-foreground"
  }

const handleBedBooking = (hospitalId: number, bedType: string) => {
    setSelectedHospital(hospitalId)
    setSelectedBedType(bedType)
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-destructive text-destructive-foreground px-4 py-4">
        <div className="max-w-md mx-auto">
          <div className="flex items-center gap-3 mb-4">
            <Link href="/">
              <Button
                variant="ghost"
                size="sm"
                className="p-2 text-destructive-foreground hover:bg-destructive-foreground/10"
              >
                <ArrowLeft className="w-5 h-5" />
              </Button>
            </Link>
            <div>
              <h1 className="text-xl font-bold">Emergency Assistance</h1>
              <p className="text-sm text-destructive-foreground/80">Immediate help & hospital bed booking</p>
            </div>
          </div>

{/* Emergency Alert */}
          {isEmergencyActive && (
            <Card className="bg-white text-destructive border-destructive">
              <CardContent className="p-4 text-center">
                <AlertTriangle className="w-8 h-8 mx-auto mb-2" />
                <h3 className="font-bold text-lg mb-1">Emergency Alert Sent!</h3>
                <p className="text-sm mb-2">Your location has been shared with emergency contacts</p>
                <div className="text-2xl font-bold">{countdown > 0 ? countdown : "Connecting..."}</div>
              </CardContent>
            </Card>
          )}
        </div>
      </header>

{/* Main Content */}
      <main className="max-w-md mx-auto px-4 py-6 space-y-6">
        {/* Emergency Call Button */}
        {!isEmergencyActive && (
          <Card className="bg-destructive text-destructive-foreground border-destructive">
            <CardContent className="p-6 text-center">
              <Button
                onClick={handleEmergencyCall}
                className="w-full bg-white text-destructive hover:bg-gray-100 h-16 text-xl font-bold mb-4"
                size="lg"
              >
                <Phone className="w-8 h-8 mr-3" />
                EMERGENCY CALL
              </Button>
              <p className="text-sm text-destructive-foreground/80">
                Instantly alerts emergency contacts & shares your location
              </p>
            </CardContent>
          </Card>
        )}

{/* Quick Emergency Numbers */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg text-card-foreground">Emergency Numbers</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {emergencyContacts.map((contact, index) => (
              <Button
                key={index}
                variant="outline"
                className="w-full h-12 justify-between bg-transparent"
                onClick={() => window.open(`tel:${contact.number}`)}
              >
                <div className="flex items-center gap-3">
                  <contact.icon className="w-5 h-5" />
                  <span>{contact.name}</span>
                </div>
                <span className="font-bold">{contact.number}</span>
              </Button>
            ))}
          </CardContent>
        </Card>

{/* Nearby Hospitals */}
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg text-card-foreground flex items-center gap-2">
              <Heart className="w-5 h-5 text-primary" />
              Nearby Hospitals & Bed Availability
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {nearbyHospitals.map((hospital) => (
              <Card key={hospital.id} className="border border-border">
                <CardContent className="p-4">
                  <div className="space-y-3">
                    {/* Hospital Info */}
                    <div>
                      <h3 className="font-semibold text-card-foreground text-lg">{hospital.name}</h3>
                      <div className="flex items-center gap-4 text-sm text-muted-foreground mt-1">
                        <div className="flex items-center gap-1">
                          <MapPin className="w-4 h-4" />
                          <span>{hospital.distance}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          <span>{hospital.estimatedTime}</span>
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground mt-1">{hospital.address}</p>
                    </div>

{/* Emergency Wait Time */}
                    <div className="bg-accent/10 rounded-lg p-3">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-accent-foreground">Emergency Wait Time</span>
                        <Badge className="bg-primary text-primary-foreground">{hospital.emergencyWaitTime}</Badge>
                      </div>
                    </div>

<div className="space-y-3">
                      <h4 className="text-sm font-medium text-card-foreground">Bed Availability & Booking</h4>

{/* General Beds */}
                      <div className="bg-muted/30 rounded-lg p-3">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm font-medium">General Ward</span>
                          <Badge
                            className={getBedStatusColor(hospital.generalBeds.available, hospital.generalBeds.total)}
                          >
                            {hospital.generalBeds.available} available
                          </Badge>
                        </div>
                        <div className="flex items-center justify-between text-xs text-muted-foreground mb-2">
                          <span>Available: {hospital.generalBeds.available}</span>
                          <span>Occupied: {hospital.generalBeds.occupied}</span>
                          <span>Total: {hospital.generalBeds.total}</span>
                        </div>
                        <Button
                          size="sm"
                          className="w-full h-8 text-xs"
                          disabled={hospital.generalBeds.available === 0}
                          onClick={() => handleBedBooking(hospital.id, "general")}
                        >
                          {hospital.generalBeds.available > 0 ? "Book General Bed" : "No Beds Available"}
                        </Button>
                      </div>

{/* ICU Beds */}
                      <div className="bg-muted/30 rounded-lg p-3">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm font-medium">ICU</span>
                          <Badge className={getBedStatusColor(hospital.icuBeds.available, hospital.icuBeds.total)}>
                            {hospital.icuBeds.available} available
                          </Badge>
                        </div>
                        <div className="flex items-center justify-between text-xs text-muted-foreground mb-2">
                          <span>Available: {hospital.icuBeds.available}</span>
                          <span>Occupied: {hospital.icuBeds.occupied}</span>
                          <span>Total: {hospital.icuBeds.total}</span>
                        </div>
                        <Button
                          size="sm"
                          className="w-full h-8 text-xs"
                          disabled={hospital.icuBeds.available === 0}
                          onClick={() => handleBedBooking(hospital.id, "icu")}
                        >
                          {hospital.icuBeds.available > 0 ? "Book ICU Bed" : "No ICU Beds Available"}
                        </Button>
                      </div>

{/* Emergency Beds */}
                      <div className="bg-muted/30 rounded-lg p-3">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm font-medium">Emergency</span>
                          <Badge
                            className={getBedStatusColor(
                              hospital.emergencyBeds.available,
                              hospital.emergencyBeds.total,
                            )}
                          >
                            {hospital.emergencyBeds.available} available
                          </Badge>
                        </div>
                        <div className="flex items-center justify-between text-xs text-muted-foreground mb-2">
                          <span>Available: {hospital.emergencyBeds.available}</span>
                          <span>Occupied: {hospital.emergencyBeds.occupied}</span>
                          <span>Total: {hospital.emergencyBeds.total}</span>
                        </div>
                        <Button
                          size="sm"
                          className="w-full h-8 text-xs"
                          disabled={hospital.emergencyBeds.available === 0}
                          onClick={() => handleBedBooking(hospital.id, "emergency")}
                        >
                          {hospital.emergencyBeds.available > 0 ? "Book Emergency Bed" : "No Emergency Beds"}
                        </Button>
                      </div>
                    </div>

{/* Specialties */}
                    <div className="flex flex-wrap gap-1">
                      {hospital.specialties.map((specialty, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {specialty}
                        </Badge>
                      ))}
                    </div>

{/* Action Buttons */}
                    <div className="flex gap-2 pt-2">
                      <Button className="flex-1 h-10" onClick={() => window.open(`tel:${hospital.phone}`)}>
                        <Phone className="w-4 h-4 mr-2" />
                        Call Hospital
                      </Button>
                      <Button variant="outline" size="sm" className="px-3 bg-transparent">
                        <Navigation className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </CardContent>
        </Card>

{/* AI Emergency Insights */}
        <Card className="bg-primary/5 border-primary/20">
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <Heart className="w-5 h-5 text-primary mt-0.5" />
              <div>
                <h4 className="font-medium text-primary mb-1">AI Emergency Insights</h4>
                <p className="text-sm text-primary/80">
                  Fortis Hospital has the most available beds (26 total) and shortest emergency wait time (5 mins).
                  Kailash Hospital has the highest general bed availability (22 beds).
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </main>

{selectedHospital && (
        <div className="fixed inset-0 bg-black/50 flex items-end z-50">
          <div className="bg-card w-full max-w-md mx-auto rounded-t-xl p-6 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold text-card-foreground">Book Hospital Bed</h3>
              <Button variant="ghost" size="sm" onClick={() => setSelectedHospital(null)} className="p-2">
                ×
              </Button>
            </div>

{(() => {
              const hospital = nearbyHospitals.find((h) => h.id === selectedHospital)
              if (!hospital) return null

return (
                <div className="space-y-4">
                  <div className="bg-muted/50 rounded-lg p-4">
                    <h4 className="font-medium text-card-foreground">{hospital.name}</h4>
                    <p className="text-sm text-muted-foreground">{hospital.address}</p>
                    <p className="text-sm text-muted-foreground">
                      {hospital.distance} • {hospital.estimatedTime}
                    </p>
                  </div>

<div className="space-y-3">
                    <h4 className="font-medium text-card-foreground">Bed Type: {selectedBedType.toUpperCase()}</h4>

<div className="bg-accent/10 rounded-lg p-3">
                      <div className="text-sm">
                        <div className="flex justify-between mb-1">
                          <span>Available Beds:</span>
                          <span className="font-medium">
                            {selectedBedType === "general" && hospital.generalBeds.available}
                            {selectedBedType === "icu" && hospital.icuBeds.available}
                            {selectedBedType === "emergency" && hospital.emergencyBeds.available}
                          </span>
                        </div>
                        <div className="flex justify-between mb-1">
                          <span>Estimated Cost:</span>
                          <span className="font-medium">
                            {selectedBedType === "general" && "₹2,500/day"}
                            {selectedBedType === "icu" && "₹8,500/day"}
                            {selectedBedType === "emergency" && "₹1,500/day"}
                          </span>
                        </div>
                        <div className="flex justify-between">
                          <span>Advance Payment:</span>
                          <span className="font-medium">
                            {selectedBedType === "general" && "₹5,000"}
                            {selectedBedType === "icu" && "₹15,000"}
                            {selectedBedType === "emergency" && "₹3,000"}
                          </span>
                        </div>
                      </div>
                    </div>

<div className="space-y-2">
                      <Button className="w-full h-12 text-base">Confirm Bed Booking</Button>
                      <Button
                        variant="outline"
                        className="w-full h-10 bg-transparent"
                        onClick={() => window.open(`tel:${hospital.phone}`)}
                      >
                        Call Hospital First
                      </Button>
                    </div>

<p className="text-xs text-center text-muted-foreground">
                      Booking confirmation will be sent via SMS. Hospital will hold the bed for 2 hours.
                    </p>
                  </div>
                </div>
              )
            })()}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]png:file="public/placeholder-ocf87.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-p5uee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Calendar,
  Pill,
  Phone,
  MapPin,
  Clock,
  Heart,
  Search,
  Camera,
  MessageCircle,
  Navigation,
  Building2,
  CreditCard,
  Bell,
  Star,
  Users,
  User,
  Mail,
  Lock,
  MessageSquare,
  X,
  AlertCircle,
  CheckCircle,
  FileText,
  TestTube,
  Video,
  Bot,
  Folder,
} from "lucide-react"

export default function MediCheckHome() {
  const [searchQuery, setSearchQuery] = useState("")
  const [showOPBooking, setShowOPBooking] = useState(false)
  const [selectedHospital, setSelectedHospital] = useState(null)
  const [selectedDate, setSelectedDate] = useState("")
  const [selectedTime, setSelectedTime] = useState("")
  const [showPayment, setShowPayment] = useState(false)
  const [hospitalSearch, setHospitalSearch] = useState("")
  const [showSearchResults, setShowSearchResults] = useState(false)
  const [showLogin, setShowLogin] = useState(false)
  const [isLogin, setIsLogin] = useState(true)
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [showProfile, setShowProfile] = useState(false)
  const [loginData, setLoginData] = useState({ email: "", password: "", name: "" })
  const [showSuccessModal, setShowSuccessModal] = useState(false)
  const [successMessage, setSuccessMessage] = useState("")

useEffect(() => {
    const savedLoginStatus = localStorage.getItem("medicheck_logged_in")
    if (savedLoginStatus === "true") {
      setIsLoggedIn(true)
    }
  }, [])

const userProfile = {
    name: "Nandha",
    gender: "Male",
    age: 20,
    email: "nandha@example.com",
    phone: "+91 98765 43214",
    location: "Chennai, Tamil Nadu",
  }

const handleButtonClick = (action) => {
    if (!isLoggedIn) {
      setShowLogin(true)
      return
    }
    action()
  }

const handleAuth = () => {
    if (isLogin) {
      if (loginData.email && loginData.password) {
        setIsLoggedIn(true)
        localStorage.setItem("medicheck_logged_in", "true")
        setShowLogin(false)
        setSuccessMessage("Welcome back! Login successful.")
        setShowSuccessModal(true)
        setTimeout(() => setShowSuccessModal(false), 3000)
      }
    } else {
      if (loginData.name && loginData.email && loginData.password) {
        setIsLoggedIn(true)
        localStorage.setItem("medicheck_logged_in", "true")
        setShowLogin(false)
        setSuccessMessage("Account created successfully! Welcome to MediCheck.")
        setShowSuccessModal(true)
        setTimeout(() => setShowSuccessModal(false), 3000)
      }
    }
  }

const searchData = {
    doctors: [
      { id: 1, name: "Dr. Priya Sharma", specialty: "Cardiologist", hospital: "Apollo Hospital", type: "doctor" },
      { id: 2, name: "Dr. Rajesh Kumar", specialty: "General Physician", hospital: "Max Healthcare", type: "doctor" },
      { id: 3, name: "Dr. Anita Patel", specialty: "Pediatrician", hospital: "Fortis Hospital", type: "doctor" },
      { id: 4, name: "Dr. Suresh Reddy", specialty: "Orthopedic", hospital: "MIOT Hospital", type: "doctor" },
    ],
    medicines: [
      { id: 1, name: "Paracetamol", category: "Pain Relief", type: "medicine" },
      { id: 2, name: "Amoxicillin", category: "Antibiotic", type: "medicine" },
      { id: 3, name: "Omeprazole", category: "Gastric", type: "medicine" },
      { id: 4, name: "Metformin", category: "Diabetes", type: "medicine" },
    ],
    hospitals: [
      { id: 1, name: "Apollo Hospital", location: "Greams Road, Chennai", type: "hospital" },
      { id: 2, name: "Fortis Hospital", location: "Vadapalani, Chennai", type: "hospital" },
      { id: 3, name: "Max Healthcare", location: "Saket, Delhi", type: "hospital" },
      { id: 4, name: "MIOT Hospital", location: "Manapakkam, Chennai", type: "hospital" },
    ],
  }

const getSearchResults = () => {
    if (!searchQuery.trim()) return []

const query = searchQuery.toLowerCase()
    const results = []

searchData.doctors.forEach((doctor) => {
      if (
        doctor.name.toLowerCase().includes(query) ||
        doctor.specialty.toLowerCase().includes(query) ||
        doctor.hospital.toLowerCase().includes(query)
      ) {
        results.push(doctor)
      }
    })

searchData.medicines.forEach((medicine) => {
      if (medicine.name.toLowerCase().includes(query) || medicine.category.toLowerCase().includes(query)) {
        results.push(medicine)
      }
    })

searchData.hospitals.forEach((hospital) => {
      if (hospital.name.toLowerCase().includes(query) || hospital.location.toLowerCase().includes(query)) {
        results.push(hospital)
      }
    })

return results
  }

const searchResults = getSearchResults()

const nearbyHospitals = [
    {
      id: 1,
      name: "Apollo Hospital",
      distance: "0.8 km",
      rating: 4.8,
      waitTime: "15 mins",
      queueCount: 12,
      address: "Greams Road, Chennai",
      specialties: ["Cardiology", "Neurology", "Orthopedics"],
      opFee: 500,
    },
    {
      id: 2,
      name: "Fortis Hospital",
      distance: "1.2 km",
      rating: 4.6,
      waitTime: "25 mins",
      queueCount: 18,
      address: "Vadapalani, Chennai",
      specialties: ["General Medicine", "Pediatrics", "Gynecology"],
      opFee: 400,
    },
    {
      id: 3,
      name: "MIOT Hospital",
      distance: "2.1 km",
      rating: 4.7,
      waitTime: "20 mins",
      queueCount: 15,
      address: "Manapakkam, Chennai",
      specialties: ["Oncology", "Gastroenterology", "Urology"],
      opFee: 600,
    },
  ]

const timeSlots = [
    "09:00 AM",
    "09:30 AM",
    "10:00 AM",
    "10:30 AM",
    "11:00 AM",
    "11:30 AM",
    "02:00 PM",
    "02:30 PM",
    "03:00 PM",
    "03:30 PM",
    "04:00 PM",
    "04:30 PM",
  ]

const filteredHospitals = nearbyHospitals.filter(
    (hospital) =>
      hospital.name.toLowerCase().includes(hospitalSearch.toLowerCase()) ||
      hospital.specialties.some((specialty) => specialty.toLowerCase().includes(hospitalSearch.toLowerCase())),
  )

const handleBookingConfirmation = () => {
    setSuccessMessage(
      `Booking confirmed! You will receive a notification 10 minutes before your appointment at ${selectedTime}. Estimated wait time: ${selectedHospital.waitTime}`,
    )
    setShowSuccessModal(true)
    setTimeout(() => setShowSuccessModal(false), 4000)
    setShowOPBooking(false)
    setSelectedHospital(null)
    setSelectedDate("")
    setSelectedTime("")
    setShowPayment(false)
  }

if (showOPBooking) {
    return (
      <div className="min-h-screen bg-background">
        <header className="bg-card border-b border-border px-4 py-4">
          <div className="max-w-md mx-auto flex items-center gap-3">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                if (showPayment) {
                  setShowPayment(false)
                } else if (selectedHospital) {
                  setSelectedHospital(null)
                  setSelectedDate("")
                  setSelectedTime("")
                } else {
                  setShowOPBooking(false)
                }
              }}
            >
              ← Back
            </Button>
            <h1 className="text-xl font-bold text-primary">OP Booking</h1>
          </div>
        </header>

<main className="max-w-md mx-auto px-4 py-6">
          {!selectedHospital ? (
            <div className="space-y-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                <Input
                  placeholder="Search hospitals or specialties..."
                  value={hospitalSearch}
                  onChange={(e) => setHospitalSearch(e.target.value)}
                  className="pl-10 text-base h-12"
                />
              </div>

<div className="space-y-3">
                <h2 className="text-lg font-semibold text-card-foreground">Nearby Hospitals</h2>
                {filteredHospitals.map((hospital) => (
                  <Card
                    key={hospital.id}
                    className="cursor-pointer hover:shadow-md transition-shadow"
                    onClick={() => setSelectedHospital(hospital)}
                  >
                    <CardContent className="p-4">
                      <div className="flex justify-between items-start mb-2">
                        <div>
                          <h3 className="font-semibold text-card-foreground">{hospital.name}</h3>
                          <p className="text-sm text-muted-foreground">{hospital.address}</p>
                        </div>
                        <Badge variant="outline" className="text-xs">
                          {hospital.distance}
                        </Badge>
                      </div>

<div className="flex items-center gap-4 mb-3">
                        <div className="flex items-center gap-1">
                          <Star className="w-4 h-4 text-yellow-500 fill-current" />
                          <span className="text-sm font-medium">{hospital.rating}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Clock className="w-4 h-4 text-primary" />
                          <span className="text-sm">Wait: {hospital.waitTime}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Users className="w-4 h-4 text-secondary-foreground" />
                          <span className="text-sm">{hospital.queueCount} in queue</span>
                        </div>
                      </div>

<div className="flex flex-wrap gap-1 mb-2">
                        {hospital.specialties.slice(0, 2).map((specialty) => (
                          <Badge key={specialty} variant="secondary" className="text-xs">
                            {specialty}
                          </Badge>
                        ))}
                        {hospital.specialties.length > 2 && (
                          <Badge variant="secondary" className="text-xs">
                            +{hospital.specialties.length - 2} more
                          </Badge>
                        )}
                      </div>

<div className="flex justify-between items-center">
                        <span className="text-sm font-medium text-primary">OP Fee: ₹{hospital.opFee}</span>
                        <Button size="sm">Select Hospital</Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          ) : !showPayment ? (
            <div className="space-y-6">
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg">Selected Hospital</CardTitle>
                </CardHeader>
                <CardContent>
                  <h3 className="font-semibold text-card-foreground">{selectedHospital.name}</h3>
                  <p className="text-sm text-muted-foreground">{selectedHospital.address}</p>
                  <div className="flex items-center gap-4 mt-2">
                    <Badge variant="outline">Wait: {selectedHospital.waitTime}</Badge>
                    <Badge variant="outline">Fee: ₹{selectedHospital.opFee}</Badge>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg">Select Date</CardTitle>
                </CardHeader>
                <CardContent>
                  <Input
                    type="date"
                    value={selectedDate}
                    onChange={(e) => setSelectedDate(e.target.value)}
                    min={new Date().toISOString().split("T")[0]}
                    className="text-base h-12"
                  />
                </CardContent>
              </Card>

{selectedDate && (
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-lg">Available Time Slots</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-3 gap-2">
                      {timeSlots.map((time) => (
                        <Button
                          key={time}
                          variant={selectedTime === time ? "default" : "outline"}
                          size="sm"
                          onClick={() => setSelectedTime(time)}
                          className="text-sm"
                        >
                          {time}
                        </Button>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              )}

{selectedTime && (
                <Card className="bg-primary/5 border-primary/20">
                  <CardContent className="p-4">
                    <div className="flex items-center gap-2 mb-2">
                      <Bell className="w-5 h-5 text-primary" />
                      <h4 className="font-semibold text-primary">AI Estimation</h4>
                    </div>
                    <p className="text-sm text-card-foreground mb-2">
                      Based on current queue ({selectedHospital.queueCount} patients) and historical data:
                    </p>
                    <ul className="text-sm text-muted-foreground space-y-1">
                      <li>• Estimated wait time: {selectedHospital.waitTime}</li>
                      <li>• You'll receive a notification 10 minutes before your turn</li>
                      <li>• Appointment duration: ~15-20 minutes</li>
                    </ul>
                  </CardContent>
                </Card>
              )}

{selectedDate && selectedTime && (
                <Button className="w-full h-12 text-base" onClick={() => setShowPayment(true)}>
                  <CreditCard className="w-5 h-5 mr-2" />
                  Proceed to Payment
                </Button>
              )}
            </div>
          ) : (
            <div className="space-y-6">
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg">Booking Summary</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Hospital:</span>
                    <span className="text-sm font-medium">{selectedHospital.name}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Date:</span>
                    <span className="text-sm font-medium">{selectedDate}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Time:</span>
                    <span className="text-sm font-medium">{selectedTime}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Estimated Wait:</span>
                    <span className="text-sm font-medium">{selectedHospital.waitTime}</span>
                  </div>
                  <hr />
                  <div className="flex justify-between">
                    <span className="font-medium">Total Amount:</span>
                    <span className="font-bold text-primary">₹{selectedHospital.opFee}</span>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg">Payment Options</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button variant="outline" className="w-full justify-start h-12 bg-transparent">
                    <CreditCard className="w-5 h-5 mr-3" />
                    Credit/Debit Card
                  </Button>
                  <Button variant="outline" className="w-full justify-start h-12 bg-transparent">
                    <Phone className="w-5 h-5 mr-3" />
                    UPI Payment
                  </Button>
                  <Button variant="outline" className="w-full justify-start h-12 bg-transparent">
                    <Building2 className="w-5 h-5 mr-3" />
                    Net Banking
                  </Button>
                </CardContent>
              </Card>

<Button className="w-full h-12 text-base" onClick={handleBookingConfirmation}>
                Confirm Booking & Pay ₹{selectedHospital.opFee}
              </Button>
            </div>
          )}
        </main>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-card border-b border-border px-4 py-6">
        <div className="max-w-md mx-auto">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h1 className="text-2xl font-bold text-primary">MediCheck</h1>
              <p className="text-sm text-muted-foreground">Your Healthcare Assistant</p>
            </div>
            <div className="flex items-center gap-2">
              {isLoggedIn ? (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setShowProfile(true)}
                  className="flex items-center gap-2"
                >
                  <User className="w-4 h-4" />
                  <span className="text-sm">{userProfile.name}</span>
                </Button>
              ) : (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setShowLogin(true)}
                  className="flex items-center gap-2"
                >
                  <User className="w-4 h-4" />
                  <span className="text-sm">Login</span>
                </Button>
              )}
              <Badge variant="secondary" className="bg-secondary text-secondary-foreground">
                <Heart className="w-3 h-3 mr-1" />
                Online
              </Badge>
            </div>
          </div>

{/* Search Bar */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
            <Input
              placeholder="Search doctors, medicines, or hospitals..."
              value={searchQuery}
              onChange={(e) => {
                setSearchQuery(e.target.value)
                setShowSearchResults(e.target.value.trim().length > 0)
              }}
              className="pl-10 text-base h-12 bg-input border-border"
            />

{showSearchResults && searchResults.length > 0 && (
              <div className="absolute top-full left-0 right-0 bg-card border border-border rounded-md mt-1 shadow-lg z-50 max-h-60 overflow-y-auto">
                {searchResults.map((result) => (
                  <div
                    key={`${result.type}-${result.id}`}
                    className="p-3 hover:bg-muted cursor-pointer border-b border-border last:border-b-0"
                    onClick={() => {
                      if (result.type === "doctor") {
                        handleButtonClick(() => (window.location.href = "/booking"))
                      } else if (result.type === "medicine") {
                        handleButtonClick(() => (window.location.href = "/medicine"))
                      } else if (result.type === "hospital") {
                        handleButtonClick(() => setShowOPBooking(true))
                      }
                      setShowSearchResults(false)
                      setSearchQuery("")
                    }}
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                        {result.type === "doctor" && <Calendar className="w-4 h-4 text-primary" />}
                        {result.type === "medicine" && <Pill className="w-4 h-4 text-secondary-foreground" />}
                        {result.type === "hospital" && <Building2 className="w-4 h-4 text-accent-foreground" />}
                      </div>
                      <div className="flex-1">
                        <p className="font-medium text-card-foreground">{result.name}</p>
                        <p className="text-sm text-muted-foreground">
                          {result.type === "doctor" && `${result.specialty} • ${result.hospital}`}
                          {result.type === "medicine" && result.category}
                          {result.type === "hospital" && result.location}
                        </p>
                      </div>
                      <Badge variant="outline" className="text-xs capitalize">
                        {result.type}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            )}

{showSearchResults && searchQuery.trim() && searchResults.length === 0 && (
              <div className="absolute top-full left-0 right-0 bg-card border border-border rounded-md mt-1 shadow-lg z-50 p-4 text-center">
                <p className="text-sm text-muted-foreground">No results found for "{searchQuery}"</p>
              </div>
            )}
          </div>
        </div>
      </header>

{showSearchResults && <div className="fixed inset-0 z-40" onClick={() => setShowSearchResults(false)} />}

{/* Main Content */}
      <main className="max-w-md mx-auto px-4 py-6 space-y-6 pb-32">
        {/* Emergency Button */}
        <Card className="bg-destructive text-destructive-foreground border-destructive">
          <CardContent className="p-4">
            <Button
              className="w-full bg-white text-destructive hover:bg-gray-100 h-14 text-lg font-semibold"
              size="lg"
              onClick={() => handleButtonClick(() => (window.location.href = "/emergency"))}
            >
              <Phone className="w-6 h-6 mr-3" />
              Emergency - Call Now
            </Button>
            <p className="text-center text-sm mt-2 text-destructive-foreground/80">
              Instant access to nearby hospitals & ambulances
            </p>
          </CardContent>
        </Card>

{/* OP Booking as primary feature */}
        <Card className="bg-primary/5 border-primary/20">
          <CardContent className="p-4">
            <Button
              className="w-full h-14 text-lg font-semibold"
              onClick={() => handleButtonClick(() => setShowOPBooking(true))}
            >
              <Building2 className="w-6 h-6 mr-3" />
              Book OP Appointment
            </Button>
            <p className="text-center text-sm mt-2 text-muted-foreground">
              AI-powered scheduling with real-time wait times
            </p>
          </CardContent>
        </Card>

{/* Quick Actions */}
        <div className="grid grid-cols-2 gap-4">
          <Card
            className="bg-primary/5 hover:bg-primary/10 transition-colors cursor-pointer border-primary/20"
            onClick={() => handleButtonClick(() => setShowOPBooking(true))}
          >
            <CardContent className="p-4 text-center">
              <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-2">
                <Calendar className="w-6 h-6 text-primary" />
              </div>
              <h3 className="font-semibold text-card-foreground">OP Booking</h3>
              <p className="text-xs text-muted-foreground">Book hospital slots</p>
            </CardContent>
          </Card>
          <Card
            className="bg-secondary/5 hover:bg-secondary/10 transition-colors cursor-pointer border-secondary/20"
            onClick={() => handleButtonClick(() => (window.location.href = "/booking"))}
          >
            <CardContent className="p-4 text-center">
              <div className="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mx-auto mb-2">
                <User className="w-6 h-6 text-secondary-foreground" />
              </div>
              <h3 className="font-semibold text-card-foreground">Find Doctor</h3>
              <p className="text-xs text-muted-foreground">By specialty</p>
            </CardContent>
          </Card>
          <Card
            className="bg-accent/5 hover:bg-accent/10 transition-colors cursor-pointer border-accent/20"
            onClick={() => handleButtonClick(() => (window.location.href = "/medicine"))}
          >
            <CardContent className="p-4 text-center">
              <div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-2">
                <Pill className="w-6 h-6 text-accent-foreground" />
              </div>
              <h3 className="font-semibold text-card-foreground">Medicine</h3>
              <p className="text-xs text-muted-foreground">Order & track</p>
            </CardContent>
          </Card>
          <Card
            className="bg-destructive/5 hover:bg-destructive/10 transition-colors cursor-pointer border-destructive/20"
            onClick={() => handleButtonClick(() => (window.location.href = "/emergency"))}
          >
            <CardContent className="p-4 text-center">
              <div className="w-12 h-12 bg-destructive/10 rounded-full flex items-center justify-center mx-auto mb-2">
                <AlertCircle className="w-6 h-6 text-destructive" />
              </div>
              <h3 className="font-semibold text-card-foreground">Emergency</h3>
              <p className="text-xs text-muted-foreground">Get help now</p>
            </CardContent>
          </Card>
        </div>

<div className="space-y-3">
          <h3 className="text-lg font-semibold text-card-foreground px-1">Healthcare Services</h3>

<Card
            className="hover:shadow-md transition-shadow cursor-pointer border-purple-200 bg-purple-50/50"
            onClick={() => handleButtonClick(() => (window.location.href = "/consultation"))}
          >
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                  <Video className="w-5 h-5 text-purple-600" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-card-foreground">Video Consultation</h4>
                  <p className="text-sm text-muted-foreground">Consult doctors online from home</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card
            className="hover:shadow-md transition-shadow cursor-pointer border-green-200 bg-green-50/50"
            onClick={() => handleButtonClick(() => (window.location.href = "/lab-tests"))}
          >
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                  <TestTube className="w-5 h-5 text-green-600" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-card-foreground">Lab Tests</h4>
                  <p className="text-sm text-muted-foreground">Book blood tests & health checkups</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card
            className="hover:shadow-md transition-shadow cursor-pointer border-blue-200 bg-blue-50/50"
            onClick={() => handleButtonClick(() => (window.location.href = "/prescriptions"))}
          >
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                  <FileText className="w-5 h-5 text-blue-600" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-card-foreground">My Prescriptions</h4>
                  <p className="text-sm text-muted-foreground">View & manage e-prescriptions</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card
            className="hover:shadow-md transition-shadow cursor-pointer border-teal-200 bg-teal-50/50"
            onClick={() => handleButtonClick(() => (window.location.href = "/health-vault"))}
          >
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center">
                  <Folder className="w-5 h-5 text-teal-600" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-card-foreground">Health Vault</h4>
                  <p className="text-sm text-muted-foreground">Store all your medical records securely</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card
            className="hover:shadow-md transition-shadow cursor-pointer border-pink-200 bg-gradient-to-r from-purple-50 to-pink-50"
            onClick={() => handleButtonClick(() => (window.location.href = "/ai-assistant"))}
          >
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
                  <Bot className="w-5 h-5 text-white" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-card-foreground">AI Health Assistant</h4>
                  <p className="text-sm text-muted-foreground">Symptom checker & health tips</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Additional Features */}
        <div className="space-y-3">
          <h3 className="text-lg font-semibold text-card-foreground px-1">Quick Tools</h3>

<Card
            className="hover:shadow-md transition-shadow cursor-pointer"
            onClick={() => handleButtonClick(() => (window.location.href = "/prescription-scanner"))}
          >
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-accent/20 rounded-full flex items-center justify-center">
                  <Camera className="w-5 h-5 text-accent-foreground" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-card-foreground">Scan Prescription</h4>
                  <p className="text-sm text-muted-foreground">AI reads & finds medicines instantly</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card
            className="hover:shadow-md transition-shadow cursor-pointer"
            onClick={() => handleButtonClick(() => (window.location.href = "/whatsapp"))}
          >
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-[#25D366]/10 rounded-full flex items-center justify-center">
                  <MessageCircle className="w-5 h-5 text-[#25D366]" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-card-foreground">WhatsApp Booking</h4>
                  <p className="text-sm text-muted-foreground">Send "0001" to book appointments</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card
            className="hover:shadow-md transition-shadow cursor-pointer"
            onClick={() => handleButtonClick(() => (window.location.href = "/map"))}
          >
            <CardContent className="p-4">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 bg-secondary/20 rounded-full flex items-center justify-center">
                  <Navigation className="w-5 h-5 text-secondary-foreground" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-card-foreground">Track & Navigate</h4>
                  <p className="text-sm text-muted-foreground">Live location of doctors & pharmacies</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Status Indicators */}
        <Card className="bg-card">
          <CardHeader className="pb-3">
            <CardTitle className="text-lg text-card-foreground">Live Status</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-sm text-card-foreground">Nearby Hospitals</span>
              <Badge variant="secondary" className="bg-secondary text-secondary-foreground">
                12 Available
              </Badge>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-card-foreground">Pharmacies Open</span>
              <Badge variant="secondary" className="bg-secondary text-secondary-foreground">
                8 Open Now
              </Badge>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-card-foreground">Emergency Response</span>
              <Badge variant="secondary" className="bg-secondary text-secondary-foreground">
                <Heart className="w-3 h-3 mr-1" />
                Active
              </Badge>
            </div>
          </CardContent>
        </Card>
      </main>

<footer className="bg-card border-t border-border mt-8">
        <div className="max-w-md mx-auto px-4 py-6 space-y-4">
          <div className="text-center">
            <h3 className="font-semibold text-card-foreground mb-2">We'd love your feedback!</h3>
            <Button variant="outline" className="mb-4 bg-transparent">
              <MessageSquare className="w-4 h-4 mr-2" />
              Share Feedback
            </Button>
          </div>

<div className="border-t border-border pt-4 text-center space-y-2">
            <p className="text-sm font-medium text-card-foreground">Founded by</p>
            <p className="text-lg font-bold text-primary">Devakinandhan</p>
            <div className="space-y-1">
              <div className="flex items-center justify-center gap-2">
                <Mail className="w-4 h-4 text-muted-foreground" />
                <a
                  href="mailto:devakinandhansanagapati@gmail.com"
                  className="text-sm text-muted-foreground hover:text-primary"
                >
                  devakinandhansanagapati@gmail.com
                </a>
              </div>
              <div className="flex items-center justify-center gap-2">
                <Phone className="w-4 h-4 text-muted-foreground" />
                <a href="tel:+919876543215" className="text-sm text-muted-foreground hover:text-primary">
                  +91 98765 43215
                </a>
              </div>
            </div>
            <p className="text-xs text-muted-foreground mt-4">© 2024 MediCheck. Revolutionizing healthcare in India.</p>
          </div>
        </div>
      </footer>

{/* Bottom Navigation */}
      <nav className="fixed bottom-0 left-0 right-0 bg-card border-t border-border">
        <div className="max-w-md mx-auto px-4 py-2">
          <div className="flex items-center justify-around">
            <Button
              variant="ghost"
              size="sm"
              className="flex-col gap-1 h-auto py-2"
              onClick={() => handleButtonClick(() => (window.location.href = "/booking"))}
            >
              <Calendar className="w-5 h-5" />
              <span className="text-xs">Book</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="flex-col gap-1 h-auto py-2"
              onClick={() => handleButtonClick(() => (window.location.href = "/medicine"))}
            >
              <Pill className="w-5 h-5" />
              <span className="text-xs">Medicine</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="flex-col gap-1 h-auto py-2"
              onClick={() => handleButtonClick(() => (window.location.href = "/map"))}
            >
              <MapPin className="w-5 h-5" />
              <span className="text-xs">Map</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="flex-col gap-1 h-auto py-2"
              onClick={() => handleButtonClick(() => (window.location.href = "/emergency"))}
            >
              <Phone className="w-5 h-5" />
              <span className="text-xs">Emergency</span>
            </Button>
          </div>
        </div>
      </nav>

{/* Login Modal */}
      {showLogin && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-in fade-in duration-200">
          <div className="bg-card rounded-xl w-full max-w-sm shadow-2xl border border-border animate-in slide-in-from-bottom-4 duration-300">
            <div className="p-6 space-y-6">
              <div className="text-center space-y-2">
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto">
                  <User className="w-8 h-8 text-primary" />
                </div>
                <h3 className="text-xl font-bold text-card-foreground">
                  {isLogin ? "Welcome Back" : "Join MediCheck"}
                </h3>
                <p className="text-sm text-muted-foreground">
                  {isLogin ? "Sign in to access your healthcare dashboard" : "Create your account to get started"}
                </p>
              </div>

<div className="space-y-4">
                {!isLogin && (
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-card-foreground">Full Name</label>
                    <Input
                      placeholder="Enter your full name"
                      value={loginData.name}
                      onChange={(e) => setLoginData({ ...loginData, name: e.target.value })}
                      className="text-base h-12 border-border focus:border-primary"
                    />
                  </div>
                )}

<div className="space-y-2">
                  <label className="text-sm font-medium text-card-foreground">Email Address</label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                    <Input
                      type="email"
                      placeholder="Enter your email"
                      value={loginData.email}
                      onChange={(e) => setLoginData({ ...loginData, email: e.target.value })}
                      className="pl-10 text-base h-12 border-border focus:border-primary"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <label className="text-sm font-medium text-card-foreground">Password</label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                    <Input
                      type="password"
                      placeholder="Enter your password"
                      value={loginData.password}
                      onChange={(e) => setLoginData({ ...loginData, password: e.target.value })}
                      className="pl-10 text-base h-12 border-border focus:border-primary"
                    />
                  </div>
                </div>

<Button
                  className="w-full h-12 text-base font-semibold bg-primary hover:bg-primary/90"
                  onClick={handleAuth}
                >
                  {isLogin ? "Sign In" : "Create Account"}
                </Button>

<Button
                  variant="ghost"
                  className="w-full text-sm text-primary hover:text-primary hover:bg-primary/5"
                  onClick={() => setIsLogin(!isLogin)}
                >
                  {isLogin ? "Don't have an account? Create one" : "Already have an account? Sign in"}
                </Button>
              </div>

<Button
                variant="ghost"
                size="sm"
                onClick={() => setShowLogin(false)}
                className="absolute top-4 right-4 h-8 w-8 p-0 hover:bg-muted"
              >
                <X className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </div>
      )}

{/* Success Modal */}
      {showSuccessModal && (
        <div className="fixed inset-0 flex items-center justify-center z-50 p-4 pointer-events-none">
          <div className="bg-card border border-primary/20 rounded-xl shadow-2xl max-w-sm w-full animate-in slide-in-from-top-4 duration-300">
            <div className="p-6 text-center space-y-4">
              <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto">
                <CheckCircle className="w-8 h-8 text-primary" />
              </div>
              <div>
                <h4 className="font-semibold text-card-foreground mb-2">Success!</h4>
                <p className="text-sm text-muted-foreground">{successMessage}</p>
              </div>
            </div>
          </div>
        </div>
      )}

{/* Profile Modal */}
      {showProfile && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-card rounded-lg w-full max-w-sm">
            <div className="p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-card-foreground">Profile</h3>
                <Button variant="ghost" size="sm" onClick={() => setShowProfile(false)}>
                  <X className="w-4 h-4" />
                </Button>
              </div>

<div className="space-y-3">
                  <div>
                    <p className="text-sm text-muted-foreground">Name</p>
                    <p className="font-semibold text-card-foreground">{userProfile.name}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Gender</p>
                    <p className="font-semibold text-card-foreground">{userProfile.gender}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Age</p>
                    <p className="font-semibold text-card-foreground">{userProfile.age} years</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Email</p>
                    <p className="font-semibold text-card-foreground">{userProfile.email}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Phone</p>
                    <p className="font-semibold text-card-foreground">{userProfile.phone}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Location</p>
                    <p className="font-semibold text-card-foreground">{userProfile.location}</p>
                  </div>
                </div>

<div className="pt-4 space-y-2">
                  <Button variant="outline" className="w-full bg-transparent">
                    Edit Profile
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full text-destructive hover:text-destructive"
                    onClick={() => {
                      setIsLoggedIn(false)
                      localStorage.removeItem("medicheck_logged_in")
                      setShowProfile(false)
                      setSuccessMessage("Logged out successfully!")
                      setShowSuccessModal(true)
                      setTimeout(() => setShowSuccessModal(false), 2000)
                    }}
                  >
                    Logout
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/medicine/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft, Search, MapPin, Pill, Navigation, Phone, Camera, ShoppingCart, AlertCircle } from "lucide-react"
import Link from "next/link"
import Textarea from "@/components/ui/textarea"

const medicines = [
  {
    id: 1,
    name: "Paracetamol 500mg",
    genericName: "Acetaminophen",
    manufacturer: "Cipla",
    price: 45,
    category: "Pain Relief",
    inStock: true,
    totalStock: 156,
    nearbyPharmacies: [
      {
        name: "Apollo Pharmacy",
        distance: "0.8 km",
        price: 45,
        stock: 25,
        address: "Sector 18, Noida",
        phone: "+91-120-4567890",
        openUntil: "11:00 PM",
      },
      {
        name: "MedPlus",
        distance: "1.2 km",
        price: 42,
        stock: 18,
        address: "City Centre Mall, Noida",
        phone: "+91-120-4567891",
        openUntil: "10:30 PM",
      },
      {
        name: "Fortis Pharmacy",
        distance: "1.5 km",
        price: 47,
        stock: 32,
        address: "Fortis Hospital, Noida",
        phone: "+91-120-4567892",
        openUntil: "24 Hours",
      },
      {
        name: "Max Pharmacy",
        distance: "2.1 km",
        price: 44,
        stock: 12,
        address: "Max Hospital, Noida",
        phone: "+91-120-4567893",
        openUntil: "24 Hours",
      },
      {
        name: "1mg Pharmacy",
        distance: "2.8 km",
        price: 43,
        stock: 69,
        address: "DLF Mall, Noida",
        phone: "+91-120-4567894",
        openUntil: "9:00 PM",
      },
    ],
  },
  {
    id: 2,
    name: "Amoxicillin 250mg",
    genericName: "Amoxicillin",
    manufacturer: "Sun Pharma",
    price: 120,
    category: "Antibiotic",
    inStock: true,
    totalStock: 89,
    nearbyPharmacies: [
      {
        name: "Fortis Pharmacy",
        distance: "1.5 km",
        price: 120,
        stock: 15,
        address: "Fortis Hospital, Noida",
        phone: "+91-120-4567892",
        openUntil: "24 Hours",
      },
      {
        name: "Max Pharmacy",
        distance: "2.1 km",
        price: 115,
        stock: 8,
        address: "Max Hospital, Noida",
        phone: "+91-120-4567893",
        openUntil: "24 Hours",
      },
      {
        name: "Apollo Pharmacy",
        distance: "0.8 km",
        price: 125,
        stock: 22,
        address: "Sector 18, Noida",
        phone: "+91-120-4567890",
        openUntil: "11:00 PM",
      },
      {
        name: "MedPlus",
        distance: "1.2 km",
        price: 118,
        stock: 6,
        address: "City Centre Mall, Noida",
        phone: "+91-120-4567891",
        openUntil: "10:30 PM",
      },
      {
        name: "Netmeds",
        distance: "3.2 km",
        price: 122,
        stock: 38,
        address: "Sector 62, Noida",
        phone: "+91-120-4567895",
        openUntil: "10:00 PM",
      },
    ],
  },
  {
    id: 3,
    name: "Cetirizine 10mg",
    genericName: "Cetirizine HCl",
    manufacturer: "Dr. Reddy's",
    price: 35,
    category: "Allergy",
    inStock: true,
    totalStock: 203,
    nearbyPharmacies: [
      {
        name: "1mg Pharmacy",
        distance: "2.8 km",
        price: 35,
        stock: 45,
        address: "DLF Mall, Noida",
        phone: "+91-120-4567894",
        openUntil: "9:00 PM",
      },
      {
        name: "Netmeds",
        distance: "3.2 km",
        price: 38,
        stock: 67,
        address: "Sector 62, Noida",
        phone: "+91-120-4567895",
        openUntil: "10:00 PM",
      },
      {
        name: "Apollo Pharmacy",
        distance: "0.8 km",
        price: 36,
        stock: 28,
        address: "Sector 18, Noida",
        phone: "+91-120-4567890",
        openUntil: "11:00 PM",
      },
      {
        name: "MedPlus",
        distance: "1.2 km",
        price: 34,
        stock: 41,
        address: "City Centre Mall, Noida",
        phone: "+91-120-4567891",
        openUntil: "10:30 PM",
      },
      {
        name: "Max Pharmacy",
        distance: "2.1 km",
        price: 37,
        stock: 22,
        address: "Max Hospital, Noida",
        phone: "+91-120-4567893",
        openUntil: "24 Hours",
      },
    ],
  },
  {
    id: 4,
    name: "Metformin 500mg",
    genericName: "Metformin HCl",
    manufacturer: "Lupin",
    price: 85,
    category: "Diabetes",
    inStock: true,
    totalStock: 134,
    nearbyPharmacies: [
      {
        name: "Apollo Pharmacy",
        distance: "0.8 km",
        price: 85,
        stock: 35,
        address: "Sector 18, Noida",
        phone: "+91-120-4567890",
        openUntil: "11:00 PM",
      },
      {
        name: "MedPlus",
        distance: "1.2 km",
        price: 82,
        stock: 29,
        address: "City Centre Mall, Noida",
        phone: "+91-120-4567891",
        openUntil: "10:30 PM",
      },
      {
        name: "Fortis Pharmacy",
        distance: "1.5 km",
        price: 88,
        stock: 18,
        address: "Fortis Hospital, Noida",
        phone: "+91-120-4567892",
        openUntil: "24 Hours",
      },
      {
        name: "1mg Pharmacy",
        distance: "2.8 km",
        price: 83,
        stock: 52,
        address: "DLF Mall, Noida",
        phone: "+91-120-4567894",
        openUntil: "9:00 PM",
      },
    ],
  },
]

const categories = [
  "All Categories",
  "Pain Relief",
  "Antibiotic",
  "Allergy",
  "Diabetes",
  "Heart",
  "Blood Pressure",
  "Vitamins",
]

export default function MedicinePage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("All Categories")
  const [selectedMedicine, setSelectedMedicine] = useState<number | null>(null)
  const [showAllStores, setShowAllStores] = useState<number | null>(null)
  const [cart, setCart] = useState([])
  const [showCart, setShowCart] = useState(false)
  const [selectedPharmacy, setSelectedPharmacy] = useState(null)
  const [orderQuantity, setOrderQuantity] = useState(1)
  const [deliveryAddress, setDeliveryAddress] = useState("")
  const [showCheckout, setShowCheckout] = useState(false)

const filteredMedicines = medicines.filter((medicine) => {
    const matchesSearch =
      medicine.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      medicine.genericName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      medicine.manufacturer.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory = selectedCategory === "All Categories" || medicine.category === selectedCategory
    return matchesSearch && matchesCategory
  })

const getStockStatus = (totalStock: number, inStock: boolean) => {
    if (!inStock || totalStock === 0)
      return { text: "Out of Stock", color: "bg-destructive text-destructive-foreground" }
    if (totalStock <= 20) return { text: `Low Stock: ${totalStock} total`, color: "bg-yellow-100 text-yellow-800" }
    return { text: `In Stock: ${totalStock} total available`, color: "bg-secondary text-secondary-foreground" }
  }

const addToCart = (medicine, pharmacy, quantity) => {
    const cartItem = {
      id: Date.now(),
      medicine,
      pharmacy,
      quantity,
      totalPrice: pharmacy.price * quantity,
    }
    setCart([...cart, cartItem])
    setSelectedMedicine(null)
    setSelectedPharmacy(null)
    setOrderQuantity(1)
  }

const removeFromCart = (itemId) => {
    setCart(cart.filter((item) => item.id !== itemId))
  }

const getTotalCartValue = () => {
    return cart.reduce((total, item) => total + item.totalPrice, 0)
  }

const getCartItemCount = () => {
    return cart.reduce((total, item) => total + item.quantity, 0)
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="bg-card border-b border-border px-4 py-4">
        <div className="max-w-md mx-auto">
          <div className="flex items-center gap-3 mb-4">
            <Link href="/">
              <Button variant="ghost" size="sm" className="p-2">
                <ArrowLeft className="w-5 h-5" />
              </Button>
            </Link>
            <div className="flex-1">
              <h1 className="text-xl font-bold text-primary">Find Medicine</h1>
              <p className="text-sm text-muted-foreground">Real-time availability & prices</p>
            </div>
            <Button variant="outline" size="sm" className="relative bg-transparent" onClick={() => setShowCart(true)}>
              <ShoppingCart className="w-4 h-4" />
              {getCartItemCount() > 0 && (
                <Badge className="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
                  {getCartItemCount()}
                </Badge>
              )}
            </Button>
          </div>

{/* Search and Filter */}
          <div className="space-y-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
              <Input
                placeholder="Search medicines, generic names..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 text-base h-12 bg-input border-border"
              />
            </div>

<div className="flex gap-2">
              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                <SelectTrigger className="flex-1 h-10 bg-input border-border">
                  <SelectValue placeholder="Category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((category) => (
                    <SelectItem key={category} value={category}>
                      {category}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

{/* Medicine List */}
      <main className="max-w-md mx-auto px-4 py-6 space-y-4">
        {filteredMedicines.map((medicine) => {
          const stockStatus = getStockStatus(medicine.totalStock, medicine.inStock)

return (
            <Card key={medicine.id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-4">
                <div className="space-y-3">
                  {/* Medicine Info */}
                  <div>
                    <h3 className="font-semibold text-card-foreground text-lg">{medicine.name}</h3>
                    <p className="text-sm text-muted-foreground">{medicine.genericName}</p>
                    <p className="text-sm text-muted-foreground">{medicine.manufacturer}</p>
                  </div>

{/* Price and Stock */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <span className="text-xl font-bold text-primary">₹{medicine.price}</span>
                      <Badge variant="outline" className="text-xs">
                        {medicine.category}
                      </Badge>
                    </div>
                    <Badge className={stockStatus.color}>{stockStatus.text}</Badge>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <h4 className="text-sm font-medium text-card-foreground">
                        Available at {medicine.nearbyPharmacies.length} stores:
                      </h4>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-xs h-6 px-2"
                        onClick={() => setShowAllStores(showAllStores === medicine.id ? null : medicine.id)}
                      >
                        {showAllStores === medicine.id ? "Show Less" : "View All"}
                      </Button>
                    </div>

{(showAllStores === medicine.id
                      ? medicine.nearbyPharmacies
                      : medicine.nearbyPharmacies.slice(0, 2)
                    ).map((pharmacy, index) => (
                      <div key={index} className="bg-muted/50 rounded-lg p-3 space-y-2">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-2 flex-1 min-w-0">
                            <MapPin className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                            <div className="min-w-0 flex-1">
                              <div className="font-medium text-card-foreground truncate">{pharmacy.name}</div>
                              <div className="text-muted-foreground text-sm truncate">{pharmacy.distance}</div>
                            </div>
                          </div>
                          <div className="text-right flex-shrink-0 ml-2">
                            <div className="font-medium text-card-foreground">₹{pharmacy.price}</div>
                            <div className="text-xs text-muted-foreground">
                              {pharmacy.stock > 0 ? (
                                <span className={pharmacy.stock <= 10 ? "text-yellow-600" : "text-green-600"}>
                                  {pharmacy.stock} in stock
                                </span>
                              ) : (
                                <span className="text-red-600">Out of stock</span>
                              )}
                            </div>
                          </div>
                        </div>

{showAllStores === medicine.id && (
                          <div className="text-xs text-muted-foreground space-y-1 pl-6">
                            <div className="break-words">📍 {pharmacy.address}</div>
                            <div className="break-words">📞 {pharmacy.phone}</div>
                            <div>🕒 Open until {pharmacy.openUntil}</div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>

{/* Action Buttons */}
                  <div className="flex gap-2 pt-2">
                    <Button
                      className="flex-1 h-10"
                      disabled={!medicine.inStock}
                      onClick={() => setSelectedMedicine(medicine.id)}
                    >
                      <ShoppingCart className="w-4 h-4 mr-2" />
                      {medicine.inStock ? "Order Now" : "Out of Stock"}
                    </Button>
                    <Button variant="outline" size="sm" className="px-3 bg-transparent">
                      <Navigation className="w-4 h-4" />
                    </Button>
                    <Button variant="outline" size="sm" className="px-3 bg-transparent">
                      <Phone className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}

{filteredMedicines.length === 0 && (
          <Card>
            <CardContent className="p-8 text-center">
              <Pill className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="font-semibold text-card-foreground mb-2">No medicines found</h3>
              <p className="text-sm text-muted-foreground mb-4">Try adjusting your search or category filter</p>
              <Link href="/prescription-scanner">
                <Button variant="outline">
                  <Camera className="w-4 h-4 mr-2" />
                  Scan Prescription
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}

{/* AI Prediction Alert */}
        <Card className="bg-accent/10 border-accent">
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <AlertCircle className="w-5 h-5 text-accent-foreground mt-0.5" />
              <div>
                <h4 className="font-medium text-accent-foreground mb-1">AI Stock Prediction</h4>
                <p className="text-sm text-accent-foreground/80">
                  Based on seasonal trends, Paracetamol demand may increase by 40% next week. Apollo Pharmacy has the
                  highest stock (25 units) in your area.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </main>

{/* Order Modal */}
      {selectedMedicine && (
        <div className="fixed inset-0 bg-black/50 flex items-end z-50">
          <div className="bg-card w-full max-w-md mx-auto rounded-t-xl p-6 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold text-card-foreground">Select Pharmacy & Quantity</h3>
              <Button variant="ghost" size="sm" onClick={() => setSelectedMedicine(null)} className="p-2">
                ×
              </Button>
            </div>

<div className="space-y-4">
              <div>
                <label className="text-sm font-medium text-card-foreground mb-2 block">Quantity</label>
                <div className="flex items-center gap-3">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setOrderQuantity(Math.max(1, orderQuantity - 1))}
                    className="bg-transparent"
                  >
                    -
                  </Button>
                  <span className="text-lg font-medium w-12 text-center">{orderQuantity}</span>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setOrderQuantity(orderQuantity + 1)}
                    className="bg-transparent"
                  >
                    +
                  </Button>
                </div>
              </div>

{/* Pharmacy Options */}
              <div className="space-y-2">
                <label className="text-sm font-medium text-card-foreground">Choose Pharmacy</label>
                {medicines
                  .find((m) => m.id === selectedMedicine)
                  ?.nearbyPharmacies.map((pharmacy, index) => (
                    <Button
                      key={index}
                      variant={selectedPharmacy?.name === pharmacy.name ? "default" : "outline"}
                      className="w-full h-auto p-4 justify-between bg-transparent"
                      disabled={pharmacy.stock === 0}
                      onClick={() => setSelectedPharmacy(pharmacy)}
                    >
                      <div className="text-left flex-1 min-w-0">
                        <div className="font-medium truncate">{pharmacy.name}</div>
                        <div className="text-sm text-muted-foreground truncate">
                          {pharmacy.distance} • ₹{pharmacy.price} each
                        </div>
                        <div className="text-xs text-muted-foreground truncate">{pharmacy.address}</div>
                      </div>
                      <div className="text-right flex-shrink-0 ml-2">
                        <div className="text-sm font-medium">₹{pharmacy.price * orderQuantity}</div>
                        <div className="text-xs text-muted-foreground">
                          {pharmacy.stock > 0 ? `${pharmacy.stock} available` : "Out of stock"}
                        </div>
                      </div>
                    </Button>
                  ))}
              </div>
            </div>

<div className="pt-4 space-y-3">
              <Button
                className="w-full h-12 text-base"
                disabled={!selectedPharmacy}
                onClick={() => {
                  const medicine = medicines.find((m) => m.id === selectedMedicine)
                  addToCart(medicine, selectedPharmacy, orderQuantity)
                }}
              >
                Add to Cart - ₹{selectedPharmacy ? selectedPharmacy.price * orderQuantity : 0}
              </Button>
              <p className="text-xs text-center text-muted-foreground">Free delivery for orders above ₹200</p>
            </div>
          </div>
        </div>
      )}

{showCart && (
        <div className="fixed inset-0 bg-black/50 flex items-end z-50">
          <div className="bg-card w-full max-w-md mx-auto rounded-t-xl max-h-[80vh] overflow-hidden flex flex-col">
            <div className="p-6 border-b border-border">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-card-foreground">Your Cart ({getCartItemCount()} items)</h3>
                <Button variant="ghost" size="sm" onClick={() => setShowCart(false)} className="p-2">
                  ×
                </Button>
              </div>
            </div>

<div className="flex-1 overflow-y-auto p-6">
              {cart.length === 0 ? (
                <div className="text-center py-8">
                  <ShoppingCart className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
                  <h4 className="font-semibold text-card-foreground mb-2">Your cart is empty</h4>
                  <p className="text-sm text-muted-foreground">Add medicines to get started</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {cart.map((item) => (
                    <div key={item.id} className="border border-border rounded-lg p-4">
                      <div className="flex items-start justify-between mb-2">
                        <div className="flex-1">
                          <h4 className="font-semibold text-card-foreground">{item.medicine.name}</h4>
                          <p className="text-sm text-muted-foreground">{item.pharmacy.name}</p>
                          <p className="text-xs text-muted-foreground">{item.pharmacy.distance}</p>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => removeFromCart(item.id)}
                          className="text-destructive hover:text-destructive"
                        >
                          ×
                        </Button>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="text-sm text-muted-foreground">
                          Qty: {item.quantity} × ₹{item.pharmacy.price}
                        </div>
                        <div className="font-semibold text-primary">₹{item.totalPrice}</div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

{cart.length > 0 && (
              <div className="p-6 border-t border-border space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-lg font-semibold text-card-foreground">Total</span>
                  <span className="text-xl font-bold text-primary">₹{getTotalCartValue()}</span>
                </div>
                <Button
                  className="w-full h-12 text-base"
                  onClick={() => {
                    setShowCart(false)
                    setShowCheckout(true)
                  }}
                >
                  Proceed to Checkout
                </Button>
                {getTotalCartValue() < 200 && (
                  <p className="text-xs text-center text-muted-foreground">
                    Add ₹{200 - getTotalCartValue()} more for free delivery
                  </p>
                )}
              </div>
            )}
          </div>
        </div>
      )}

{showCheckout && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-card rounded-lg w-full max-w-sm max-h-[90vh] overflow-hidden flex flex-col">
            <div className="p-6 border-b border-border">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-card-foreground">Checkout</h3>
                <Button variant="ghost" size="sm" onClick={() => setShowCheckout(false)} className="p-2">
                  ×
                </Button>
              </div>
            </div>

<div className="flex-1 overflow-y-auto p-6 space-y-6">
              {/* Delivery Address */}
              <div>
                <label className="text-sm font-medium text-card-foreground mb-2 block">Delivery Address</label>
                <Textarea
                  placeholder="Enter your complete delivery address..."
                  value={deliveryAddress}
                  onChange={(e) => setDeliveryAddress(e.target.value)}
                  className="min-h-[80px]"
                />
              </div>