"use client"

import { useEffect, useState, useTransition } from "react"
import { toast } from "sonner"
import {
  PenLine,
  Link2,
  CheckCircle2,
  AlertTriangle,
  KeyRound,
  ChevronDown,
  ExternalLink,
  Loader2,
} from "lucide-react"
import { connectDropboxSign, disconnectEsignAction } from "@/app/actions/esign"

type Adapter = { id: string; label: string; kind: "oauth" | "apikey"; available: boolean }
type Conn = { provider: string; accountName: string | null; status: string; lastError: string | null }

const ERR_MSG: Record<string, string> = {
  connect_failed: "Connection failed — please try again.",
  invalid_state: "The connection link expired or was invalid. Please retry.",
  owner_only: "Only the account owner can manage integrations.",
  not_configured: "E-signature isn't enabled on this server yet.",
  unknown_provider: "Unknown provider.",
  use_api_key: "That provider connects with an API key, not a redirect.",
}

const LABEL: Record<string, string> = { docusign: "DocuSign", dropbox_sign: "Dropbox Sign" }

function StatusPill({ status }: { status: string }) {
  const error = status === "error"
  return (
    <span
      className={`flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium ${
        error ? "border-red-500/20 bg-red-500/10 text-red-400" : "border-emerald-500/20 bg-emerald-500/10 text-emerald-400"
      }`}
    >
      {error ? <AlertTriangle className="h-3 w-3" /> : <CheckCircle2 className="h-3 w-3" />}
      {error ? "Error" : "Connected"}
    </span>
  )
}

