"use client"

import { useState, useEffect, useCallback } from "react"
import { useSession } from "next-auth/react"
import { formatPence } from "@/lib/utils"
import {
  Loader2, Copy, Check, MessageCircle, Mail, Trophy,
  Plus, Link2, Download, QrCode as QrCodeIcon
} from "lucide-react"
import { QRCodeCanvas } from "@/components/qr-code"

/**
 * /dashboard/community — Community Leader's dashboard
 *
 * Who is the Community Leader?
 * Imam Yusuf. Sister Mariam. Uncle Tariq. The person who rallies
 * their mosque, WhatsApp group, neighbourhood to pledge.
 *
 * Their mental model:
 * 1. "How are WE doing?" → their community's stats vs the whole appeal
 * 2. "I need to share the link" → share buttons, front and center
 * 3. "Who from my group has pledged?" → simple donor list
 * 4. "How do we compare?" → leaderboard across all communities
 *
 * What they DON'T see:
 * - Bank details, WhatsApp settings, charity config
 * - Other communities' donor details
 * - Ability to confirm payments or change statuses
 * - Full reconciliation
 *
 * This is a SCOPED, READ-MOSTLY view.
 * They can create new links and share. That's it.
 */

interface EventSummary {
  id: string; name: string; totalPledged: number; totalCollected: number; pledgeCount: number
}

interface SourceInfo {
  id: string; label: string; code: string; volunteerName: string | null
  scanCount: number; pledgeCount: number; totalPledged: number; totalCollected?: number
}

interface PledgeInfo {
  id: string; donorName: string | null; amountPence: number; status: string; createdAt: string
}

const STATUS: Record<string, { label: string; color: string; bg: string }> = {
  new:       { label: "Waiting",    color: "text-gray-600",   bg: "bg-gray-100" },
  initiated: { label: "Said paid",  color: "text-[#F59E0B]",  bg: "bg-[#F59E0B]/10" },
  paid:      { label: "Received ✓", color: "text-[#16A34A]",  bg: "bg-[#16A34A]/10" },
  overdue:   { label: "Overdue",    color: "text-[#DC2626]",  bg: "bg-[#DC2626]/10" },
  cancelled: { label: "Cancelled",  color: "text-gray-400",   bg: "bg-gray-50" },
}

