469 lines
23 KiB
TypeScript
469 lines
23 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect, useState } from "react"
|
||
import Link from "next/link"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Sparkles, Heart, Users, ArrowRight, Home, MessageCircle, BarChart3, Eye, EyeOff } from "lucide-react"
|
||
import HeaderMusicControl from "@/components/header-music-control"
|
||
import { WishService } from "@/lib/supabase-service"
|
||
|
||
export default function ThankYouPage() {
|
||
const [wishes, setWishes] = useState<any[]>([])
|
||
const [showContent, setShowContent] = useState(false)
|
||
const [lastWishIsPublic, setLastWishIsPublic] = useState(true)
|
||
|
||
useEffect(() => {
|
||
const fetchWishes = async () => {
|
||
try {
|
||
// 獲取所有困擾案例
|
||
const allWishesData = await WishService.getAllWishes()
|
||
|
||
// 轉換數據格式
|
||
const convertWish = (wish: any) => ({
|
||
id: wish.id,
|
||
title: wish.title,
|
||
currentPain: wish.current_pain,
|
||
expectedSolution: wish.expected_solution,
|
||
expectedEffect: wish.expected_effect || "",
|
||
createdAt: wish.created_at,
|
||
isPublic: wish.is_public,
|
||
email: wish.email,
|
||
images: wish.images,
|
||
like_count: wish.like_count || 0, // 包含點讚數
|
||
})
|
||
|
||
const allWishes = allWishesData.map(convertWish)
|
||
setWishes(allWishes)
|
||
|
||
// 檢查最後一個提交的願望是否為公開
|
||
if (allWishes.length > 0) {
|
||
const lastWish = allWishes[allWishes.length - 1]
|
||
setLastWishIsPublic(lastWish.isPublic !== false)
|
||
}
|
||
} catch (error) {
|
||
console.error("獲取統計數據失敗:", error)
|
||
// 如果 Supabase 連接失敗，回退到 localStorage
|
||
const savedWishes = JSON.parse(localStorage.getItem("wishes") || "[]")
|
||
setWishes(savedWishes)
|
||
|
||
if (savedWishes.length > 0) {
|
||
const lastWish = savedWishes[savedWishes.length - 1]
|
||
setLastWishIsPublic(lastWish.isPublic !== false)
|
||
}
|
||
}
|
||
}
|
||
|
||
fetchWishes()
|
||
|
||
// 延遲顯示內容，創造進入效果
|
||
setTimeout(() => setShowContent(true), 300)
|
||
}, [])
|
||
|
||
const totalWishes = wishes.length
|
||
const publicWishes = wishes.filter((wish) => wish.isPublic !== false).length
|
||
const privateWishes = wishes.filter((wish) => wish.isPublic === false).length
|
||
const thisWeek = wishes.filter((wish) => {
|
||
const wishDate = new Date(wish.createdAt)
|
||
const oneWeekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
|
||
return wishDate >= oneWeekAgo
|
||
}).length
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
||
{/* 增強的星空背景 */}
|
||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||
{/* 更多的星星 */}
|
||
{[...Array(50)].map((_, i) => (
|
||
<div
|
||
key={i}
|
||
className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white rounded-full animate-pulse"
|
||
style={{
|
||
left: `${Math.random() * 100}%`,
|
||
top: `${Math.random() * 100}%`,
|
||
animationDelay: `${Math.random() * 3}s`,
|
||
animationDuration: `${2 + Math.random() * 2}s`,
|
||
}}
|
||
/>
|
||
))}
|
||
|
||
{/* 特殊的感謝星星 */}
|
||
{[...Array(20)].map((_, i) => (
|
||
<div
|
||
key={`special-${i}`}
|
||
className="absolute w-1 h-1 md:w-2 md:h-2 bg-gradient-to-r from-pink-300 to-yellow-300 rounded-full animate-pulse opacity-80"
|
||
style={{
|
||
left: `${Math.random() * 100}%`,
|
||
top: `${Math.random() * 100}%`,
|
||
animationDelay: `${Math.random() * 4}s`,
|
||
animationDuration: `${3 + Math.random() * 2}s`,
|
||
}}
|
||
/>
|
||
))}
|
||
|
||
{/* 光芒效果 */}
|
||
<div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-96 h-96 md:w-[600px] md:h-[600px] bg-gradient-radial from-pink-400/30 via-purple-500/20 to-transparent rounded-full blur-3xl animate-pulse"></div>
|
||
<div className="absolute bottom-1/4 right-1/4 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
|
||
</div>
|
||
|
||
{/* Header - 修復跑版問題 */}
|
||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
|
||
<div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
|
||
<div className="flex items-center justify-between gap-2">
|
||
{/* Logo 區域 - 防止文字換行 */}
|
||
<Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
|
||
<div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||
<Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
|
||
</div>
|
||
<h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">心願星河</h1>
|
||
</Link>
|
||
|
||
{/* 導航區域 */}
|
||
<nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
|
||
{/* 音樂控制 */}
|
||
<div className="hidden sm:block">
|
||
<HeaderMusicControl />
|
||
</div>
|
||
<div className="sm:hidden">
|
||
<HeaderMusicControl mobileSimplified />
|
||
</div>
|
||
|
||
{/* 桌面版完整導航 */}
|
||
<div className="hidden md:flex items-center gap-4">
|
||
<Link href="/analytics">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4"
|
||
>
|
||
<BarChart3 className="w-4 h-4 mr-2" />
|
||
問題洞察
|
||
</Button>
|
||
</Link>
|
||
<Link href="/wishes">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-4"
|
||
>
|
||
聆聽心聲
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* 平板版導航 */}
|
||
<div className="hidden sm:flex md:hidden items-center gap-1">
|
||
<Link href="/">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2"
|
||
>
|
||
<Home className="w-4 h-4" />
|
||
</Button>
|
||
</Link>
|
||
<Link href="/analytics">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||
>
|
||
洞察
|
||
</Button>
|
||
</Link>
|
||
<Link href="/wishes">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
|
||
>
|
||
心聲
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* 手機版導航 - 移除首頁按鈕，避免與 logo 功能重疊 */}
|
||
<div className="flex sm:hidden items-center gap-1">
|
||
<Link href="/analytics">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||
>
|
||
洞察
|
||
</Button>
|
||
</Link>
|
||
<Link href="/wishes">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
|
||
>
|
||
心聲
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Main Content */}
|
||
<main className="py-8 md:py-16 px-2 sm:px-4">
|
||
<div className="container mx-auto max-w-4xl">
|
||
<div
|
||
className={`transition-all duration-1000 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
|
||
>
|
||
{/* 感謝標題區域 */}
|
||
<div className="text-center mb-12 md:mb-16">
|
||
{/* 感謝圖標 */}
|
||
<div className="mb-6 md:mb-8">
|
||
<div className="relative mx-auto w-24 h-24 md:w-32 md:h-32 mb-4 md:mb-6">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-pink-400 to-purple-500 rounded-full animate-pulse shadow-2xl shadow-pink-500/50"></div>
|
||
<div className="absolute inset-2 bg-gradient-to-br from-pink-300 to-purple-400 rounded-full flex items-center justify-center">
|
||
<Heart className="w-10 h-10 md:w-16 md:h-16 text-white animate-pulse" fill="currentColor" />
|
||
</div>
|
||
|
||
{/* 周圍的小心心 */}
|
||
{[...Array(8)].map((_, i) => (
|
||
<div
|
||
key={i}
|
||
className="absolute w-3 h-3 md:w-4 md:h-4 text-pink-300 animate-bounce"
|
||
style={{
|
||
left: `${50 + 40 * Math.cos((i * Math.PI * 2) / 8)}%`,
|
||
top: `${50 + 40 * Math.sin((i * Math.PI * 2) / 8)}%`,
|
||
animationDelay: `${i * 0.2}s`,
|
||
transform: "translate(-50%, -50%)",
|
||
}}
|
||
>
|
||
<Heart className="w-full h-full" fill="currentColor" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<h1 className="text-4xl md:text-6xl font-bold text-white mb-4 md:mb-6 bg-gradient-to-r from-pink-300 via-purple-300 to-cyan-300 bg-clip-text text-transparent">
|
||
感謝你的信任與分享
|
||
</h1>
|
||
|
||
<div className="max-w-2xl mx-auto space-y-4 md:space-y-6">
|
||
<p className="text-xl md:text-2xl text-blue-100 leading-relaxed">
|
||
你的困擾已經成功提交，我們會認真分析並提供專業建議
|
||
</p>
|
||
<p className="text-lg md:text-xl text-blue-200 leading-relaxed">
|
||
每一個真實的工作困擾都是改善的起點，你的分享將幫助我們創造更好的解決方案
|
||
</p>
|
||
<p className="text-base md:text-lg text-blue-300 leading-relaxed">
|
||
我們的專業團隊會仔細研究你的案例，用科技的力量為你和更多人解決職場挑戰
|
||
</p>
|
||
</div>
|
||
|
||
{/* 隱私狀態說明 */}
|
||
<div className="mt-6 md:mt-8">
|
||
<div
|
||
className={`inline-flex items-center gap-2 px-4 py-2 rounded-full border ${
|
||
lastWishIsPublic
|
||
? "bg-cyan-500/20 border-cyan-400/50 text-cyan-200"
|
||
: "bg-slate-600/20 border-slate-500/50 text-slate-300"
|
||
}`}
|
||
>
|
||
{lastWishIsPublic ? (
|
||
<>
|
||
<Eye className="w-4 h-4" />
|
||
<span className="text-sm md:text-base">你的分享已公開，其他人可以看到並產生共鳴</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<EyeOff className="w-4 h-4" />
|
||
<span className="text-sm md:text-base">你的分享保持私密，僅用於問題分析和改善</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 統計卡片 */}
|
||
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6 md:gap-8 mb-8 sm:mb-12 md:mb-16">
|
||
<Card className="bg-gradient-to-br from-pink-900/60 to-purple-900/60 backdrop-blur-sm border border-pink-700/40 shadow-2xl shadow-pink-500/20 transform hover:scale-105 transition-all duration-300">
|
||
<CardContent className="p-4 sm:p-6 md:p-8 text-center">
|
||
<div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-pink-400 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-pink-500/30">
|
||
<Users className="w-6 h-6 md:w-8 md:h-8 text-white" />
|
||
</div>
|
||
<div className="text-3xl md:text-4xl font-bold text-white mb-2">{totalWishes}</div>
|
||
<div className="text-pink-200 text-sm md:text-base">個案例已收集</div>
|
||
<div className="text-pink-300 text-xs md:text-sm mt-1">包括你剛才分享的經歷</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-gradient-to-br from-cyan-900/60 to-blue-900/60 backdrop-blur-sm border border-cyan-700/40 shadow-2xl shadow-cyan-500/20 transform hover:scale-105 transition-all duration-300">
|
||
<CardContent className="p-4 sm:p-6 md:p-8 text-center">
|
||
<div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-cyan-500/30">
|
||
<Sparkles className="w-6 h-6 md:w-8 md:h-8 text-white" />
|
||
</div>
|
||
<div className="text-3xl md:text-4xl font-bold text-white mb-2">{thisWeek}</div>
|
||
<div className="text-cyan-200 text-sm md:text-base">本週新增案例</div>
|
||
<div className="text-cyan-300 text-xs md:text-sm mt-1">你不是一個人在面對挑戰</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-gradient-to-br from-purple-900/60 to-indigo-900/60 backdrop-blur-sm border border-purple-700/40 shadow-2xl shadow-purple-500/20 transform hover:scale-105 transition-all duration-300">
|
||
<CardContent className="p-4 sm:p-6 md:p-8 text-center">
|
||
<div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-purple-500/30">
|
||
<Heart className="w-6 h-6 md:w-8 md:h-8 text-white" fill="currentColor" />
|
||
</div>
|
||
<div className="text-3xl md:text-4xl font-bold text-white mb-2">∞</div>
|
||
<div className="text-purple-200 text-sm md:text-base">無限的可能性</div>
|
||
<div className="text-purple-300 text-xs md:text-sm mt-1">每個問題都能找到解決方案</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 隱私統計說明 */}
|
||
{privateWishes > 0 && (
|
||
<div className="text-center mb-8 md:mb-12">
|
||
<div className="inline-flex items-center gap-4 bg-slate-800/50 backdrop-blur-sm rounded-lg px-4 md:px-6 py-3 md:py-4 border border-slate-600/50">
|
||
<div className="flex items-center gap-2 text-cyan-200">
|
||
<Eye className="w-4 h-4" />
|
||
<span className="text-sm md:text-base font-medium">{publicWishes} 個公開案例</span>
|
||
</div>
|
||
<div className="w-px h-6 bg-slate-600"></div>
|
||
<div className="flex items-center gap-2 text-slate-300">
|
||
<EyeOff className="w-4 h-4" />
|
||
<span className="text-sm md:text-base font-medium">{privateWishes} 個私密案例</span>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs md:text-sm text-slate-400 mt-2 px-4">
|
||
所有案例都會用於問題分析，幫助改善整體工作環境
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* 激勵訊息卡片 */}
|
||
<Card className="bg-gradient-to-r from-slate-800/80 to-slate-900/80 backdrop-blur-sm border border-slate-600/50 shadow-2xl mb-12 md:mb-16">
|
||
<CardContent className="p-4 sm:p-6 md:p-8 lg:p-12">
|
||
<div className="text-center space-y-4 sm:space-y-6 md:space-y-8">
|
||
<div className="flex items-center justify-center gap-4 mb-6">
|
||
<div className="w-2 h-2 bg-pink-400 rounded-full animate-pulse"></div>
|
||
<div
|
||
className="w-3 h-3 bg-purple-400 rounded-full animate-pulse"
|
||
style={{ animationDelay: "0.5s" }}
|
||
></div>
|
||
<div
|
||
className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"
|
||
style={{ animationDelay: "1s" }}
|
||
></div>
|
||
</div>
|
||
|
||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-6">你的分享推動了積極的改變</h2>
|
||
|
||
<div className="grid md:grid-cols-2 gap-6 md:gap-8 text-left">
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg md:text-xl font-semibold text-blue-200 flex items-center gap-2">
|
||
<Sparkles className="w-5 h-5 text-cyan-400" />
|
||
勇於面對挑戰
|
||
</h3>
|
||
<p className="text-slate-300 leading-relaxed">
|
||
願意分享工作困擾需要勇氣。你的坦誠讓我們能夠深入了解職場的真實挑戰，這是解決問題的重要第一步。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg md:text-xl font-semibold text-purple-200 flex items-center gap-2">
|
||
<Heart className="w-5 h-5 text-pink-400" fill="currentColor" />
|
||
共同的使命
|
||
</h3>
|
||
<p className="text-slate-300 leading-relaxed">
|
||
在這個平台上，有許多和你面臨相似挑戰的人。你的經驗分享讓大家知道，我們都在為更好的工作環境而努力。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg md:text-xl font-semibold text-green-200 flex items-center gap-2">
|
||
<ArrowRight className="w-5 h-5 text-green-400" />
|
||
推動實際改變
|
||
</h3>
|
||
<p className="text-slate-300 leading-relaxed">
|
||
每一個案例都是我們開發解決方案的重要依據。你的困擾將幫助我們創造更智能、更實用的工作工具。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg md:text-xl font-semibold text-yellow-200 flex items-center gap-2">
|
||
<Sparkles className="w-5 h-5 text-yellow-400" />
|
||
創造更好未來
|
||
</h3>
|
||
<p className="text-slate-300 leading-relaxed">
|
||
我們相信科技能夠讓工作變得更有效率、更有意義。你的分享是實現這個目標的重要推動力。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 行動按鈕 */}
|
||
<div className="text-center space-y-6 md:space-y-8">
|
||
<h3 className="text-xl md:text-2xl font-semibold text-white mb-6">接下來你可以...</h3>
|
||
|
||
<div className="flex flex-col md:flex-row gap-4 md:gap-6 justify-center max-w-2xl mx-auto">
|
||
{lastWishIsPublic ? (
|
||
<Link href="/wishes" className="flex-1">
|
||
<Button
|
||
size="lg"
|
||
className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold shadow-xl shadow-purple-500/25 hover:shadow-2xl hover:shadow-purple-500/30 transform hover:scale-105 transition-all"
|
||
>
|
||
<MessageCircle className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
|
||
查看你的公開分享
|
||
</Button>
|
||
</Link>
|
||
) : (
|
||
<Link href="/wishes" className="flex-1">
|
||
<Button
|
||
size="lg"
|
||
className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold shadow-xl shadow-purple-500/25 hover:shadow-2xl hover:shadow-purple-500/30 transform hover:scale-105 transition-all"
|
||
>
|
||
<MessageCircle className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
|
||
查看其他公開經歷
|
||
</Button>
|
||
</Link>
|
||
)}
|
||
|
||
<Link href="/analytics" className="flex-1">
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 border-2 border-cyan-400 bg-slate-800/50 hover:bg-slate-700/50 text-cyan-100 hover:text-white font-semibold shadow-lg backdrop-blur-sm transform hover:scale-105 transition-all"
|
||
>
|
||
<Sparkles className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
|
||
查看問題分析
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="pt-4">
|
||
<Link href="/">
|
||
<Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-6 py-2">
|
||
<Home className="w-4 h-4 mr-2" />
|
||
回到首頁
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 底部激勵訊息 */}
|
||
<div className="text-center mt-16 md:mt-20 p-6 md:p-8 bg-gradient-to-r from-slate-800/30 to-slate-900/30 rounded-2xl border border-slate-600/30 backdrop-blur-sm">
|
||
<div className="flex items-center justify-center gap-2 mb-4">
|
||
<Heart className="w-5 h-5 text-pink-400 animate-pulse" fill="currentColor" />
|
||
<Sparkles className="w-5 h-5 text-cyan-400 animate-pulse" />
|
||
<Heart className="w-5 h-5 text-purple-400 animate-pulse" fill="currentColor" />
|
||
</div>
|
||
<p className="text-lg md:text-xl text-blue-200 font-medium mb-2">再次感謝你的信任與分享</p>
|
||
<p className="text-sm md:text-base text-blue-300">每一份真實的經歷都是推動職場環境改善的重要力量</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|