'use client'

import React, { useMemo, useState, useEffect } from 'react'
import {
  ChartBarIcon,
  CheckCircleIcon,
  UsersIcon,
  PlusIcon,
  EnvelopeIcon,
  CalendarDaysIcon,
} from '@heroicons/react/24/outline'
import PageLayout from '../../components/PageLayout'
import { useRouter } from 'next/navigation'
import useAuthStore from '../../store/authStore'
import { createMatrix } from './hooks/createMatrix'
import { getMatrixStats } from './hooks/getMatrixStats'
import { deactivateMatrix, activateMatrix } from './hooks/changeMatrixState' // NEW

type Matrix = {
  id: string
  name: string
  status: 'active' | 'inactive'
  usersCount: number
  createdAt: string
  topNodeEmail: string
  rootUserId: number // added
  policyMaxDepth?: number | null // NEW
}

export default function MatrixManagementPage() {
  const router = useRouter()
  const user = useAuthStore(s => s.user)
  const token = useAuthStore(s => s.accessToken)
  const isAdmin =
    !!user &&
    (
      (user as any)?.role === 'admin' ||
      (user as any)?.userType === 'admin' ||
      (user as any)?.isAdmin === true ||
      ((user as any)?.roles?.includes?.('admin'))
    )

  useEffect(() => {
    if (user === null) {
      router.push('/login')
    } else if (user && !isAdmin) {
      router.push('/')
    }
  }, [user, isAdmin, router])

  const [matrices, setMatrices] = useState<Matrix[]>([])
  const [stats, setStats] = useState({ total: 0, active: 0, totalUsers: 0 })
  const [statsLoading, setStatsLoading] = useState(false)
  const [statsError, setStatsError] = useState<string>('')

  const [createOpen, setCreateOpen] = useState(false)
  const [createName, setCreateName] = useState('')
  const [createEmail, setCreateEmail] = useState('')
  const [formError, setFormError] = useState<string>('')

  const [createLoading, setCreateLoading] = useState(false)
  const [forcePrompt, setForcePrompt] = useState<{ name: string; email: string } | null>(null)
  const [createSuccess, setCreateSuccess] = useState<{ name: string; email: string } | null>(null)

  const [policyFilter, setPolicyFilter] = useState<'unlimited'|'five'>('unlimited') // NEW
  const [sortByUsers, setSortByUsers] = useState<'asc'|'desc'>('desc') // NEW
  const [mutatingId, setMutatingId] = useState<string | null>(null) // NEW

  const loadStats = async () => {
    if (!token) return
    setStatsLoading(true)
    setStatsError('')
    try {
      const res = await getMatrixStats({ token })
      console.log('📊 MatrixManagement: GET /matrix/stats ->', res.status, res.body)
      if (res.ok) {
        const payload = res.body?.data || res.body || {}
        const apiMatrices: any[] = Array.isArray(payload.matrices) ? payload.matrices : []
        const mapped: Matrix[] = apiMatrices.map((m: any, idx: number) => {
          const isActive = !!m?.isActive
          const createdAt = m?.createdAt || m?.ego_activated_at || m?.activatedAt || new Date().toISOString()
          const topNodeEmail = m?.topNodeEmail || m?.masterTopUserEmail || m?.email || ''
          const rootUserId = Number(m?.rootUserId ?? m?.root_user_id ?? 0)
          const matrixId = m?.matrixId ?? m?.id // prefer matrixId for routing
          const maxDepth = (m?.maxDepth ?? m?.policyMaxDepth) // backend optional
          return {
            id: String(matrixId ?? `m-${idx}`),
            name: String(m?.name ?? 'Unnamed Matrix'),
            status: isActive ? 'active' : 'inactive',
            usersCount: Number(m?.usersCount ?? 0),
            createdAt: String(createdAt),
            topNodeEmail: String(topNodeEmail),
            rootUserId,
            policyMaxDepth: typeof maxDepth === 'number' ? maxDepth : null // NEW
          }
        })
        setMatrices(mapped)
        const activeMatrices = Number(payload.activeMatrices ?? mapped.filter(m => m.status === 'active').length)
        const totalMatrices = Number(payload.totalMatrices ?? mapped.length)
        const totalUsersSubscribed = Number(payload.totalUsersSubscribed ?? 0)
        setStats({ total: totalMatrices, active: activeMatrices, totalUsers: totalUsersSubscribed })
        console.log('✅ MatrixManagement: mapped stats:', { total: totalMatrices, active: activeMatrices, totalUsers: totalUsersSubscribed })
        console.log('✅ MatrixManagement: mapped matrices sample:', mapped.slice(0, 3))
      } else {
        setStatsError(res.message || 'Failed to load matrix stats.')
      }
    } catch (e) {
      console.error('❌ MatrixManagement: stats load error', e)
      setStatsError('Network error while loading matrix stats.')
    } finally {
      setStatsLoading(false)
    }
  }

  useEffect(() => {
    loadStats()
  }, [token])

  const resetForm = () => {
    setCreateName('')
    setCreateEmail('')
    setFormError('')
    setForcePrompt(null)
    setCreateSuccess(null)
  }

  const validateEmail = (email: string) =>
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault()
    const name = createName.trim()
    const email = createEmail.trim()
    setFormError('')
    setCreateSuccess(null)
    setForcePrompt(null)

    if (!name) {
      setFormError('Please provide a matrix name.')
      return
    }
    if (!email || !validateEmail(email)) {
      setFormError('Please provide a valid top-node email.')
      return
    }
    if (!token) {
      setFormError('Not authenticated. Please log in again.')
      return
    }

    setCreateLoading(true)
    try {
      const res = await createMatrix({ token, name, email })
      console.log('🧱 MatrixManagement: create result ->', res.status, res.body)
      if (res.ok && res.body?.success) {
        const createdName = res.body?.data?.name || name
        const createdEmail = res.body?.data?.masterTopUserEmail || email
        setCreateSuccess({ name: createdName, email: createdEmail })
        await loadStats()
        setCreateName('')
        setCreateEmail('')
      } else if (res.status === 409) {
        setForcePrompt({ name, email })
      } else {
        setFormError(res.message || 'Failed to create matrix.')
      }
    } catch (err) {
      setFormError('Network error while creating the matrix.')
    } finally {
      setCreateLoading(false)
    }
  }

  const confirmForce = async () => {
    if (!forcePrompt || !token) return
    setFormError('')
    setCreateLoading(true)
    try {
      const res = await createMatrix({ token, name: forcePrompt.name, email: forcePrompt.email, force: true })
      console.log('🧱 MatrixManagement: force-create result ->', res.status, res.body)
      if (res.ok && res.body?.success) {
        const createdName = res.body?.data?.name || forcePrompt.name
        const createdEmail = res.body?.data?.masterTopUserEmail || forcePrompt.email
        setCreateSuccess({ name: createdName, email: createdEmail })
        setForcePrompt(null)
        setCreateName('')
        setCreateEmail('')
        await loadStats()
      } else {
        setFormError(res.message || 'Failed to create matrix (force).')
      }
    } catch {
      setFormError('Network error while forcing the matrix creation.')
    } finally {
      setCreateLoading(false)
    }
  }

  const toggleStatus = async (id: string) => {
    try {
      const target = matrices.find(m => m.id === id)
      if (!target) return
      setStatsError('')
      setMutatingId(id)
      if (target.status === 'active') {
        await deactivateMatrix(id)
      } else {
        await activateMatrix(id)
      }
      await loadStats()
    } catch (e: any) {
      setStatsError(e?.message || 'Failed to change matrix state.')
    } finally {
      setMutatingId(null)
    }
  }

  // derived list with filter/sort (always apply selected filter)
  const matricesView = useMemo(() => {
    let list = [...matrices]
    list = list.filter(m => {
      const unlimited = !m.policyMaxDepth || m.policyMaxDepth <= 0
      return policyFilter === 'unlimited' ? unlimited : (!unlimited && m.policyMaxDepth === 5)
    })
    list.sort((a,b) => sortByUsers === 'asc' ? (a.usersCount - b.usersCount) : (b.usersCount - a.usersCount))
    return list
  }, [matrices, policyFilter, sortByUsers])

  const StatCard = ({
    icon: Icon,
    label,
    value,
    color,
  }: {
    icon: any
    label: string
    value: number
    color: string
  }) => (
    <div className="relative overflow-hidden rounded-lg bg-white px-4 pb-6 pt-5 shadow-sm border border-gray-200 sm:px-6 sm:pt-6">
      <dt>
        <div className={`absolute rounded-md ${color} p-3`}>
          <Icon className="h-6 w-6 text-white" aria-hidden="true" />
        </div>
        <p className="ml-16 truncate text-sm font-medium text-gray-500">{label}</p>
      </dt>
      <dd className="ml-16 mt-2 text-2xl font-semibold text-gray-900">{value}</dd>
    </div>
  )

  const StatusBadge = ({ status }: { status: Matrix['status'] }) => (
    <span
      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
        status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-700'
      }`}
    >
      <span
        className={`mr-1.5 h-1.5 w-1.5 rounded-full ${
          status === 'active' ? 'bg-green-500' : 'bg-gray-400'
        }`}
      />
      {status.charAt(0).toUpperCase() + status.slice(1)}
    </span>
  )

  return (
    <PageLayout>
      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen w-full">
        <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
          {/* Header + Create */}
          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Matrix Management</h1>
                <p className="text-lg text-blue-700 mt-2">Manage matrices, see stats, and create new ones.</p>
              </div>
              <button
                onClick={() => setCreateOpen(true)}
                className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-base font-semibold shadow transition"
              >
                <PlusIcon className="h-5 w-5" />
                Create Matrix
              </button>
            </div>
          </header>

          {/* Error banner for stats */}
          {statsError && (
            <div className="mb-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
              {statsError}
            </div>
          )}

          {/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
            <StatCard icon={CheckCircleIcon} label="Active Matrices" value={stats.active} color="bg-green-500" />
            <StatCard icon={ChartBarIcon} label="Total Matrices" value={stats.total} color="bg-blue-900" />
            <StatCard icon={UsersIcon} label="Total Users Subscribed" value={stats.totalUsers} color="bg-amber-600" />
          </div>

          {/* Matrix cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
            {statsLoading ? (
              Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="rounded-2xl bg-white border border-gray-100 shadow-lg overflow-hidden">
                  <div className="p-6 animate-pulse space-y-4">
                    <div className="h-5 w-1/2 bg-gray-200 rounded" />
                    <div className="h-4 w-1/3 bg-gray-200 rounded" />
                    <div className="h-4 w-2/3 bg-gray-200 rounded" />
                    <div className="h-9 w-full bg-gray-100 rounded" />
                  </div>
                </div>
              ))
            ) : matricesView.length === 0 ? (
              <div className="text-sm text-gray-600">No matrices found.</div>
            ) : (
              matricesView.map(m => (
                <article key={m.id} className="rounded-2xl bg-white border border-gray-100 shadow-lg overflow-hidden flex flex-col">
                  <div className="p-6 flex-1 flex flex-col">
                    <div className="flex items-start justify-between gap-3">
                      <h3 className="text-xl font-semibold text-blue-900">{m.name}</h3>
                      <StatusBadge status={m.status} />
                    </div>
                    <div className="mt-2">
                      <span className="inline-flex items-center rounded-full bg-blue-50 border border-blue-200 px-2 py-0.5 text-xs text-blue-900">
                        Max depth: {(!m.policyMaxDepth || m.policyMaxDepth <= 0) ? 'Unlimited' : m.policyMaxDepth}
                      </span>
                    </div>
                    <div className="mt-4 grid grid-cols-1 gap-3 text-sm text-gray-700">
                      <div className="flex items-center gap-2" title="Users count respects each matrix’s max depth policy.">
                        <UsersIcon className="h-5 w-5 text-gray-500" />
                        <span className="font-medium">{m.usersCount}</span>
                        <span className="text-gray-500">users</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <CalendarDaysIcon className="h-5 w-5 text-gray-500" />
                        <span className="text-gray-600">
                          {new Date(m.createdAt).toLocaleDateString()}
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <EnvelopeIcon className="h-5 w-5 text-gray-500" />
                        <span className="text-gray-700 truncate">{m.topNodeEmail}</span>
                      </div>
                    </div>
                    <div className="mt-5 flex items-center justify-between">
                      <button
                        onClick={() => toggleStatus(m.id)}
                        disabled={mutatingId === m.id}
                        className={`rounded-lg px-4 py-2 text-sm font-medium border shadow transition
                          ${m.status === 'active'
                            ? 'border-red-300 text-red-700 hover:bg-red-50 disabled:opacity-60'
                            : 'border-green-300 text-green-700 hover:bg-green-50 disabled:opacity-60'}`}
                      >
                        {mutatingId === m.id
                          ? (m.status === 'active' ? 'Deactivating…' : 'Activating…')
                          : (m.status === 'active' ? 'Deactivate' : 'Activate')}
                      </button>
                      <button
                        className="text-sm font-medium text-blue-900 hover:text-blue-700"
                        onClick={() => {
                          const defA = Number(localStorage.getItem(`matrixDepthA:${m.id}`) ?? 0)
                          const defB = Number(localStorage.getItem(`matrixDepthB:${m.id}`) ?? 5)
                          const params = new URLSearchParams({
                            id: String(m.id),
                            name: m.name,
                            top: m.topNodeEmail,
                            rootUserId: String(m.rootUserId),
                            a: String(Number.isFinite(defA) ? defA : 0),
                            b: String(Number.isFinite(defB) ? defB : 5)
                          })
                          router.push(`/admin/matrix-management/detail?${params.toString()}`)
                        }}
                      >
                        View details →
                      </button>
                    </div>
                  </div>
                </article>
              ))
            )}
          </div>
        </div>

        {/* Create Matrix Modal */}
        {createOpen && (
          <div className="fixed inset-0 z-50">
            <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={() => { setCreateOpen(false); resetForm() }} />
            <div className="absolute inset-0 flex items-center justify-center p-4">
              <div className="w-full max-w-md rounded-2xl bg-white shadow-2xl ring-1 ring-black/10">
                <div className="px-6 py-5 border-b border-gray-100 flex items-center justify-between">
                  <h4 className="text-lg font-semibold text-blue-900">Create Matrix</h4>
                  <button
                    onClick={() => { setCreateOpen(false); resetForm() }}
                    className="text-sm text-gray-500 hover:text-gray-700"
                  >
                    Close
                  </button>
                </div>
                <form onSubmit={handleCreate} className="p-6 space-y-5">
                  {/* Success banner */}
                  {createSuccess && (
                    <div className="rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
                      Matrix created successfully.
                      <div className="mt-1 text-green-800">
                        <span className="font-semibold">Name:</span> {createSuccess.name}{' '}
                        <span className="font-semibold ml-3">Top node:</span> {createSuccess.email}
                      </div>
                    </div>
                  )}

                  {/* 409 force prompt */}
                  {forcePrompt && (
                    <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
                      A matrix configuration already exists for this selection.
                      <div className="mt-2 flex items-center gap-2">
                        <button
                          type="button"
                          onClick={confirmForce}
                          disabled={createLoading}
                          className="rounded-lg bg-amber-600 hover:bg-amber-500 text-white px-4 py-2 text-xs font-medium disabled:opacity-50"
                        >
                          Replace (force)
                        </button>
                        <button
                          type="button"
                          onClick={() => setForcePrompt(null)}
                          disabled={createLoading}
                          className="rounded-lg border border-amber-300 px-4 py-2 text-xs font-medium text-amber-800 hover:bg-amber-100 disabled:opacity-50"
                        >
                          Cancel
                        </button>
                      </div>
                    </div>
                  )}

                  {/* Form fields */}
                  <div>
                    <label className="block text-sm font-medium text-blue-900 mb-1">Matrix Name</label>
                    <input
                      type="text"
                      value={createName}
                      onChange={e => setCreateName(e.target.value)}
                      disabled={createLoading}
                      className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:ring-2 focus:ring-blue-900 focus:border-transparent disabled:bg-gray-100"
                      placeholder="e.g., Platinum Matrix"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-blue-900 mb-1">Top-node Email</label>
                    <input
                      type="email"
                      value={createEmail}
                      onChange={e => setCreateEmail(e.target.value)}
                      disabled={createLoading}
                      className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:ring-2 focus:ring-blue-900 focus:border-transparent disabled:bg-gray-100"
                      placeholder="owner@example.com"
                    />
                  </div>

                  {formError && (
                    <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                      {formError}
                    </div>
                  )}

                  <div className="pt-2 flex items-center justify-end gap-3">
                    <button
                      type="button"
                      onClick={() => { setCreateOpen(false); resetForm() }}
                      disabled={createLoading}
                      className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
                    >
                      Cancel
                    </button>
                    <button
                      type="submit"
                      disabled={createLoading}
                      className="rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-sm font-semibold shadow disabled:opacity-50 inline-flex items-center gap-2"
                    >
                      {createLoading && <span className="h-4 w-4 rounded-full border-2 border-white border-b-transparent animate-spin" />}
                      {createLoading ? 'Creating...' : 'Create Matrix'}
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        )}
      </div>
    </PageLayout>
  )
}