export function EsignIntegrations({
  adapters,
  connections,
  isOwner,
  flash,
  webhookUrl,
}: {
  adapters: Adapter[]
  connections: Conn[]
  isOwner: boolean
  flash: { connected?: string; error?: string }
  webhookUrl: string
}) {
  const connByProvider: Record<string, Conn> = Object.fromEntries(connections.map((c) => [c.provider, c]))
  const [pending, start] = useTransition()
  const [busy, setBusy] = useState<string | null>(null)
  const [open, setOpen] = useState<string | null>(null) // which provider's instructions are expanded
  const [apiKey, setApiKey] = useState("")
  const [showKeyForm, setShowKeyForm] = useState(false)

  useEffect(() => {
    if (flash.connected) toast.success(`Connected to ${LABEL[flash.connected] ?? flash.connected}`)
    if (flash.error) toast.error(ERR_MSG[flash.error] ?? "Something went wrong")
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  function connectDbx() {
    const key = apiKey.trim()
    if (!key) return
    setBusy("dropbox_sign")
    start(async () => {
      try {
        const r = await connectDropboxSign(key)
        toast.success(`Connected ${r.accountName ?? "Dropbox Sign"}`)
        setApiKey("")
        setShowKeyForm(false)
      } catch (e) {
        toast.error((e as Error).message || "Couldn't connect")
      } finally {
        setBusy(null)
      }
    })
  }

  function remove(id: string) {
    if (!confirm(`Disconnect ${LABEL[id] ?? id}? You won't be able to send leases through it until you reconnect.`)) return
    setBusy(id)
    start(async () => {
      try {
        await disconnectEsignAction(id)
        toast.success("Disconnected")
      } catch {
        toast.error("Couldn't disconnect")
      } finally {
        setBusy(null)
      }
    })
  }

  if (!isOwner) {
    return (
      <div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-6 text-sm text-white/50">
        Only the account owner can connect e-signature providers.
      </div>
    )
  }

  return (
    <div className="space-y-3">
      {/* Intro / how it works */}
      <div className="rounded-2xl border border-indigo-500/15 bg-indigo-500/[0.04] p-5">
        <div className="flex items-center gap-2">
          <PenLine className="h-4 w-4 text-indigo-400" />
          <h3 className="text-sm font-semibold text-white">Send leases for e-signature</h3>
        </div>
        <p className="mt-1.5 text-xs leading-relaxed text-white/50">
          Connect <span className="text-white/80">your own</span> DocuSign or Dropbox Sign account so signed leases carry
          your brand and audit trail — and the signing costs stay on your provider plan, not ours. Once connected, a
          <span className="text-white/80"> “Send for signature” </span> button appears on every lease that has a document
          and a tenant email.
        </p>
        <ol className="mt-3 space-y-1.5 text-xs text-white/50">
          <li>1. Connect your provider below (one-time).</li>
          <li>2. Open a lease → upload the lease PDF.</li>
          <li>3. Click “Send via DocuSign / Dropbox Sign.” The tenant signs; the status updates here automatically and the signed copy is saved back to the lease.</li>
        </ol>
      </div>

      {adapters.map((a) => {
        const conn = connByProvider[a.id]
        const isBusy = pending && busy === a.id
        const instructionsOpen = open === a.id
        return (
          <div key={a.id} className="rounded-2xl border border-white/[0.06] bg-[#16161f] p-5">
            <div className="flex items-start justify-between gap-4">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/[0.04] text-white/70">
                  <PenLine className="h-5 w-5" />
                </div>
                <div>
                  <p className="text-sm font-semibold text-white">{a.label}</p>
                  {conn ? (
                    <p className="text-xs text-white/40">{conn.accountName ?? "Connected"}</p>
                  ) : (
                    <p className="text-xs text-white/40">
                      {a.kind === "oauth" ? "Connect with your DocuSign login" : "Connect with your API key"}
                    </p>
                  )}
                </div>
              </div>
              {conn ? (
                <StatusPill status={conn.status} />
              ) : !a.available ? (
                <span className="shrink-0 rounded-full border border-amber-500/20 bg-amber-500/10 px-2.5 py-1 text-[11px] font-medium text-amber-400">
                  Not available
                </span>
              ) : null}
            </div>

            {conn?.status === "error" && conn.lastError && (
              <p className="mt-3 rounded-lg border border-red-500/15 bg-red-500/[0.06] px-3 py-2 text-xs text-red-300/90">{conn.lastError}</p>
            )}

            {/* Actions */}
            <div className="mt-4 flex flex-wrap items-center gap-2">
              {conn ? (
                <button
                  onClick={() => remove(a.id)}
                  disabled={isBusy}
                  className="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-medium text-white/60 transition hover:bg-white/[0.06] hover:text-white disabled:opacity-50"
                >
                  {isBusy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : "Disconnect"}
                </button>
              ) : !a.available ? (
                <p className="text-xs text-white/30">
                  Ask your administrator to enable {a.label} (server credentials aren&apos;t configured).
                </p>
              ) : a.kind === "oauth" ? (
                <a
                  href={`/api/esign/${a.id}/connect`}
                  className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-indigo-500"
                >
                  <Link2 className="h-3.5 w-3.5" /> Connect {a.label}
                </a>
              ) : showKeyForm ? (
                <div className="flex w-full flex-col gap-2 sm:flex-row">
                  <input
                    type="password"
                    value={apiKey}
                    onChange={(e) => setApiKey(e.target.value)}
                    placeholder="Paste your Dropbox Sign API key"
                    className="flex-1 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-white placeholder-white/30 outline-none focus:border-indigo-500/50"
                  />
                  <button
                    onClick={connectDbx}
                    disabled={isBusy || !apiKey.trim()}
                    className="flex items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-indigo-500 disabled:opacity-50"
                  >
                    {isBusy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <KeyRound className="h-3.5 w-3.5" />} Connect
                  </button>
                </div>
              ) : (
                <button
                  onClick={() => setShowKeyForm(true)}
                  className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-indigo-500"
                >
                  <KeyRound className="h-3.5 w-3.5" /> Connect {a.label}
                </button>
              )}

              {a.available && (
                <button
                  onClick={() => setOpen(instructionsOpen ? null : a.id)}
                  className="ml-auto flex items-center gap-1 text-[11px] text-white/40 transition hover:text-white/70"
                >
                  How to connect <ChevronDown className={`h-3 w-3 transition ${instructionsOpen ? "rotate-180" : ""}`} />
                </button>
              )}
            </div>

            {/* Instructions */}
            {instructionsOpen && (
              <div className="mt-3 rounded-lg border border-white/[0.06] bg-white/[0.02] p-4 text-xs leading-relaxed text-white/55">
                {a.id === "docusign" ? (
                  <ol className="space-y-1.5">
                    <li>
                      1. You need an active{" "}
                      <a href="https://www.docusign.com/products/electronic-signature" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-0.5 text-indigo-400 hover:text-indigo-300">
                        DocuSign eSignature plan <ExternalLink className="h-3 w-3" />
                      </a>.
                    </li>
                    <li>2. Click <span className="text-white/80">Connect DocuSign</span> above.</li>
                    <li>3. Log in to <span className="text-white/80">your</span> DocuSign account and click <span className="text-white/80">Allow</span> to grant access.</li>
                    <li>4. You&apos;ll return here connected — no webhook setup needed. Signed-status updates and the completed PDF flow back automatically.</li>
                  </ol>
                ) : (
                  <ol className="space-y-1.5">
                    <li>
                      1. In Dropbox Sign, open{" "}
                      <a href="https://app.hellosign.com/account/settings/api" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-0.5 text-indigo-400 hover:text-indigo-300">
                        Settings → API <ExternalLink className="h-3 w-3" />
                      </a>{" "}
                      and copy your <span className="text-white/80">API key</span>.
                    </li>
                    <li>2. Paste it above and click <span className="text-white/80">Connect</span>.</li>
                    <li>
                      3. In the same API settings, set your <span className="text-white/80">account callback URL</span> to:
                      <code className="mt-1 block overflow-x-auto rounded bg-black/30 px-2 py-1 font-mono text-[11px] text-emerald-300">{webhookUrl}</code>
                      This lets us receive signed-status updates.
                    </li>
                  </ol>
                )}
              </div>
            )}
          </div>
        )
      })}

      <p className="px-1 text-[11px] text-white/30">
        Your credentials are encrypted at rest and never leave the server. We only send the leases you explicitly submit.
      </p>
    </div>
  )
}