"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Cloud, Trash2, RefreshCw, CheckCircle, AlertTriangle, HardDrive } from "lucide-react"
import { StorageHealthService } from "@/lib/supabase-service-updated"

export default function StorageManagement() {
  const [storageHealth, setStorageHealth] = useState<{
    healthy: boolean
    stats?: { totalFiles: number; totalSize: number }
    error?: string
  } | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [cleanupResult, setCleanupResult] = useState<{ cleaned: number; error?: string } | null>(null)

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

  const checkStorageHealth = async () => {
    setIsLoading(true)
    try {
      const health = await StorageHealthService.checkStorageHealth()
      setStorageHealth(health)
    } catch (error) {
      setStorageHealth({ healthy: false, error: `檢查失敗: ${error}` })
    } finally {
      setIsLoading(false)
    }
  }

  const cleanupOrphanedImages = async () => {
    if (!confirm("確定要清理孤立的圖片嗎？這將刪除沒有被任何困擾案例引用的圖片。")) {
      return
    }

    setIsLoading(true)
    try {
      const result = await StorageHealthService.cleanupOrphanedImages()
      setCleanupResult(result)
      // 重新檢查存儲狀態
      await checkStorageHealth()
    } catch (error) {
      setCleanupResult({ cleaned: 0, error: `清理失敗: ${error}` })
    } finally {
      setIsLoading(false)
    }
  }

  const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return "0 Bytes"
    const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
  }

  return (
    <div className="space-y-6">
      {/* 存儲狀態 */}
      <Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-3">
            <Cloud className="w-6 h-6 text-blue-400" />
            Supabase Storage 狀態
          </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 ${
                  storageHealth?.healthy ? "bg-green-400" : "bg-red-400"
                } ${isLoading ? "animate-pulse" : ""}`}
              ></div>
              <span className="text-white">存儲服務狀態</span>
            </div>
            <div className="flex items-center gap-2">
              <Badge
                className={storageHealth?.healthy ? "bg-green-500/20 text-green-200" : "bg-red-500/20 text-red-200"}
              >
                {isLoading ? "檢查中..." : storageHealth?.healthy ? "正常運行" : "服務異常"}
              </Badge>
              <Button
                variant="ghost"
                size="sm"
                onClick={checkStorageHealth}
                disabled={isLoading}
                className="text-blue-200 hover:text-white"
              >
                <RefreshCw className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`} />
              </Button>
            </div>
          </div>

          {/* 存儲統計 */}
          {storageHealth?.stats && (
            <div className="grid grid-cols-2 gap-4">
              <div className="p-4 bg-slate-700/50 rounded-lg text-center">
                <div className="text-2xl font-bold text-white mb-1">{storageHealth.stats.totalFiles}</div>
                <div className="text-sm text-slate-300">圖片檔案</div>
              </div>
              <div className="p-4 bg-slate-700/50 rounded-lg text-center">
                <div className="text-2xl font-bold text-white mb-1">
                  {formatFileSize(storageHealth.stats.totalSize)}
                </div>
                <div className="text-sm text-slate-300">總使用空間</div>
              </div>
            </div>
          )}

          {/* 存儲使用進度條 */}
          {storageHealth?.stats && (
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-slate-300">存儲使用量</span>
                <span className="text-slate-400">{formatFileSize(storageHealth.stats.totalSize)} / 1GB (免費額度)</span>
              </div>
              <Progress
                value={Math.min((storageHealth.stats.totalSize / (1024 * 1024 * 1024)) * 100, 100)}
                className="w-full"
              />
            </div>
          )}

          {/* 錯誤訊息 */}
          {storageHealth?.error && (
            <Alert className="border-red-500/50 bg-red-900/20">
              <AlertTriangle className="h-4 w-4 text-red-400" />
              <AlertDescription className="text-red-100">
                <div className="space-y-1">
                  <p>存儲服務檢查失敗：</p>
                  <p className="text-sm">{storageHealth.error}</p>
                </div>
              </AlertDescription>
            </Alert>
          )}
        </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">
            <HardDrive className="w-6 h-6 text-purple-400" />
            存儲管理
          </CardTitle>
          <CardDescription className="text-blue-200">管理和優化雲端圖片存儲</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="p-4 bg-slate-700/50 rounded-lg">
            <h4 className="text-white font-semibold mb-2 flex items-center gap-2">
              <Trash2 className="w-4 h-4 text-orange-400" />
              清理孤立圖片
            </h4>
            <p className="text-slate-300 text-sm mb-3">清理沒有被任何困擾案例引用的圖片檔案，釋放存儲空間。</p>
            <Button
              onClick={cleanupOrphanedImages}
              disabled={isLoading || !storageHealth?.healthy}
              className="bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 text-white"
            >
              <Trash2 className="w-4 h-4 mr-2" />
              {isLoading ? "清理中..." : "開始清理"}
            </Button>
          </div>

          {/* 清理結果 */}
          {cleanupResult && (
            <Alert
              className={`${
                cleanupResult.error ? "border-red-500/50 bg-red-900/20" : "border-green-500/50 bg-green-900/20"
              }`}
            >
              {cleanupResult.error ? (
                <AlertTriangle className="h-4 w-4 text-red-400" />
              ) : (
                <CheckCircle className="h-4 w-4 text-green-400" />
              )}
              <AlertDescription className={cleanupResult.error ? "text-red-100" : "text-green-100"}>
                {cleanupResult.error ? (
                  <div>
                    <p>清理過程中發生錯誤：</p>
                    <p className="text-sm mt-1">{cleanupResult.error}</p>
                  </div>
                ) : (
                  <div>
                    <p>清理完成！</p>
                    <p className="text-sm mt-1">
                      {cleanupResult.cleaned > 0
                        ? `成功清理了 ${cleanupResult.cleaned} 個孤立的圖片檔案`
                        : "沒有發現需要清理的孤立圖片"}
                    </p>
                  </div>
                )}
              </AlertDescription>
            </Alert>
          )}

          {/* 存儲最佳實踐 */}
          <div className="p-4 bg-blue-900/20 border border-blue-600/30 rounded-lg">
            <h4 className="text-blue-200 font-semibold mb-2">💡 存儲最佳實踐</h4>
            <ul className="text-blue-100 text-sm space-y-1">
              <li>• 定期清理孤立圖片以節省存儲空間</li>
              <li>• 上傳前壓縮大圖片以減少存儲使用量</li>
              <li>• 避免上傳重複的圖片內容</li>
              <li>• 使用適當的圖片格式（WebP 通常最優）</li>
            </ul>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}