'use client'

import { useState, useEffect, useRef } from 'react'
import { supabase } from '@/lib/supabase'

const monthlyCosts = [
  { item: "Supabase（資料庫 + 儲存）", amount: "NT$1,100", note: "依實際用量，每月帳單略有浮動" },
  { item: "Claude Code（AI 開發工具）", amount: "NT$1,600", note: "月費 $100 USD，SnapPath 佔約 50%" },
  { item: "Apple Developer Program", amount: "NT$264", note: "$99 USD / 年攤提" },
]

const exhibitionBudget = [
  { item: "週末兩天展場租金", amount: "NT$8,000", note: "台中質感空間" },
  { item: "20 幅 A3 攝影作品輸出", amount: "NT$5,000", note: "實體化你的街拍作品" },
  { item: "20 幅 A3 質感展覽畫框", amount: "NT$9,000", note: "讓作品掛上展牆" },
]

const MONTHLY_GOAL = 2964
const EXHIBITION_GOAL = 22000
const totalMonthly = "NT$2,964"

const RECUR_PUBLISHABLE_KEY = 'pk_live_36287edb05416c69634f245d8f76083864a798d065076f1f3562609b165eb6dc'

const SPONSOR_TIERS = [
  { label: 'NT$100', amount: 100, productId: 'dwahp7b2ynj0vx8ixemvj1xh' },
  { label: 'NT$500', amount: 500, productId: 'rnc333r2nmzzb142kjsiwpsu' },
  { label: 'NT$1,000', amount: 1000, productId: 'koxj83saf0xjtzmrw9uod1g6' },
]

const MONTHLY_TIERS = [
  { label: 'NT$100/月', amount: 100, productId: 'crrdkly4y2ufymyy0wu70aqh' },
  { label: 'NT$300/月', amount: 300, productId: 'mzu7811qwz8so3js7lxrsrtz' },
  { label: 'NT$500/月', amount: 500, productId: 'jh0541tdye8fh3xseh54akwy' },
]

interface RecurInstance {
  redirectToCheckout: (options: {
    productId: string
    successUrl: string
    cancelUrl: string
    customerEmail?: string
    metadata?: Record<string, string>
  }) => Promise<void>
}

declare global {
  interface Window {
    RecurCheckout?: {
      init: (config: { publishableKey: string }) => RecurInstance
    }
  }
}

interface Sponsorship {
  id: number
  nickname: string
  amount: number
  message: string | null
  fund_type: 'general' | 'exhibition'
  created_at: string
}

