"use client"

import { useState, useEffect, useCallback } from "react"
import { Phone, PhoneOff, Mic, MicOff, Volume2, VolumeX, X } from "lucide-react"
import { getSupabase } from "@/lib/supabase"
import { useWebRTCCall } from "@/hooks/useWebRTCCall"

interface Contact {
  id: string
  name: string
  phone: string
  avatar_url: string | null
}

interface VoiceCallModalProps {
  open: boolean
  onClose: () => void
}

export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
  const [contacts, setContacts] = useState<Contact[]>([])
  const [contactsLoading, setContactsLoading] = useState(false)
  const [contactsError, setContactsError] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [phoneNumber, setPhoneNumber] = useState("")
  const [phoneError, setPhoneError] = useState(false)
  const [lookupMessage, setLookupMessage] = useState<string | null>(null)
  const setLookupMessageWithReset = useCallback((msg: string | null) => {
    setLookupMessage(msg)
    if (msg !== "This phone number is not registered on the platform.") {
      setInviteUrl(null)
    }
  }, [])
  const [inviteUrl, setInviteUrl] = useState<string | null>(null)
  const [inviteLoading, setInviteLoading] = useState(false)

  const generateInvite = useCallback(async (phone: string) => {
    setInviteLoading(true)
    try {
      const res = await fetch("/api/invite/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ phone }),
      })
      const data = await res.json()
      if (data.inviteUrl) {
        setInviteUrl(data.inviteUrl)
      }
    } catch {
      // fallback: generate client-side
      const token = crypto.randomUUID?.() || Math.random().toString(36).slice(2)
      setInviteUrl(`${window.location.origin}/join/${token}`)
    } finally {
      setInviteLoading(false)
    }
  }, [])

  const {
    isReady,
    isCallActive,
    isIncoming,
    isMuted,
    isSpeakerOn,
    callState,
    callDuration,
    error: callError,
    callerInfo,
    makeCall,
    acceptCall,
    rejectCall,
    endCall,
    toggleMute,
    toggleSpeaker,
    formatDuration,
  } = useWebRTCCall()

  useEffect(() => {
    if (!open && callState !== "idle") {
      endCall()
    }
  }, [open, callState, endCall])

  useEffect(() => {
    if (!open) {
      setSearchQuery("")
      setPhoneNumber("")
      setPhoneError(false)
      return
    }
    const fetchContacts = async () => {
      setContactsLoading(true)
      setContactsError(false)
      try {
        const sb = getSupabase()
        const { data, error } = await sb
          .from("contacts")
          .select("id, name, phone, avatar_url")
          .order("name", { ascending: true })
        if (error) throw error
        setContacts(data || [])
      } catch {
        setContactsError(true)
      } finally {
        setContactsLoading(false)
      }
    }
    fetchContacts()
  }, [open])

  useEffect(() => {
    if (!open) return
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose()
    }
    document.addEventListener("keydown", handleKeyDown)
    return () => document.removeEventListener("keydown", handleKeyDown)
  }, [open, onClose])

  const filteredContacts = contacts.filter(
    (c) =>
      c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      c.phone.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  if (!open) return null

  return (
    <div
      className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center"
      onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
    >
      <div className="bg-white dark:bg-[#141414] rounded-2xl p-6 w-full max-w-md border border-[#E0E0E0] dark:border-[#CC0000]/20 shadow-[0_8px_40px_rgba(0,0,0,0.18)] relative">
        <button
          type="button"
          onClick={onClose}
          className="absolute top-4 right-4 text-[#888888] hover:text-[#111111] dark:hover:text-white transition-colors"
        >
          <X className="h-5 w-5" />
        </button>

        <h2 className="font-bold text-lg text-[#111111] dark:text-white">Start a Call</h2>
        <p className="text-[#888888] text-sm mt-1 mb-5">Search contacts or dial a number</p>

        <p className="text-[10px] font-bold uppercase tracking-widest text-[#888888] dark:text-[#666666] mb-2">
          CONTACTS
        </p>

        <input
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Search contacts..."
          className="bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E0E0E0] dark:border-[#333333] text-[#111111] dark:text-white placeholder-[#AAAAAA] dark:placeholder-[#555555] rounded-xl px-4 py-2.5 text-sm w-full mb-3 outline-none transition-colors focus:border-[#CC0000] dark:focus:border-[#FF4444]"
        />

        <div className="max-h-[200px] overflow-y-auto space-y-1 mb-4">
          {contactsLoading && (
            <p className="text-[#AAAAAA] text-sm text-center py-4 animate-pulse">Loading contacts...</p>
          )}
          {contactsError && (
            <p className="text-[#CC0000] text-sm text-center py-4">Could not load contacts</p>
          )}
          {!contactsLoading && !contactsError && filteredContacts.length === 0 && (
            <p className="text-[#AAAAAA] text-sm text-center py-4">No contacts found</p>
          )}
          {!contactsLoading && !contactsError && filteredContacts.map((contact) => (
            <div
              key={contact.id}
              className="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all duration-150 hover:bg-[#F5F5F5] dark:hover:bg-[#1A1A1A]"
            >
              <div className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold shrink-0 bg-[#FFF0F0] dark:bg-[#CC0000]/15 text-[#CC0000] dark:text-[#FF4444]">
                {contact.avatar_url ? (
                  <img
                    src={contact.avatar_url}
                    alt={contact.name}
                    className="w-full h-full rounded-full object-cover"
                  />
                ) : (
                  contact.name.charAt(0).toUpperCase()
                )}
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-[#111111] dark:text-white truncate">{contact.name}</p>
                <p className="text-xs text-[#888888] dark:text-[#666666] truncate">{contact.phone}</p>
              </div>
              <button
                type="button"
                onClick={() => makeCall(contact.phone)}
                className="shrink-0 text-[#CC0000] dark:text-[#FF4444] hover:opacity-80 transition-opacity"
              >
                <Phone className="h-4 w-4" />
              </button>
            </div>
          ))}
        </div>

        <div className="flex items-center gap-3 my-4">
          <hr className="flex-1 border-t border-[#E0E0E0] dark:border-[#222222]" />
          <span className="text-xs text-[#AAAAAA] dark:text-[#555555]">OR</span>
          <hr className="flex-1 border-t border-[#E0E0E0] dark:border-[#222222]" />
        </div>

        <p className="text-[10px] font-bold uppercase tracking-widest text-[#888888] dark:text-[#666666] mb-2">
          DIAL A NUMBER
        </p>

        <input
          type="tel"
          value={phoneNumber}
          onChange={(e) => { setPhoneNumber(e.target.value); setPhoneError(false) }}
          placeholder="+27 000 000 0000"
          className="bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E0E0E0] dark:border-[#333333] text-[#111111] dark:text-white placeholder-[#AAAAAA] dark:placeholder-[#555555] rounded-xl px-4 py-2.5 text-sm w-full outline-none transition-colors focus:border-[#CC0000] dark:focus:border-[#FF4444]"
        />
        {phoneError && (
          <p className="text-[#CC0000] text-xs mt-1">Please enter a phone number</p>
        )}

        {isIncoming ? (
          <div className="text-center py-4">
            <div className="text-2xl font-bold dark:text-white text-[#111111] mb-1">
              Incoming Call
            </div>
            <div className="flex items-center justify-center gap-3 mb-6">
              <div className="w-12 h-12 rounded-full flex items-center justify-center text-lg font-bold bg-[#FFF0F0] dark:bg-[#CC0000]/15 text-[#CC0000] dark:text-[#FF4444]">
                {callerInfo?.firstName?.charAt(0).toUpperCase()}
              </div>
              <div className="text-left">
                <p className="text-sm font-medium text-[#111111] dark:text-white">
                  {callerInfo?.firstName} {callerInfo?.lastName}
                </p>
                <p className="text-xs text-[#888888]">{callerInfo?.username}</p>
              </div>
            </div>
            <p className="text-[#888888] text-sm mb-6 animate-pulse">Ringing...</p>
            <div className="flex justify-center gap-4">
              <button
                onClick={rejectCall}
                className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200"
              >
                <PhoneOff className="h-5 w-5" />
              </button>
              <button
                onClick={acceptCall}
                className="w-14 h-14 rounded-full bg-[#00AA00] hover:bg-[#008800] dark:bg-[#00CC00] flex items-center justify-center text-white font-bold transition-all duration-200"
              >
                <Phone className="h-5 w-5" />
              </button>
            </div>
          </div>
        ) : isCallActive ? (
          <div className="text-center py-4">
            {callState === "calling" && (
              <>
                <div className="text-xl font-bold dark:text-white text-[#111111] mb-4">
                  {phoneNumber}
                </div>
                <p className="text-[#888888] text-sm mb-4 animate-pulse">Calling...</p>
                <div className="flex justify-center">
                  <button
                    onClick={endCall}
                    className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200"
                  >
                    <PhoneOff className="h-5 w-5" />
                  </button>
                </div>
              </>
            )}
            {callState === "ringing" && (
              <>
                <div className="text-xl font-bold dark:text-white text-[#111111] mb-4">
                  {phoneNumber}
                </div>
                <p className="text-[#888888] text-sm mb-4 animate-pulse">Ringing...</p>
                <div className="flex justify-center">
                  <button
                    onClick={endCall}
                    className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200"
                  >
                    <PhoneOff className="h-5 w-5" />
                  </button>
                </div>
              </>
            )}
            {callState === "connecting" && (
              <>
                <div className="text-xl font-bold dark:text-white text-[#111111] mb-4">
                  {phoneNumber}
                </div>
                <p className="text-[#888888] text-sm mb-4 animate-pulse">Connecting...</p>
                <div className="flex justify-center">
                  <button
                    onClick={endCall}
                    className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200"
                  >
                    <PhoneOff className="h-5 w-5" />
                  </button>
                </div>
              </>
            )}
            {callState === "connected" && (
              <>
                <div className="text-2xl font-bold dark:text-white text-[#111111] mb-1">
                  {phoneNumber}
                </div>
                <div className="text-[#CC0000] font-mono text-lg mb-6">
                  {formatDuration(callDuration)}
                </div>
                <div className="flex justify-center gap-4">
                  <button
                    onClick={toggleSpeaker}
                    className={`w-14 h-14 rounded-full flex items-center justify-center text-white font-bold transition-all duration-200 ${isSpeakerOn ? 'bg-[#0033CC] dark:bg-[#1144FF]' : 'bg-[#444444] dark:bg-[#333333]'}`}
                  >
                    {isSpeakerOn ? <Volume2 className="h-5 w-5" /> : <VolumeX className="h-5 w-5" />}
                  </button>
                  <button
                    onClick={toggleMute}
                    className={`w-14 h-14 rounded-full flex items-center justify-center text-white font-bold transition-all duration-200 ${isMuted ? 'bg-[#0033CC] dark:bg-[#1144FF]' : 'bg-[#444444] dark:bg-[#333333]'}`}
                  >
                    {isMuted ? <MicOff className="h-5 w-5" /> : <Mic className="h-5 w-5" />}
                  </button>
                  <button
                    onClick={endCall}
                    className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200"
                  >
                    <PhoneOff className="h-5 w-5" />
                  </button>
                </div>
              </>
            )}
            {(callState === "ended" || callState === "missed" || callState === "rejected" || callState === "offline" || callState === "busy") && (
              <>
                <div className="text-xl font-bold dark:text-white text-[#111111] mb-4">
                  {phoneNumber}
                </div>
                <p className="text-[#888888] text-sm mb-4">
                  {callState === "missed" && "This phone number is not registered on the platform."}
                  {callState === "offline" && "User is offline"}
                  {callState === "rejected" && "Call rejected"}
                  {callState === "busy" && "User is busy"}
                  {callState === "ended" && "Call ended"}
                </p>
                {callState === "missed" && (
                  <div className="flex flex-col gap-2">
                    {!inviteUrl ? (
                      <button
                        onClick={() => generateInvite(phoneNumber)}
                        disabled={inviteLoading}
                        className="w-full bg-[#CC0000] hover:bg-[#990000] disabled:bg-[#CCCCCC] disabled:cursor-not-allowed dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 flex items-center justify-center gap-2 transition-all duration-200"
                      >
                        {inviteLoading ? "Generating..." : "Invite User"}
                      </button>
                    ) : (
                      <div className="flex flex-col gap-2">
                        <p className="text-xs text-[#888888] break-all bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-xl p-3">
                          {inviteUrl}
                        </p>
                        <div className="flex gap-2">
                          <button
                            onClick={() => navigator.clipboard.writeText(inviteUrl)}
                            className="flex-1 bg-[#444444] hover:bg-[#555555] dark:bg-[#333333] dark:hover:bg-[#444444] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
                          >
                            Copy Link
                          </button>
                          <button
                            onClick={() => {
                              if (navigator.share) {
                                navigator.share({ url: inviteUrl, title: "Join me on this platform!" })
                              } else {
                                navigator.clipboard.writeText(inviteUrl)
                              }
                            }}
                            className="flex-1 bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
                          >
                            Share
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </>
            )}
          </div>
        ) : (
          <>
            {lookupMessage ? (
              <div className="text-center">
                <p className="text-[#888888] text-sm mb-4">{lookupMessage}</p>
                {lookupMessage === "This phone number is not registered on the platform." && (
                  <div className="flex flex-col gap-2">
                    {!inviteUrl ? (
                      <button
                        onClick={() => generateInvite(phoneNumber)}
                        disabled={inviteLoading}
                        className="w-full bg-[#CC0000] hover:bg-[#990000] disabled:bg-[#CCCCCC] disabled:cursor-not-allowed dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 flex items-center justify-center gap-2 transition-all duration-200"
                      >
                        {inviteLoading ? "Generating..." : "Invite User"}
                      </button>
                    ) : (
                      <div className="flex flex-col gap-2">
                        <p className="text-xs text-[#888888] break-all bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-xl p-3">
                          {inviteUrl}
                        </p>
                        <div className="flex gap-2">
                          <button
                            onClick={() => {
                              navigator.clipboard.writeText(inviteUrl)
                              setLookupMessageWithReset(null)
                            }}
                            className="flex-1 bg-[#444444] hover:bg-[#555555] dark:bg-[#333333] dark:hover:bg-[#444444] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
                          >
                            Copy Link
                          </button>
                          <button
                            onClick={() => {
                              if (navigator.share) {
                                navigator.share({ url: inviteUrl, title: "Join me on this platform!" })
                              } else {
                                navigator.clipboard.writeText(inviteUrl)
                              }
                              setLookupMessageWithReset(null)
                            }}
                            className="flex-1 bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
                          >
                            Share
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </div>
            ) : (
              <>
                <button
                  onClick={async () => {
                    const trimmed = phoneNumber.trim()
                    if (!trimmed) {
                      setPhoneError(true)
                      return
                    }
                    setPhoneError(false)
                    setLookupMessageWithReset(null)
                    try {
                      const res = await fetch(`/api/users/lookup?phone=${encodeURIComponent(trimmed)}`)
                      const data = await res.json()
                      if (!data.found) {
                        setLookupMessageWithReset("This phone number is not registered on the platform.")
                        return
                      }
                      makeCall(trimmed)
                    } catch {
                      if (isReady) {
                        makeCall(trimmed)
                      } else {
                        setLookupMessageWithReset("Could not verify phone number. Please try again.")
                      }
                    }
                  }}
                  className="w-full mt-3 bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 flex items-center justify-center gap-2 transition-all duration-200"
                >
                  <Phone className="h-4 w-4" />
                  Call Now
                </button>
                {callError && (
                  <p className="text-[#CC0000] text-xs mt-2 text-center">{callError}</p>
                )}
              </>
            )}
          </>
        )}
      </div>
    </div>
  )
}