"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Sparkles, ArrowLeft, Database, Settings, TestTube, Trash2 } from "lucide-react"
import HeaderMusicControl from "@/components/header-music-control"
import MigrationDialog from "@/components/migration-dialog"
import { testSupabaseConnection, MigrationService } from "@/lib/supabase-service"

export default function SettingsPage() {
  const [showMigration, setShowMigration] = useState(false)
  const [isConnected, setIsConnected] = useState(false)
  const [localDataCount, setLocalDataCount] = useState(0)
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    checkLocalData()
    checkConnection()
  }, [])

  const checkLocalData = () => {
    try {
      const wishes = JSON.parse(localStorage.getItem("wishes") || "[]")
      setLocalDataCount(wishes.length)
    } catch (error) {
      setLocalDataCount(0)
    }
  }

  const checkConnection = async () => {
    setIsLoading(true)
    try {
      const connected = await testSupabaseConnection()
      setIsConnected(connected)
    } catch (error) {
      setIsConnected(false)
    } finally {
      setIsLoading(false)
    }
  }

  const clearAllData = () => {
    if (confirm("確定要清除所有本地數據嗎？此操作無法復原。")) {
      MigrationService.clearLocalStorageData()
      // 也清除其他設定
      localStorage.removeItem("backgroundMusicState")
      localStorage.removeItem("user_session")
      setLocalDataCount(0)
      alert("本地數據已清除")
    }
  }

  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(25)].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`,
            }}
          />
        ))}
        <div className="absolute top-1/4 left-1/3 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-purple-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">
            <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>

              <Link href="/">
                <Button variant="ghost" size="sm" className="text-blue-200 hover:text-white hover:bg-blue-800/50">
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  返回首頁
                </Button>
              </Link>
            </nav>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="py-8 md:py-12 px-4">
        <div className="container mx-auto max-w-4xl">
          <div className="text-center mb-8 md:mb-12">
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 flex items-center justify-center gap-3">
              <Settings className="w-8 h-8 text-cyan-400" />
              系統設定
            </h2>
            <p className="text-blue-200 text-sm md:text-base">管理數據存儲和系統配置</p>
          </div>

          <div className="space-y-6 md:space-y-8">
            {/* Supabase 連接狀態 */}
            <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-3">
                  <Database className="w-6 h-6 text-blue-400" />
                  Supabase 數據庫狀態
                </CardTitle>
                <CardDescription className="text-blue-200">雲端數據庫連接和配置狀態</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between p-4 bg-slate-700/50 rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className={`w-4 h-4 rounded-full ${isConnected ? "bg-green-400" : "bg-red-400"}`}></div>
                    <span className="text-white">連接狀態</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge className={isConnected ? "bg-green-500/20 text-green-200" : "bg-red-500/20 text-red-200"}>
                      {isLoading ? "檢查中..." : isConnected ? "已連接" : "未連接"}
                    </Badge>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={checkConnection}
                      disabled={isLoading}
                      className="text-blue-200 hover:text-white"
                    >
                      <TestTube className="w-4 h-4" />
                    </Button>
                  </div>
                </div>

                {!isConnected && (
                  <div className="p-4 bg-red-900/20 border border-red-600/30 rounded-lg">
                    <p className="text-red-200 text-sm">無法連接到 Supabase。請檢查：</p>
                    <ul className="text-red-200 text-xs mt-2 ml-4 space-y-1">
                      <li>• 環境變數 NEXT_PUBLIC_SUPABASE_URL 是否正確</li>
                      <li>• 環境變數 NEXT_PUBLIC_SUPABASE_ANON_KEY 是否正確</li>
                      <li>• Supabase 項目是否正常運行</li>
                      <li>• 網路連接是否正常</li>
                    </ul>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* 數據遷移 */}
            {localDataCount > 0 && (
              <Card className="bg-slate-800/50 backdrop-blur-sm border border-blue-600/50">
                <CardHeader>
                  <CardTitle className="text-white flex items-center gap-3">
                    <Database className="w-6 h-6 text-blue-400" />
                    數據遷移
                    <Badge className="bg-orange-500/20 text-orange-200 border border-orange-400/30">需要處理</Badge>
                  </CardTitle>
                  <CardDescription className="text-blue-200">
                    發現 {localDataCount} 個本地困擾案例，建議遷移到雲端數據庫
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <Button
                    onClick={() => setShowMigration(true)}
                    className="w-full bg-gradient-to-r from-blue-500 to-cyan-600 hover:from-blue-600 hover:to-cyan-700 text-white"
                  >
                    開始數據遷移
                  </Button>
                </CardContent>
              </Card>
            )}

            {/* 數據管理 */}
            <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-3">
                  <Trash2 className="w-6 h-6 text-red-400" />
                  數據管理
                </CardTitle>
                <CardDescription className="text-blue-200">清除本地存儲的數據</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="p-4 bg-slate-700/50 rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-white">本地困擾案例</span>
                    <Badge variant="secondary">{localDataCount} 個</Badge>
                  </div>
                  <p className="text-slate-300 text-sm">存儲在瀏覽器本地的困擾案例數據</p>
                </div>

                <Button onClick={clearAllData} disabled={localDataCount === 0} variant="destructive" className="w-full">
                  <Trash2 className="w-4 h-4 mr-2" />
                  清除所有本地數據
                </Button>
              </CardContent>
            </Card>

            {/* 系統資訊 */}
            <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
              <CardHeader>
                <CardTitle className="text-white">系統資訊</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-slate-400">版本</span>
                    <div className="text-white">v1.0.0</div>
                  </div>
                  <div>
                    <span className="text-slate-400">數據庫</span>
                    <div className="text-white">{isConnected ? "Supabase" : "LocalStorage"}</div>
                  </div>
                  <div>
                    <span className="text-slate-400">用戶會話</span>
                    <div className="text-white text-xs truncate">
                      {typeof window !== "undefined"
                        ? localStorage.getItem("user_session")?.slice(-8) || "未設定"
                        : "載入中..."}
                    </div>
                  </div>
                  <div>
                    <span className="text-slate-400">瀏覽器</span>
                    <div className="text-white">
                      {typeof window !== "undefined" ? navigator.userAgent.split(" ").pop() : "未知"}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>

      {/* 遷移對話框 */}
      {showMigration && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="w-full max-w-2xl">
            <MigrationDialog
              onComplete={() => {
                setShowMigration(false)
                checkLocalData()
              }}
              onSkip={() => setShowMigration(false)}
            />
          </div>
        </div>
      )}
    </div>
  )
}