export default function SponsorPage() {
  // Progress bar + sponsor wall data
  const [sponsors, setSponsors] = useState<Sponsorship[]>([])
  const [totalRaised, setTotalRaised] = useState(0)
  const [loadingSponsors, setLoadingSponsors] = useState(true)

  // RECUR SDK
  const recurRef = useRef<RecurInstance | null>(null)
  const [recurReady, setRecurReady] = useState(false)
  const [checkingOut, setCheckingOut] = useState<string | null>(null)
  const [checkoutError, setCheckoutError] = useState<string | null>(null)

  // Form state
  const [nickname, setNickname] = useState('')
  const [email, setEmail] = useState('')
  const [amount, setAmount] = useState('')
  const [message, setMessage] = useState('')
  const [fundType, setFundType] = useState<'general' | 'exhibition'>('general')
  const [submitting, setSubmitting] = useState(false)
  const [submitResult, setSubmitResult] = useState<{ success: boolean; message: string } | null>(null)

  // Online payment fund type
  const [onlineFundType, setOnlineFundType] = useState<'general' | 'exhibition'>('general')

  // Load RECUR SDK
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://unpkg.com/recur-tw@0.13.2/dist/recur.umd.js'
    script.async = true
    script.onload = () => {
      if (window.RecurCheckout) {
        recurRef.current = window.RecurCheckout.init({ publishableKey: RECUR_PUBLISHABLE_KEY })
        setRecurReady(true)
      }
    }
    document.head.appendChild(script)
    return () => { document.head.removeChild(script) }
  }, [])

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

  async function fetchSponsors() {
    try {
      setLoadingSponsors(true)
      const { data, error } = await supabase
        .from('sponsorships')
        .select('*')
        .eq('status', 'confirmed')
        .order('created_at', { ascending: false })

      if (error) throw error

      const list = data || []
      setSponsors(list)
      setTotalRaised(list.reduce((sum, s) => sum + s.amount, 0))
    } catch {
      // Silently fail — progress bar shows 0
    } finally {
      setLoadingSponsors(false)
    }
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    const parsedAmount = parseInt(amount, 10)
    if (!parsedAmount || parsedAmount <= 0) {
      setSubmitResult({ success: false, message: '請輸入有效金額' })
      return
    }

    setSubmitting(true)
    setSubmitResult(null)

    try {
      const { error } = await supabase.from('sponsorships').insert({
        nickname: nickname.trim() || '匿名',
        email: email.trim() || null,
        amount: parsedAmount,
        message: message.trim() || null,
        fund_type: fundType,
      })

      if (error) throw error

      setSubmitResult({ success: true, message: '已收到匯款通知！確認後會更新進度 🙏' })
      setNickname('')
      setEmail('')
      setAmount('')
      setMessage('')
      setFundType('general')
    } catch {
      setSubmitResult({ success: false, message: '送出失敗，請稍後再試' })
    } finally {
      setSubmitting(false)
    }
  }

  async function handleCheckout(productId: string) {
    if (!recurRef.current) return
    setCheckingOut(productId)
    setCheckoutError(null)
    try {
      await recurRef.current.redirectToCheckout({
        productId,
        successUrl: `${window.location.origin}/sponsor?success=1`,
        cancelUrl: `${window.location.origin}/sponsor`,
        metadata: { fund_type: onlineFundType },
      })
    } catch (err) {
      setCheckoutError(err instanceof Error ? err.message : '付款啟動失敗')
      setCheckingOut(null)
    }
  }

  // 本月贊助金額（只計一般贊助，展覽指定的不算在營運進度）
  const now = new Date()
  const thisMonthSponsors = sponsors.filter((s) => {
    const d = new Date(s.created_at)
    return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && s.fund_type !== 'exhibition'
  })
  const thisMonthTotal = thisMonthSponsors.reduce((sum, s) => sum + s.amount, 0)

  // 展覽基金：直接指定展覽的 + 每個月一般贊助超過 2,964 的部分
  const directExhibition = sponsors
    .filter((s) => s.fund_type === 'exhibition')
    .reduce((sum, s) => sum + s.amount, 0)

  const generalSponsors = sponsors.filter((s) => s.fund_type !== 'exhibition')
  const monthlyTotals = generalSponsors.reduce<Record<string, number>>((acc, s) => {
    const d = new Date(s.created_at)
    const key = `${d.getFullYear()}-${d.getMonth()}`
    acc[key] = (acc[key] || 0) + s.amount
    return acc
  }, {})
  const overflowFund = Object.values(monthlyTotals).reduce(
    (sum, monthTotal) => sum + Math.max(0, monthTotal - MONTHLY_GOAL), 0
  )
  const exhibitionFund = directExhibition + overflowFund

  const monthlyPercentage = Math.round((thisMonthTotal / MONTHLY_GOAL) * 100)
  const monthlyBarWidth = Math.min(monthlyPercentage, 100)
  const overMonthlyGoal = monthlyPercentage > 100

  const exhibitionPercentage = Math.round((exhibitionFund / EXHIBITION_GOAL) * 100)
  const exhibitionBarWidth = Math.min(exhibitionPercentage, 100)

  // 贊助排行（用 email 累計同一人，顯示暱稱）
  const sponsorRanking = Object.values(
    sponsors.reduce<Record<string, { nickname: string; total: number }>>((acc, s) => {
      const key = (s as Sponsorship & { email?: string }).email || s.nickname
      if (!acc[key]) acc[key] = { nickname: s.nickname, total: 0 }
      acc[key].total += s.amount
      return acc
    }, {})
  ).sort((a, b) => b.total - a.total).slice(0, 5)

  return (
    <div className="bg-[#F5F5F0] min-h-screen pt-24 pb-16">
      <div className="max-w-3xl mx-auto px-4 sm:px-6">

        {/* Hero */}
        <div className="mb-12">
          <h1 className="text-3xl sm:text-4xl font-light text-[#2D2D2D] mb-4">
            從街頭到展牆
          </h1>
          <p className="text-lg text-[#D4715A] font-medium mb-6">
            一起把作品實體化
          </p>
          <div className="text-[#6B6B6B] space-y-3 text-base leading-relaxed">
            <p>SnapPath 是一個人做的街拍社群 App。沒有投資人，沒有廣告，就是一個喜歡街拍的人寫出來的東西。</p>
            <p>目前伺服器與資料庫費用全由開發者自掏腰包。為了讓 SnapPath 能長久穩定地運作下去，我開啟了這個贊助計畫。</p>
            <p>不僅如此，當我們累積到一定的能量，我想把大家在螢幕裡滑到的精采瞬間，<span className="text-[#2D2D2D] font-medium">真正掛上實體的展牆</span>。</p>
            <p className="text-[#D4715A]">每一分錢花在哪裡，你都看得到。</p>
          </div>
        </div>

        <div className="space-y-8">

          {/* === 階段一：維持運營 === */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm">
            <div className="flex items-center gap-3 mb-1">
              <span className="text-xs font-medium text-white bg-[#D4715A] px-2.5 py-1 rounded-full">階段一</span>
              <h2 className="text-xl font-medium text-[#2D2D2D]">維持運營</h2>
            </div>
            <p className="text-sm text-[#6B6B6B] mb-5">伺服器不當機，SnapPath 才能陪大家繼續在街頭按下快門</p>

            {loadingSponsors ? (
              <div className="h-8 bg-[#F5F5F0] rounded-full animate-pulse" />
            ) : (
              <>
                <div className="relative h-8 bg-[#F5F5F0] rounded-full overflow-hidden">
                  <div
                    className={`h-full rounded-full transition-all duration-700 ease-out ${
                      overMonthlyGoal
                        ? 'bg-gradient-to-r from-[#D4715A] to-[#E8A87C]'
                        : 'bg-[#D4715A]'
                    }`}
                    style={{ width: `${monthlyBarWidth}%` }}
                  />
                  {monthlyBarWidth > 15 && (
                    <span className="absolute inset-0 flex items-center justify-center text-sm font-medium text-white mix-blend-difference">
                      {monthlyPercentage}%
                    </span>
                  )}
                </div>
                <div className="flex items-center justify-between mt-3 text-sm">
                  <span className="text-[#6B6B6B]">
                    本月已收到 <span className="text-[#2D2D2D] font-medium">NT${thisMonthTotal.toLocaleString()}</span>
                  </span>
                  <span className="text-[#6B6B6B]">
                    目標 <span className="text-[#2D2D2D] font-medium">{totalMonthly} / 月</span>
                  </span>
                </div>
                {overMonthlyGoal && (
                  <p className="text-xs text-[#D4715A] mt-2">
                    超過目標！多出的 NT${(thisMonthTotal - MONTHLY_GOAL).toLocaleString()} 納入展覽基金
                  </p>
                )}
              </>
            )}
          </div>

          {/* 每月營運成本 */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm">
            <h2 className="text-xl font-medium text-[#2D2D2D] mb-6">每月營運成本</h2>
            <div className="space-y-4">
              {monthlyCosts.map((cost) => (
                <div key={cost.item} className="flex items-start justify-between gap-4 py-3 border-b border-[#E5E5E0] last:border-0">
                  <div className="flex-1">
                    <div className="text-[#2D2D2D] font-medium text-sm">{cost.item}</div>
                    <div className="text-[#6B6B6B] text-xs mt-1">{cost.note}</div>
                  </div>
                  <div className="text-[#2D2D2D] font-medium whitespace-nowrap">{cost.amount}</div>
                </div>
              ))}
            </div>
            <div className="flex items-center justify-between mt-6 pt-4 border-t-2 border-[#2D2D2D]">
              <span className="text-[#2D2D2D] font-medium">每月合計</span>
              <span className="text-xl font-medium text-[#D4715A]">{totalMonthly}</span>
            </div>
            <p className="text-xs text-[#6B6B6B] mt-4">
              * Google Play 開發者帳號為一次性費用 $25 USD，已付清。Vercel 網站託管目前使用免費方案。
            </p>
          </div>

          {/* === 階段二：展覽里程碑 === */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm border-2 border-[#D4715A]/20">
            <div className="flex items-center gap-3 mb-1">
              <span className="text-xs font-medium text-white bg-[#2D2D2D] px-2.5 py-1 rounded-full">階段二</span>
              <h2 className="text-xl font-medium text-[#2D2D2D]">SnapPath 首場實體快閃攝影展</h2>
            </div>
            <p className="text-sm text-[#6B6B6B] mb-5">可直接指定贊助展覽基金，或由一般贊助超過營運費用的部分自動存入。累積達 NT$22,000 即啟動！</p>

            {/* 展覽進度條 */}
            {loadingSponsors ? (
              <div className="h-6 bg-[#F5F5F0] rounded-full animate-pulse" />
            ) : (
              <>
                <div className="relative h-6 bg-[#F5F5F0] rounded-full overflow-hidden">
                  <div
                    className="h-full rounded-full transition-all duration-700 ease-out bg-gradient-to-r from-[#2D2D2D] to-[#555]"
                    style={{ width: `${exhibitionBarWidth}%` }}
                  />
                  {exhibitionBarWidth > 12 && (
                    <span className="absolute inset-0 flex items-center justify-center text-xs font-medium text-white mix-blend-difference">
                      {exhibitionPercentage}%
                    </span>
                  )}
                </div>
                <div className="flex items-center justify-between mt-3 text-sm">
                  <span className="text-[#6B6B6B]">
                    展覽基金 <span className="text-[#2D2D2D] font-medium">NT${exhibitionFund.toLocaleString()}</span>
                  </span>
                  <span className="text-[#6B6B6B]">
                    解鎖 <span className="text-[#2D2D2D] font-medium">NT${EXHIBITION_GOAL.toLocaleString()}</span>
                  </span>
                </div>
              </>
            )}

            {/* 展覽預算 */}
            <div className="mt-6 pt-6 border-t border-[#E5E5E0]">
              <h3 className="text-sm font-medium text-[#2D2D2D] mb-3">預算公開透明</h3>
              <div className="space-y-2">
                {exhibitionBudget.map((item) => (
                  <div key={item.item} className="flex items-center justify-between text-sm">
                    <div>
                      <span className="text-[#2D2D2D]">{item.item}</span>
                      <span className="text-[#6B6B6B] text-xs ml-2">{item.note}</span>
                    </div>
                    <span className="text-[#2D2D2D] font-medium">{item.amount}</span>
                  </div>
                ))}
              </div>
              <div className="flex items-center justify-between mt-3 pt-3 border-t border-[#E5E5E0]">
                <span className="text-[#2D2D2D] font-medium text-sm">展覽總計</span>
                <span className="text-[#D4715A] font-medium">NT$22,000</span>
              </div>
            </div>
          </div>

          {/* === 贊助回饋 === */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm">
            <h2 className="text-xl font-medium text-[#2D2D2D] mb-6">贊助回饋</h2>
            <div className="space-y-4">
              {/* 前五名保障 */}
              <div className="bg-[#2D2D2D] rounded-xl p-5 text-white">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-sm">🏆</span>
                  <h3 className="font-medium">累計贊助前 5 名 — 展覽保障名額</h3>
                </div>
                <p className="text-sm text-gray-300">你的攝影作品將保障入選展出，掛上實體展牆。從贊助者變成展覽的一份子。</p>
              </div>
              {/* 500 元以上 */}
              <div className="bg-[#F5F5F0] rounded-xl p-5">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-sm">🎁</span>
                  <h3 className="font-medium text-[#2D2D2D]">單筆或累計超過 NT$500</h3>
                </div>
                <ul className="text-sm text-[#6B6B6B] space-y-1.5 mt-2">
                  <li className="flex items-start gap-2">
                    <span className="text-[#D4715A]">•</span>
                    <span>展覽「感謝牆」署名 — 成為共同策展人</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#D4715A]">•</span>
                    <span>App 內「初代贊助者」專屬徽章</span>
                  </li>
                </ul>
              </div>
            </div>

            {/* 目前贊助排行 */}
            {sponsorRanking.length > 0 && (
              <div className="mt-6 pt-6 border-t border-[#E5E5E0]">
                <h3 className="text-sm font-medium text-[#2D2D2D] mb-3">展覽保障名額排行</h3>
                <div className="space-y-2">
                  {sponsorRanking.map((s, i) => (
                    <div key={s.nickname} className="flex items-center justify-between text-sm">
                      <div className="flex items-center gap-2">
                        <span className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold ${
                          i < 5 ? 'bg-[#D4715A] text-white' : 'bg-[#E5E5E0] text-[#6B6B6B]'
                        }`}>{i + 1}</span>
                        <span className="text-[#2D2D2D]">{s.nickname}</span>
                      </div>
                      <span className="text-[#D4715A] font-medium">NT${s.total.toLocaleString()}</span>
                    </div>
                  ))}
                </div>
                {sponsorRanking.length < 5 && (
                  <p className="text-xs text-[#6B6B6B] mt-3">還有 {5 - sponsorRanking.length} 個保障名額等你來拿</p>
                )}
              </div>
            )}
          </div>

          {/* 線上贊助 */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm relative">
            <h2 className="text-xl font-medium text-[#2D2D2D] mb-2">線上贊助</h2>
            <p className="text-sm text-[#6B6B6B] mb-4">選擇金額，信用卡線上付款</p>

            <div className="flex gap-2 mb-5">
              <button
                onClick={() => setOnlineFundType('general')}
                className={`flex-1 py-2.5 rounded-xl text-sm font-medium border-2 transition-colors ${onlineFundType === 'general' ? 'bg-[#D4715A] text-white border-[#D4715A]' : 'bg-[#F5F5F0] text-[#6B6B6B] border-[#E5E5E0]'}`}
              >
                由 SnapPath 分配
              </button>
              <button
                onClick={() => setOnlineFundType('exhibition')}
                className={`flex-1 py-2.5 rounded-xl text-sm font-medium border-2 transition-colors ${onlineFundType === 'exhibition' ? 'bg-[#D4715A] text-white border-[#D4715A]' : 'bg-[#F5F5F0] text-[#6B6B6B] border-[#E5E5E0]'}`}
              >
                指定展覽基金
              </button>
            </div>
            <div className="grid grid-cols-3 gap-3">
              {SPONSOR_TIERS.map((tier) => (
                <button
                  key={tier.productId}
                  onClick={() => handleCheckout(tier.productId)}
                  disabled={checkingOut === tier.productId}
                  className="px-4 py-4 rounded-xl text-sm font-medium border-2 bg-[#F5F5F0] text-[#2D2D2D] border-[#E5E5E0] text-center hover:border-[#D4715A] hover:text-[#D4715A] transition-colors disabled:opacity-50"
                >
                  {checkingOut === tier.productId ? '跳轉中...' : tier.label}
                </button>
              ))}
            </div>
            {checkoutError && <p className="text-xs text-red-500 mt-3">{checkoutError}</p>}
            <p className="text-xs text-[#999] mt-4">線上付款含 2.4% 金流手續費。想 100% 到帳？可用下方匯款方式。</p>
          </div>

          {/* 定期定額贊助 */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm relative">
            <h2 className="text-xl font-medium text-[#2D2D2D] mb-2">定期定額贊助</h2>
            <p className="text-sm text-[#6B6B6B] mb-5">每月自動扣款，持續支持 SnapPath 運營</p>

            <div className="grid grid-cols-3 gap-3">
              {MONTHLY_TIERS.map((tier) => (
                <button
                  key={tier.productId}
                  onClick={() => handleCheckout(tier.productId)}
                  disabled={checkingOut === tier.productId}
                  className="px-4 py-4 rounded-xl text-sm font-medium border-2 bg-[#F5F5F0] text-[#2D2D2D] border-[#E5E5E0] text-center hover:border-[#D4715A] hover:text-[#D4715A] transition-colors disabled:opacity-50"
                >
                  {checkingOut === tier.productId ? '跳轉中...' : tier.label}
                </button>
              ))}
            </div>
            <p className="text-xs text-[#999] mt-4">可隨時取消，不綁約。透過信用卡每月自動扣款。</p>
          </div>

          {/* 直接匯款 */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm">
            <h2 className="text-xl font-medium text-[#2D2D2D] mb-2">直接匯款</h2>
            <p className="text-sm text-[#6B6B6B] mb-6">零手續費，100% 到帳</p>
            <div className="bg-[#F5F5F0] rounded-xl p-5">
              <div className="text-sm text-[#2D2D2D] space-y-2">
                <p>銀行：國泰世華（013）</p>
                <p>帳號：699-506-421-326</p>
                <p>戶名：SnapPath</p>
              </div>
              <p className="text-xs text-[#6B6B6B] mt-4">
                匯款後請填寫下方表單通知我們，方便確認入帳
              </p>
            </div>
          </div>

          {/* 匯款通知表單 */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm">
            <h2 className="text-xl font-medium text-[#2D2D2D] mb-2">匯款通知</h2>
            <p className="text-sm text-[#6B6B6B] mb-6">匯款後填寫此表單，我們確認入帳後會更新進度</p>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-[#2D2D2D] mb-1">暱稱</label>
                <input
                  type="text"
                  value={nickname}
                  onChange={(e) => setNickname(e.target.value)}
                  placeholder="選填，預設為「匿名」"
                  className="w-full px-4 py-3 bg-[#F5F5F0] border border-[#E5E5E0] rounded-xl text-[#2D2D2D] text-sm placeholder:text-[#999] focus:outline-none focus:border-[#D4715A] focus:ring-1 focus:ring-[#D4715A] transition-colors"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-[#2D2D2D] mb-1">
                  Email <span className="text-[#D4715A]">*</span>
                </label>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="用於寄送感謝函及累計贊助紀錄"
                  required
                  className="w-full px-4 py-3 bg-[#F5F5F0] border border-[#E5E5E0] rounded-xl text-[#2D2D2D] text-sm placeholder:text-[#999] focus:outline-none focus:border-[#D4715A] focus:ring-1 focus:ring-[#D4715A] transition-colors"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-[#2D2D2D] mb-1">
                  金額 <span className="text-[#D4715A]">*</span>
                </label>
                <div className="relative">
                  <span className="absolute left-4 top-1/2 -translate-y-1/2 text-[#6B6B6B] text-sm">NT$</span>
                  <input
                    type="number"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    placeholder="輸入金額"
                    required
                    min="1"
                    className="w-full pl-14 pr-4 py-3 bg-[#F5F5F0] border border-[#E5E5E0] rounded-xl text-[#2D2D2D] text-sm placeholder:text-[#999] focus:outline-none focus:border-[#D4715A] focus:ring-1 focus:ring-[#D4715A] transition-colors"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-[#2D2D2D] mb-1">贊助用途</label>
                <div className="flex gap-2">
                  <button
                    type="button"
                    onClick={() => setFundType('general')}
                    className={`flex-1 py-2.5 rounded-xl text-sm font-medium transition-colors border-2 ${
                      fundType === 'general'
                        ? 'bg-[#D4715A] text-white border-[#D4715A]'
                        : 'bg-[#F5F5F0] text-[#6B6B6B] border-[#E5E5E0] hover:border-[#D4715A]/50'
                    }`}
                  >
                    由 SnapPath 分配
                  </button>
                  <button
                    type="button"
                    onClick={() => setFundType('exhibition')}
                    className={`flex-1 py-2.5 rounded-xl text-sm font-medium transition-colors border-2 ${
                      fundType === 'exhibition'
                        ? 'bg-[#2D2D2D] text-white border-[#2D2D2D]'
                        : 'bg-[#F5F5F0] text-[#6B6B6B] border-[#E5E5E0] hover:border-[#2D2D2D]/50'
                    }`}
                  >
                    指定展覽基金
                  </button>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-[#2D2D2D] mb-1">留言</label>
                <textarea
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  placeholder="選填，想說什麼都可以"
                  rows={3}
                  className="w-full px-4 py-3 bg-[#F5F5F0] border border-[#E5E5E0] rounded-xl text-[#2D2D2D] text-sm placeholder:text-[#999] focus:outline-none focus:border-[#D4715A] focus:ring-1 focus:ring-[#D4715A] transition-colors resize-none"
                />
              </div>
              <button
                type="submit"
                disabled={submitting}
                className="w-full px-6 py-3 bg-[#D4715A] text-white rounded-xl text-sm font-medium hover:bg-[#B85A47] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {submitting ? '送出中...' : '送出匯款通知'}
              </button>
              {submitResult && (
                <div className={`text-sm text-center py-2 rounded-lg ${
                  submitResult.success
                    ? 'text-green-700 bg-green-50'
                    : 'text-red-700 bg-red-50'
                }`}>
                  {submitResult.message}
                </div>
              )}
            </form>
          </div>

          {/* 贊助者牆 */}
          {sponsors.length > 0 && (
            <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm">
              <h2 className="text-xl font-medium text-[#2D2D2D] mb-6">感謝這些人</h2>
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                {sponsors.map((s) => (
                  <div key={s.id} className="bg-[#F5F5F0] rounded-xl p-4 text-center">
                    <div className="text-sm font-medium text-[#2D2D2D]">{s.nickname}</div>
                    <div className="text-[#D4715A] font-medium text-sm mt-1">NT${s.amount.toLocaleString()}</div>
                    {s.message && (
                      <p className="text-xs text-[#6B6B6B] mt-2 line-clamp-2">{s.message}</p>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* 收支原則 */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm">
            <h2 className="text-xl font-medium text-[#2D2D2D] mb-4">收支原則</h2>
            <ul className="space-y-3 text-sm text-[#6B6B6B]">
              <li className="flex items-start gap-3">
                <span className="text-[#D4715A] mt-0.5">•</span>
                <span>每月公開收支報告，所有收入和支出透明可查</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-[#D4715A] mt-0.5">•</span>
                <span>品牌合作、廣告等商業收入也公開列入</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-[#D4715A] mt-0.5">•</span>
                <span>金流平台手續費公開計入支出</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-[#D4715A] mt-0.5">•</span>
                <span>超過營運目標的金額自動納入展覽基金</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-[#D4715A] mt-0.5">•</span>
                <span>最終決定權在開發者（Boris），社群提供方向建議</span>
              </li>
            </ul>
          </div>

          {/* 程式碼公開透明 */}
          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm border border-[#E5E5E0]">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-8 h-8 bg-[#F5F5F0] rounded-lg flex items-center justify-center text-base">{`</>`}</div>
              <h2 className="text-xl font-medium text-[#2D2D2D]">計算邏輯 100% 公開</h2>
            </div>
            <p className="text-sm text-[#6B6B6B] mb-5">
              進度條的數字怎麼來的？展覽基金怎麼算的？不是我們說了算 — 程式碼攤在陽光下，你可以自己驗證，或拿去問 AI。
            </p>

            {/* 計算邏輯說明 */}
            <div className="space-y-4 mb-6">
              <div className="bg-[#F5F5F0] rounded-xl p-4">
                <h3 className="text-sm font-medium text-[#2D2D2D] mb-2">營運進度條</h3>
                <p className="text-xs text-[#6B6B6B] leading-relaxed">
                  只計算當月、狀態為「已確認」、用途為「一般贊助」的金額加總，除以月目標 NT$2,964。指定展覽的贊助不會灌水到營運進度。
                </p>
              </div>
              <div className="bg-[#F5F5F0] rounded-xl p-4">
                <h3 className="text-sm font-medium text-[#2D2D2D] mb-2">展覽基金</h3>
                <p className="text-xs text-[#6B6B6B] leading-relaxed">
                  兩個來源相加：(1) 直接指定「展覽基金」的贊助全額計入；(2) 每個月一般贊助超過 NT$2,964 的溢出部分自動存入。兩筆都只算「已確認」的。
                </p>
              </div>
              <div className="bg-[#F5F5F0] rounded-xl p-4">
                <h3 className="text-sm font-medium text-[#2D2D2D] mb-2">金流手續費</h3>
                <p className="text-xs text-[#6B6B6B] leading-relaxed">
                  線上付款（信用卡）每筆扣 2.4% 手續費，由金流平台收取。例如贊助 NT$100，實收 NT$97.6。直接匯款則零手續費，100% 到帳。
                </p>
              </div>
              <div className="bg-[#F5F5F0] rounded-xl p-4">
                <h3 className="text-sm font-medium text-[#2D2D2D] mb-2">贊助者牆</h3>
                <p className="text-xs text-[#6B6B6B] leading-relaxed">
                  只顯示狀態為「已確認」的贊助紀錄。排行榜用 email 累計同一人的贊助總額。
                </p>
              </div>
            </div>

            {/* 實際程式碼 */}
            <details className="group">
              <summary className="cursor-pointer text-sm font-medium text-[#D4715A] hover:text-[#B85A47] transition-colors select-none">
                展開看實際程式碼
              </summary>
              <div className="mt-4 bg-[#1E1E1E] rounded-xl p-4 overflow-x-auto">
                <pre className="text-xs text-[#D4D4D4] leading-relaxed whitespace-pre font-mono">{`// 營運進度：只計當月 + 已確認 + 一般贊助
const thisMonthSponsors = sponsors.filter((s) => {
  const d = new Date(s.created_at)
  return d.getFullYear() === now.getFullYear()
    && d.getMonth() === now.getMonth()
    && s.fund_type !== 'exhibition'
})
const thisMonthTotal = thisMonthSponsors
  .reduce((sum, s) => sum + s.amount, 0)
const monthlyPercentage = (thisMonthTotal / 2964) * 100

// 展覽基金 = 直接指定 + 每月溢出
const directExhibition = sponsors
  .filter((s) => s.fund_type === 'exhibition')
  .reduce((sum, s) => sum + s.amount, 0)

const monthlyTotals = generalSponsors.reduce((acc, s) => {
  const key = \`\${year}-\${month}\`
  acc[key] = (acc[key] || 0) + s.amount
  return acc
}, {})
const overflowFund = Object.values(monthlyTotals)
  .reduce((sum, m) => sum + Math.max(0, m - 2964), 0)

const exhibitionFund = directExhibition + overflowFund`}</pre>
              </div>
            </details>

            {/* 下載 + AI 驗證 */}
            <div className="mt-6 pt-6 border-t border-[#E5E5E0]">
              <div className="flex flex-col sm:flex-row gap-3">
                <a
                  href="/api/source"
                  download="sponsor-page-source.tsx"
                  className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-[#F5F5F0] text-[#2D2D2D] rounded-xl text-sm font-medium hover:bg-[#E5E5E0] transition-colors border border-[#E5E5E0]"
                >
                  <span>{'<>'}</span>
                  <span>下載完整原始碼</span>
                </a>
                <button
                  onClick={() => {
                    const prompt = `請幫我審查這段贊助頁面的程式碼，確認以下幾點：\n1. 進度條的數字是否只計算「已確認」且「非展覽指定」的當月贊助？\n2. 展覽基金是否 = 直接指定展覽的金額 + 每月超過 NT$2,964 的溢出？\n3. 有沒有任何地方可以造假或灌水？\n4. 贊助者牆是否只顯示已確認的紀錄？`
                    navigator.clipboard.writeText(prompt).then(() => {
                      alert('已複製 AI 驗證 prompt！\n\n下載原始碼後，把程式碼和這段 prompt 一起貼給 ChatGPT 或 Claude 就可以驗證。')
                    }).catch(() => {
                      alert(prompt)
                    })
                  }}
                  className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-[#2D2D2D] text-white rounded-xl text-sm font-medium hover:bg-[#3D3D3D] transition-colors"
                >
                  <span>AI</span>
                  <span>複製驗證 prompt</span>
                </button>
              </div>
              <p className="text-xs text-[#999] mt-3 text-center">
                下載原始碼 + 複製 prompt，貼給 ChatGPT 或 Claude 就能幫你驗證計算邏輯
              </p>
            </div>
          </div>

          {/* Brand Partnership */}
          <div className="bg-gradient-to-br from-[#2D2D2D] to-[#3D3D3D] rounded-2xl p-6 sm:p-8 text-white">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-[#D4715A] rounded-xl flex items-center justify-center text-lg">🤝</div>
              <h3 className="text-xl font-bold">品牌合作夥伴招募</h3>
            </div>
            <p className="text-gray-300 leading-relaxed mb-4">
              SnapPath 聚集了一群熱愛攝影、喜歡街拍、在乎生活質感的創作者社群。如果你是咖啡廳、藝文空間、沖印店、相機配件品牌，歡迎與我們聊聊合作的可能性。
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-5">
              <div className="bg-white/10 rounded-xl p-4 text-center">
                <div className="text-2xl mb-1">📍</div>
                <div className="text-sm font-medium">場地合作</div>
                <div className="text-xs text-gray-400 mt-1">展覽空間交換曝光</div>
              </div>
              <div className="bg-white/10 rounded-xl p-4 text-center">
                <div className="text-2xl mb-1">🖨️</div>
                <div className="text-sm font-medium">印刷贊助</div>
                <div className="text-xs text-gray-400 mt-1">作品輸出冠名合作</div>
              </div>
              <div className="bg-white/10 rounded-xl p-4 text-center">
                <div className="text-2xl mb-1">🎁</div>
                <div className="text-sm font-medium">獎品提供</div>
                <div className="text-xs text-gray-400 mt-1">活動抽獎品牌曝光</div>
              </div>
            </div>
            <a href="mailto:snappath.app@gmail.com?subject=品牌合作洽詢" className="inline-flex items-center gap-2 bg-[#D4715A] hover:bg-[#B85A47] text-white font-medium px-6 py-3 rounded-xl transition-colors">
              <span>聯繫我們洽談合作</span>
              <span>→</span>
            </a>
          </div>

          {/* Footer note */}
          <div className="text-center text-sm text-[#6B6B6B] pt-4">
            <p>有任何問題歡迎來信 <a href="mailto:snappath.app@gmail.com" className="text-[#D4715A] hover:underline">snappath.app@gmail.com</a></p>
          </div>
        </div>
      </div>
    </div>
  )
}