'use client'

import { useState, useEffect, useRef } from 'react'
import { useRouter } from 'next/navigation'
import PageLayout from '../../../components/PageLayout'
import useAuthStore from '../../../store/authStore'
import { useUserStatus } from '../../../hooks/useUserStatus'
import { API_BASE_URL } from '../../../utils/api'
import { useToast } from '../../../components/toast/toastComponent'

export default function PersonalSignContractPage() {
  const router = useRouter()
  const { accessToken } = useAuthStore()
  const { refreshStatus } = useUserStatus()
  const { showToast } = useToast()
  
  const [date, setDate] = useState('')
  const [signatureDataUrl, setSignatureDataUrl] = useState('')
  const [agreeContract, setAgreeContract] = useState(false)
  const [agreeData, setAgreeData] = useState(false)
  const [confirmSignature, setConfirmSignature] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState('')
  const [previewLoading, setPreviewLoading] = useState(false)
  const [activeTab, setActiveTab] = useState<'contract' | 'gdpr'>('contract')
  const [previewState, setPreviewState] = useState<{
    contract: { loading: boolean; html: string | null; error: string | null }
    gdpr: { loading: boolean; html: string | null; error: string | null }
  }>({
    contract: { loading: false, html: null, error: null },
    gdpr: { loading: false, html: null, error: null }
  })
  const [previewsReady, setPreviewsReady] = useState(false)

  useEffect(() => {
    setDate(new Date().toISOString().slice(0, 10))
  }, [])

  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const isDrawing = useRef(false)
  const scaleRef = useRef(1)

  const getPos = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current
    if (!canvas) return { x: 0, y: 0 }
    const rect = canvas.getBoundingClientRect()
    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
    const x = (clientX - rect.left) * scaleRef.current
    const y = (clientY - rect.top) * scaleRef.current
    return { x, y }
  }

  // Size canvas to devicePixelRatio to avoid offset between cursor and strokes
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const resize = () => {
      const rect = canvas.getBoundingClientRect()
      const dpr = window.devicePixelRatio || 1
      canvas.width = rect.width * dpr
      canvas.height = rect.height * dpr
      const ctx = canvas.getContext('2d')
      if (ctx) {
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
        ctx.lineWidth = 2
        ctx.lineCap = 'round'
        ctx.strokeStyle = '#0f172a'
      }
      scaleRef.current = dpr
    }
    resize()
    window.addEventListener('resize', resize)
    return () => window.removeEventListener('resize', resize)
  }, [])

  const startDrawing = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
    e.preventDefault()
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return
    ctx.lineWidth = 2
    ctx.lineCap = 'round'
    ctx.strokeStyle = '#0f172a'
    const { x, y } = getPos(e)
    ctx.beginPath()
    ctx.moveTo(x, y)
    isDrawing.current = true
  }

  const draw = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
    e.preventDefault()
    if (!isDrawing.current) return
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return
    const { x, y } = getPos(e)
    ctx.lineTo(x, y)
    ctx.stroke()
  }

  const endDrawing = () => {
    if (!isDrawing.current) return
    isDrawing.current = false
    const canvas = canvasRef.current
    if (!canvas) return
    const dataUrl = canvas.toDataURL('image/png')
    setSignatureDataUrl(dataUrl)
  }

  const clearSignature = () => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d')
    if (!ctx) return
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    setSignatureDataUrl('')
  }

  const loadPreview = async (contractType: 'contract' | 'gdpr') => {
    if (!accessToken) return
    setPreviewState((prev) => ({
      ...prev,
      [contractType]: { ...prev[contractType], loading: true, error: null }
    }))
    try {
      const qs = contractType ? `?contract_type=${contractType}` : ''
      const res = await fetch(`${API_BASE_URL}/api/contracts/preview/latest${qs}`, {
        method: 'GET',
        headers: { Authorization: `Bearer ${accessToken}` },
        credentials: 'include'
      })
      if (!res.ok) {
        await res.text().catch(() => null)
        throw new Error('No contract available at this moment, please contact us.')
      }
      const html = await res.text()
      setPreviewState((prev) => ({
        ...prev,
        [contractType]: { loading: false, html, error: null }
      }))
    } catch (e: unknown) {
      console.error('PersonalSignContractPage.loadPreview error:', e)
      setPreviewState((prev) => ({
        ...prev,
        [contractType]: { loading: false, html: null, error: 'No contract available at this moment, please contact us.' }
      }))
    }
  }

  // Load latest contract and GDPR previews for personal user
  useEffect(() => {
    if (!accessToken) return
    setPreviewLoading(true)
    Promise.all([
      loadPreview('contract'),
      loadPreview('gdpr')
    ]).finally(() => setPreviewLoading(false))
  }, [accessToken])

  useEffect(() => {
    const doneLoading = !previewState.contract.loading && !previewState.gdpr.loading && !previewLoading
    const anyAvailable = !!previewState.contract.html || !!previewState.gdpr.html
    const blockingMsg = 'Temporarily unable to sign contracts. No active documents are available at this moment.'
    if (doneLoading) {
      setPreviewsReady(true)
    }
    if (doneLoading) {
      if (anyAvailable) {
        setError((prev) => (prev === blockingMsg ? '' : prev))
      } else {
        setError(blockingMsg)
      }

      // If one preview is missing, default to showing the available one
      if (!previewState.contract.html && previewState.gdpr.html) {
        setActiveTab('gdpr')
      } else if (previewState.contract.html && !previewState.gdpr.html) {
        setActiveTab('contract')
      }
    }
  }, [previewState, previewLoading])

  const valid = () => {
    const contractAvailable = !!previewState.contract.html
    const gdprAvailable = !!previewState.gdpr.html

    // Only require acknowledgements for documents that actually exist
    const contractChecked = contractAvailable ? agreeContract : true
    const dataChecked = gdprAvailable ? agreeData : true
    const signatureChecked = confirmSignature
    const signatureDrawn = !!signatureDataUrl
    const anyPreview = contractAvailable || gdprAvailable
    
    return contractChecked && dataChecked && signatureChecked && signatureDrawn && anyPreview
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!valid()) {
      // Detailed error message to help debug
      const issues: string[] = []
      const contractAvailable = !!previewState.contract.html
      const gdprAvailable = !!previewState.gdpr.html

      if (!contractAvailable && !gdprAvailable) {
        const msg = 'Temporarily unable to sign contracts. No active documents are available at this moment.'
        setError(msg)
        showToast({
          variant: 'error',
          title: 'No documents available',
          message: msg,
        })
        return
      }

      if (contractAvailable && !agreeContract) issues.push('Contract read and understood')
      if (gdprAvailable && !agreeData) issues.push('Privacy policy accepted')
      if (!confirmSignature) issues.push('Electronic signature confirmed')
      if (!signatureDataUrl) issues.push('Signature captured on pad')
      
      const msg = `Please complete: ${issues.join(', ')}`
      setError(msg)
      showToast({
        variant: 'error',
        title: 'Missing information',
        message: msg,
      })
      return
    }
    
    if (!accessToken) {
      const msg = 'Not authenticated. Please log in again.'
      setError(msg)
      showToast({
        variant: 'error',
        title: 'Authentication error',
        message: msg,
      })
      return
    }
    
    setError('')
    setSubmitting(true)
    
    try {
      const contractData = {
        date,
        contractType: 'personal'
      }

      // Create FormData for the backend endpoint (no dummy PDF needed; server generates from templates)
      const formData = new FormData()
      formData.append('contractData', JSON.stringify(contractData))
      if (signatureDataUrl) {
        formData.append('signatureImage', signatureDataUrl)
      }

      const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/contract/personal`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${accessToken}`
          // Don't set Content-Type, let browser set it for FormData
        },
        body: formData
      })

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({ message: 'Contract signing failed' }))
        throw new Error(errorData.message || 'Contract signing failed')
      }

      setSuccess(true)
      showToast({
        variant: 'success',
        title: 'Contract signed',
        message: 'Your personal contract has been signed successfully.',
      })
      
      // Refresh user status to update contract signed state
      await refreshStatus()
      
      // Redirect to main dashboard after short delay
      setTimeout(() => {
        // Check if we came from tutorial
        const urlParams = new URLSearchParams(window.location.search)
        const fromTutorial = urlParams.get('tutorial') === 'true'
        
        if (fromTutorial) {
          router.push('/quickaction-dashboard?tutorial=true')
        } else {
          router.push('/quickaction-dashboard')
        }
      }, 2000)
      
    } catch (error: unknown) {
      console.error('Contract signing error:', error)
      const msg = error instanceof Error ? (error.message || 'Signature failed. Please try again.') : 'Signature failed. Please try again.'
      setError(msg)
      showToast({
        variant: 'error',
        title: 'Signature failed',
        message: msg,
      })
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <PageLayout>
      <div className="relative min-h-screen overflow-hidden bg-slate-50">
        {/* Animated background (same as dashboard) */}
        <div className="pointer-events-none absolute inset-0 z-0">
          {/* Soft gradient blobs */}
          <div className="absolute -top-32 -left-20 h-80 w-80 rounded-full bg-blue-400/25 blur-3xl animate-pulse" />
          <div className="absolute top-1/4 -right-24 h-96 w-96 rounded-full bg-emerald-400/20 blur-3xl animate-pulse" />
          <div className="absolute bottom-[-6rem] left-1/4 h-96 w-96 rounded-full bg-indigo-400/20 blur-3xl animate-pulse" />
          {/* Subtle radial highlight */}
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.14),transparent_60%)]" />
        </div>

        <main className="relative z-10 flex flex-col flex-1 w-full px-5 sm:px-8 lg:px-12 py-12">
          <form
            onSubmit={handleSubmit}
            className="relative max-w-5xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10"
          >
            <div className="px-6 py-8 sm:px-10 lg:px-14">
              <h1 className="text-center text-2xl sm:text-3xl font-semibold text-[#0F172A] mb-2">
                Sign Personal Participation Contract
              </h1>
              <p className="text-center text-sm text-gray-600 mb-8">
                Please review the contract details and sign electronically.
              </p>

              {/* Contract Meta + Preview */}
              <section className="grid gap-8 lg:grid-cols-2 mb-10">
                <div className="space-y-4">
                  <div className="rounded-lg border border-gray-200 p-5 bg-gray-50">
                    <div className="flex items-center justify-between mb-3">
                      <h2 className="text-sm font-semibold text-gray-800">Document Information</h2>
                      <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
                        {(['contract','gdpr'] as const).map((tab) => (
                          <button
                            key={tab}
                            type="button"
                            onClick={() => setActiveTab(tab)}
                            className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
                          >
                            {tab === 'contract' ? 'Contract' : 'GDPR'}
                          </button>
                        ))}
                      </div>
                    </div>
                    {(() => {
                      const meta = activeTab === 'contract'
                        ? {
                            id: 'PERS-2025-001',
                            title: 'VERTRIEBSPARTNER / BUSINESSPARTNER / AFFILIATE - VERTRAG',
                            version: 'idF 21.05.2025',
                            jurisdiction: 'EU / Austria (Graz)',
                            language: 'DE (binding)',
                            issuer: 'Profit Planet GmbH',
                            address: 'Liebenauer Hauptstraße 82c, A-8041 Graz'
                          }
                        : {
                            id: 'PERS-GDPR-2025-001',
                            title: 'SUB-AUFTRAGSVERARBEITUNGS-VERTRAG',
                            version: 'Art. 28 Abs. 3 DSGVO',
                            jurisdiction: 'EU / Austria (Graz)',
                            language: 'DE (binding)',
                            issuer: 'Profit Planet GmbH',
                            address: 'Liebenauer Hauptstraße 82c, A-8041 Graz'
                          }
                      return (
                        <ul className="space-y-2 text-xs sm:text-sm text-gray-600">
                          <li><span className="font-medium text-gray-700">Document:</span> {meta.title}</li>
                          <li><span className="font-medium text-gray-700">ID:</span> {meta.id}</li>
                          <li><span className="font-medium text-gray-700">Version / Basis:</span> {meta.version}</li>
                          <li><span className="font-medium text-gray-700">Jurisdiction:</span> {meta.jurisdiction}</li>
                          <li><span className="font-medium text-gray-700">Language:</span> {meta.language}</li>
                          <li><span className="font-medium text-gray-700">Issuer:</span> {meta.issuer}</li>
                          <li><span className="font-medium text-gray-700">Address:</span> {meta.address}</li>
                        </ul>
                      )
                    })()}
                  </div>
                  <div className="rounded-lg border border-indigo-100 bg-indigo-50/60 p-5">
                    <h3 className="text-sm font-semibold text-indigo-900 mb-2">Note</h3>
                    <p className="text-xs sm:text-sm text-indigo-800 leading-relaxed">
                      Your electronic signature is legally binding. Please ensure all details are correct.
                    </p>
                  </div>
                </div>
                <div>
                  <div className="rounded-lg border border-gray-200 bg-white relative overflow-hidden">
                    <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-gray-50">
                      <div className="flex items-center gap-2 text-sm font-semibold text-gray-900">
                        <span>Contract Preview</span>
                        <div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
                          {(['contract','gdpr'] as const).map((tab) => (
                            <button
                              key={tab}
                              type="button"
                              onClick={() => setActiveTab(tab)}
                              className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
                            >
                              {tab === 'contract' ? 'Contract' : 'GDPR'}
                            </button>
                          ))}
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <button
                          type="button"
                          onClick={async () => {
                            const current = previewState[activeTab];
                            if (!current?.html) return
                            const blob = new Blob([current.html], { type: 'text/html' })
                            const url = URL.createObjectURL(blob)
                            window.open(url, '_blank', 'noopener,noreferrer')
                          }}
                          disabled={!previewState[activeTab]?.html}
                          className="inline-flex items-center rounded-md bg-gray-100 hover:bg-gray-200 text-gray-900 px-2.5 py-1.5 text-xs disabled:opacity-60"
                        >
                          Open in new tab
                        </button>
                      </div>
                    </div>
                    {previewLoading || previewState[activeTab].loading ? (
                      <div className="h-72 flex items-center justify-center text-xs text-gray-500">Loading preview…</div>
                    ) : previewState[activeTab].error ? (
                      <div className="h-72 flex items-center justify-center text-xs text-red-600 px-4 text-center">{previewState[activeTab].error}</div>
                    ) : previewState[activeTab].html ? (
                      <iframe title={`Contract Preview ${activeTab}`} className="w-full h-72" srcDoc={previewState[activeTab].html || ''} />
                    ) : (
                      <div className="h-72 flex items-center justify-center text-xs text-gray-500">No contract available at this moment, please contact us.</div>
                    )}
                  </div>
                </div>
              </section>

              <hr className="my-10 border-gray-200" />

              {/* Signature Pad */}
              <section>
                <h2 className="text-sm font-semibold text-[#0F2460] mb-5">Signature</h2>

              <div className="">
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Draw Signature *
                  </label>
                  <div className="rounded-lg border border-gray-200 bg-white p-4">
                    <canvas
                      ref={canvasRef}
                      width={800}
                      height={220}
                      className="w-full h-48 rounded-md border border-gray-200 bg-white shadow-inner touch-none"
                      onMouseDown={startDrawing}
                      onMouseMove={draw}
                      onMouseUp={endDrawing}
                      onMouseLeave={endDrawing}
                      onTouchStart={startDrawing}
                      onTouchMove={draw}
                      onTouchEnd={endDrawing}
                    />
                    <div className="mt-3 flex items-center gap-3 text-xs text-gray-600">
                      <button
                        type="button"
                        onClick={clearSignature}
                        className="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50"
                      >
                        Clear
                      </button>
                      <span className="text-gray-500">Use mouse or touch to sign. A signature is required.</span>
                      {signatureDataUrl && <span className="text-green-600 font-medium">Captured</span>}
                    </div>
                  </div>
                </div>
              </section>

              <hr className="my-10 border-gray-200" />

              {/* Confirmations */}
              <section className="space-y-5">
                <h2 className="text-sm font-semibold text-[#0F2460]">Confirmations</h2>
                <label className="flex items-start gap-3 text-sm text-gray-700">
                  <input
                    type="checkbox"
                    checked={agreeContract}
                    onChange={e => setAgreeContract(e.target.checked)}
                    className="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                  />
                  <span>I confirm that I have read and understood the contract in full.</span>
                </label>
                <label className="flex items-start gap-3 text-sm text-gray-700">
                  <input
                    type="checkbox"
                    checked={agreeData}
                    onChange={e => setAgreeData(e.target.checked)}
                    className="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                  />
                  <span>I consent to the processing of my personal data in accordance with the privacy policy.</span>
                </label>
                <label className="flex items-start gap-3 text-sm text-gray-700">
                  <input
                    type="checkbox"
                    checked={confirmSignature}
                    onChange={e => setConfirmSignature(e.target.checked)}
                    className="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                  />
                  <span>I confirm this electronic signature is legally binding and equivalent to a handwritten signature.</span>
                </label>
              </section>

              {error && (
                <div className="mt-8 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
                  {error}
                </div>
              )}
              {success && (
                <div className="mt-8 rounded-md border border-green-300 bg-green-50 px-4 py-3 text-sm text-green-700">
                  Contract signed successfully. Redirecting shortly…
                </div>
              )}

              <div className="mt-10 flex items-center justify-between">
                <button
                  type="button"
                  onClick={() => router.push('/quickaction-dashboard')}
                  className="inline-flex items-center rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50"
                >
                  Back to Dashboard
                </button>
                <button
                  type="submit"
                  disabled={submitting || success || (!previewState.contract.html && !previewState.gdpr.html)}
                  className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-8 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
                >
                  {submitting ? 'Signing…' : success ? 'Signed' : 'Sign Now'}
                </button>
              </div>
            </div>
          </form>
        </main>
      </div>
    </PageLayout>
  )
}