export default function CommunityPage() {
  const { data: session } = useSession()
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const user = session?.user as any

  const [events, setEvents] = useState<EventSummary[]>([])
  const [allSources, setAllSources] = useState<SourceInfo[]>([])
  const [mySources, setMySources] = useState<SourceInfo[]>([])
  const [myPledges, setMyPledges] = useState<PledgeInfo[]>([])
  const [loading, setLoading] = useState(true)
  const [copiedCode, setCopiedCode] = useState<string | null>(null)
  const [showQr, setShowQr] = useState<string | null>(null)

  // Create link
  const [newLinkName, setNewLinkName] = useState("")
  const [creating, setCreating] = useState(false)
  const [showCreate, setShowCreate] = useState(false)

  const baseUrl = typeof window !== "undefined" ? window.location.origin : ""
  const userName = user?.name || user?.email?.split("@")[0] || ""

  const loadData = useCallback(async () => {
    try {
      const [evRes, dashRes] = await Promise.all([
        fetch("/api/events").then(r => r.json()),
        fetch("/api/dashboard").then(r => r.json()),
      ])

      if (Array.isArray(evRes)) {
        setEvents(evRes)
        // Load sources for first event
        if (evRes.length > 0) {
          const srcRes = await fetch(`/api/events/${evRes[0].id}/qr`).then(r => r.json())
          if (Array.isArray(srcRes)) {
            setAllSources(srcRes)
            // Filter to "my" sources — those with this user's name or created by this user
            const mine = srcRes.filter((s: SourceInfo) =>
              s.volunteerName?.toLowerCase().includes(userName.toLowerCase()) ||
              s.label.toLowerCase().includes(userName.toLowerCase())
            )
            setMySources(mine.length > 0 ? mine : srcRes.slice(0, 3)) // fallback: show first 3
          }
        }
      }

      // Get pledges (scoped view — show recent)
      if (dashRes.pledges) {
        setMyPledges(dashRes.pledges.slice(0, 20))
      }
    } catch { /* */ }
    setLoading(false)
  }, [userName])

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

  // Actions
  const copyLink = async (code: string) => {
    await navigator.clipboard.writeText(`${baseUrl}/p/${code}`)
    setCopiedCode(code)
    setTimeout(() => setCopiedCode(null), 2000)
  }

  const shareWhatsApp = (code: string, label: string) => {
    window.open(`https://wa.me/?text=${encodeURIComponent(`Assalamu Alaikum! Please pledge here 🤲\n\n${label}\n${baseUrl}/p/${code}`)}`, "_blank")
  }

  const createLink = async () => {
    if (!newLinkName.trim() || events.length === 0) return
    setCreating(true)
    try {
      const res = await fetch(`/api/events/${events[0].id}/qr`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ label: newLinkName.trim(), volunteerName: userName }),
      })
      if (res.ok) {
        const src = await res.json()
        const newSrc = { ...src, scanCount: 0, pledgeCount: 0, totalPledged: 0, totalCollected: 0 }
        setMySources(prev => [newSrc, ...prev])
        setAllSources(prev => [newSrc, ...prev])
        setNewLinkName("")
        setShowCreate(false)
      }
    } catch { /* */ }
    setCreating(false)
  }

  if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="h-6 w-6 text-[#1E40AF] animate-spin" /></div>

  const activeEvent = events[0]
  const myTotal = mySources.reduce((s, l) => s + l.totalPledged, 0)
  const myPledgeCount = mySources.reduce((s, l) => s + l.pledgeCount, 0)
  const appealTotal = activeEvent?.totalPledged || 0
  const myPct = appealTotal > 0 ? Math.round((myTotal / appealTotal) * 100) : 0

  // Leaderboard (all sources, sorted by amount)
  const leaderboard = [...allSources].sort((a, b) => b.totalPledged - a.totalPledged)

  return (
    <div className="space-y-6">

      {/* ── Header: "How are WE doing?" ── */}
      <div>
        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
          {activeEvent?.name || "Your community"}
        </p>
        <h1 className="text-3xl font-black text-[#111827] tracking-tight">
          Welcome back, {userName.split(" ")[0] || "Leader"}
        </h1>
      </div>

      {/* ── My community's stats vs the whole appeal ── */}
      <div className="bg-[#111827] p-6">
        <div className="grid grid-cols-2 gap-px bg-gray-700">
          <div className="bg-[#111827] p-4">
            <p className="text-[10px] text-gray-500">Your community</p>
            <p className="text-3xl font-black text-white tracking-tight">{formatPence(myTotal)}</p>
            <p className="text-xs text-gray-400">{myPledgeCount} pledges from {mySources.length} links</p>
          </div>
          <div className="bg-[#111827] p-4">
            <p className="text-[10px] text-gray-500">Whole appeal</p>
            <p className="text-3xl font-black text-gray-400 tracking-tight">{formatPence(appealTotal)}</p>
            <p className="text-xs text-gray-400">{activeEvent?.pledgeCount || 0} total pledges</p>
          </div>
        </div>
        {appealTotal > 0 && (
          <div className="mt-4 pt-3 border-t border-gray-800">
            <div className="flex justify-between text-xs text-gray-500 mb-2">
              <span>Your contribution</span>
              <span className="font-bold text-white">{myPct}%</span>
            </div>
            <div className="h-2 bg-gray-800 overflow-hidden">
              <div className="h-full bg-[#4ADE80] transition-all duration-700" style={{ width: `${myPct}%` }} />
            </div>
          </div>
        )}
      </div>

      {/* ── Your links + share ── */}
      <div className="flex items-center justify-between">
        <h2 className="text-sm font-bold text-[#111827]">Your links ({mySources.length})</h2>
        <button
          onClick={() => setShowCreate(true)}
          className="bg-[#111827] px-3 py-1.5 text-xs font-bold text-white hover:bg-gray-800 transition-colors flex items-center gap-1.5"
        >
          <Plus className="h-3.5 w-3.5" /> New link
        </button>
      </div>

      {showCreate && (
        <div className="bg-white border-2 border-[#1E40AF] p-4 space-y-3">
          <p className="text-sm font-bold text-[#111827]">Create a link for your community</p>
          <div className="flex gap-2">
            <input
              value={newLinkName}
              onChange={e => setNewLinkName(e.target.value)}
              placeholder='e.g. "Friday Halaqa", "Sisters WhatsApp", "Youth Group"'
              autoFocus
              onKeyDown={e => e.key === "Enter" && createLink()}
              className="flex-1 h-11 px-4 border-2 border-gray-200 text-sm placeholder:text-gray-300 focus:border-[#1E40AF] outline-none"
            />
            <button onClick={createLink} disabled={!newLinkName.trim() || creating} className="bg-[#111827] px-5 h-11 text-sm font-bold text-white hover:bg-gray-800 disabled:opacity-40">
              {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : "Create"}
            </button>
          </div>
          <button onClick={() => { setShowCreate(false); setNewLinkName("") }} className="text-xs text-gray-400 hover:text-gray-600">Cancel</button>
        </div>
      )}

      {mySources.length === 0 ? (
        <div className="border-2 border-dashed border-gray-200 p-8 text-center">
          <Link2 className="h-8 w-8 text-gray-300 mx-auto mb-3" />
          <p className="text-sm font-bold text-[#111827]">No links yet</p>
          <p className="text-xs text-gray-500 mt-1">Create a link to start collecting pledges for your community</p>
        </div>
      ) : (
        <div className="space-y-3">
          {mySources.map(src => {
            const url = `${baseUrl}/p/${src.code}`
            const isCopied = copiedCode === src.code
            const isQrOpen = showQr === src.code

            return (
              <div key={src.id} className="bg-white border border-gray-200">
                <div className="p-4">
                  <div className="flex items-start justify-between gap-3 mb-3">
                    <p className="text-sm font-bold text-[#111827]">{src.label}</p>
                    <div className="flex gap-px bg-gray-200 shrink-0">
                      <div className="bg-white px-2.5 py-1.5 text-center">
                        <p className="text-sm font-black text-[#111827]">{src.pledgeCount}</p>
                        <p className="text-[8px] text-gray-500">pledges</p>
                      </div>
                      <div className="bg-white px-2.5 py-1.5 text-center">
                        <p className="text-sm font-black text-[#16A34A]">{formatPence(src.totalPledged)}</p>
                        <p className="text-[8px] text-gray-500">raised</p>
                      </div>
                    </div>
                  </div>

                  <div className="bg-[#F9FAFB] px-3 py-2 mb-3">
                    <p className="text-xs font-mono text-gray-500 truncate">{url}</p>
                  </div>

                  <div className="grid grid-cols-4 gap-1.5">
                    <button onClick={() => copyLink(src.code)} className={`py-2.5 text-xs font-bold transition-colors flex items-center justify-center gap-1.5 ${isCopied ? "bg-[#16A34A] text-white" : "bg-[#111827] text-white hover:bg-gray-800"}`}>
                      {isCopied ? <><Check className="h-3.5 w-3.5" /> Copied</> : <><Copy className="h-3.5 w-3.5" /> Copy</>}
                    </button>
                    <button onClick={() => shareWhatsApp(src.code, src.label)} className="bg-[#25D366] text-white py-2.5 text-xs font-bold hover:bg-[#25D366]/90 transition-colors flex items-center justify-center gap-1.5">
                      <MessageCircle className="h-3.5 w-3.5" /> WhatsApp
                    </button>
                    <button onClick={() => window.open(`mailto:?subject=${encodeURIComponent(`Pledge: ${src.label}`)}&body=${encodeURIComponent(`Pledge here:\n${url}`)}`)} className="border border-gray-200 py-2.5 text-xs font-bold hover:bg-gray-50 transition-colors flex items-center justify-center gap-1.5">
                      <Mail className="h-3.5 w-3.5" /> Email
                    </button>
                    <button onClick={() => setShowQr(isQrOpen ? null : src.code)} className="border border-gray-200 py-2.5 text-xs font-bold hover:bg-gray-50 transition-colors flex items-center justify-center gap-1.5">
                      <QrCodeIcon className="h-3.5 w-3.5" /> QR
                    </button>
                  </div>

                  {isQrOpen && (
                    <div className="mt-3 pt-3 border-t border-gray-100 flex flex-col items-center gap-2">
                      <div className="bg-white p-2 border border-gray-100"><QRCodeCanvas url={url} size={160} /></div>
                      <a href={`/api/events/${events[0]?.id}/qr/${src.id}/download?code=${src.code}`} download className="text-[10px] font-semibold text-[#1E40AF] hover:underline flex items-center gap-1">
                        <Download className="h-3 w-3" /> Download QR image
                      </a>
                    </div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      )}

      {/* ── Leaderboard — how do we compare? ── */}
      {leaderboard.filter(s => s.pledgeCount > 0).length >= 2 && (
        <div className="bg-white border border-gray-200">
          <div className="border-b border-gray-100 px-5 py-3">
            <h3 className="text-sm font-bold text-[#111827] flex items-center gap-1.5">
              <Trophy className="h-4 w-4 text-[#F59E0B]" /> How communities compare
            </h3>
          </div>
          <div className="divide-y divide-gray-50">
            {leaderboard.filter(s => s.pledgeCount > 0).slice(0, 10).map((src, i) => {
              const isMine = mySources.some(m => m.id === src.id)
              const medals = ["bg-[#F59E0B]", "bg-gray-400", "bg-[#CD7F32]"]
              return (
                <div key={src.id} className={`px-5 py-3 flex items-center gap-3 ${isMine ? "bg-[#1E40AF]/5" : ""}`}>
                  <div className={`w-6 h-6 flex items-center justify-center text-[10px] font-black text-white ${medals[i] || "bg-gray-200 text-gray-500"}`}>
                    {i + 1}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <p className="text-sm font-medium text-[#111827] truncate">{src.volunteerName || src.label}</p>
                      {isMine && <span className="text-[9px] font-bold text-[#1E40AF] bg-[#1E40AF]/10 px-1 py-0.5">You</span>}
                    </div>
                    <p className="text-[10px] text-gray-500">{src.pledgeCount} pledges</p>
                  </div>
                  <p className="text-sm font-black text-[#111827]">{formatPence(src.totalPledged)}</p>
                </div>
              )
            })}
          </div>
        </div>
      )}

      {/* ── Recent pledges (read-only, no actions) ── */}
      {myPledges.length > 0 && (
        <div className="bg-white border border-gray-200">
          <div className="border-b border-gray-100 px-5 py-3">
            <h3 className="text-sm font-bold text-[#111827]">Recent pledges</h3>
          </div>
          <div className="divide-y divide-gray-50">
            {myPledges.slice(0, 10).map(p => {
              const sl = STATUS[p.status] || STATUS.new
              const days = Math.floor((Date.now() - new Date(p.createdAt).getTime()) / 86400000)
              const when = days === 0 ? "Today" : days === 1 ? "Yesterday" : `${days}d ago`
              return (
                <div key={p.id} className="px-5 py-3 flex items-center gap-3">
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-[#111827] truncate">{p.donorName || "Anonymous"}</p>
                    <p className="text-[10px] text-gray-500">{when}</p>
                  </div>
                  <div className="text-right shrink-0">
                    <p className="text-sm font-black text-[#111827]">{formatPence(p.amountPence)}</p>
                    <span className={`text-[9px] font-bold px-1.5 py-0.5 ${sl.bg} ${sl.color}`}>{sl.label}</span>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      )}
    </div>
  )
}