import { Head, router, usePage } from '@inertiajs/react'
import {
  ServerDataTable
  
  
} from '@ui/components/data-table/server-data-table'
import type {ServerColumnDef, ServerDataTableParams} from '@ui/components/data-table/server-data-table';
import { DatePicker } from '@ui/components/date-picker'
import { Main } from '@ui/components/layout/main'
import { Badge } from '@ui/components/ui/badge'
import { Button } from '@ui/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@ui/components/ui/card'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@ui/components/ui/select'
import { Spinner } from '@ui/components/ui/spinner'
import { format, parseISO } from 'date-fns'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { FinanceAppLayout } from '@/layouts/finance-app-layout'

type LogRow = {
  id: number
  source: string | null
  id_po: number | null
  nomor_po: string | null
  id_user: number | null
  nama_user: string | null
  error_message: string | null
  error_trace: string | null
  created_at: string
  updated_at: string
  status_log: 'SUCCESS' | 'FAILED' | 'SKIPPED' | 'UNKNOWN'
}

type PaginatedLogs = {
  data: LogRow[]
  current_page: number
  last_page: number
  per_page: number
  total: number
  from: number | null
  to: number | null
}

type PageProps = {
  auth: { user: { name: string; email: string; role: string } | null }
  logs: PaginatedLogs
  sources: string[]
  summary: { total: number; success: number; failed: number; skipped: number }
  filters: {
    status: string
    source: string
    keyword: string
    date_from: string
    date_to: string
    sort: string
    direction: string
    per_page: number
  }
  refresh_seconds?: number
  [key: string]: unknown
}

const STATUS_VARIANT: Record<string, 'default' | 'destructive' | 'secondary' | 'outline'> = {
  SUCCESS: 'default',
  FAILED: 'destructive',
  SKIPPED: 'secondary',
  UNKNOWN: 'outline',
}

const STATUS_LABEL: Record<string, string> = {
  SUCCESS: 'Berhasil',
  FAILED: 'Gagal',
  SKIPPED: 'Dilewati',
  UNKNOWN: 'Unknown',
}

function ExpandableText({ text, maxLength = 80 }: { text: string; maxLength?: number }) {
  const [expanded, setExpanded] = useState(false)
  const normalized = String(text || '-')
  const canExpand = normalized.length > maxLength

  if (!canExpand) {
    return <span>{normalized}</span>
  }

  const preview = normalized.slice(0, maxLength).trimEnd()

  return (
    <div className='space-y-1'>
      <p className={expanded ? 'whitespace-normal break-words' : 'truncate'}>
        {expanded ? normalized : `${preview}...`}
      </p>
      <button
        type='button'
        className='text-xs font-medium text-primary hover:underline'
        onClick={() => setExpanded((prev) => !prev)}
      >
        {expanded ? 'Sembunyikan' : 'Lihat selengkapnya'}
      </button>
    </div>
  )
}

function buildIntegrationColumns(
  onResend: (row: LogRow) => void,
  resendingPoId: number | null
): ServerColumnDef<LogRow>[] {
  return [
    {
      key: 'created_at',
      label: 'Waktu',
      sortable: true,
      className: 'whitespace-nowrap text-xs',
      render: (row) =>
        new Date(row.created_at).toLocaleString('id-ID', {
          day: '2-digit', month: '2-digit', year: 'numeric',
          hour: '2-digit', minute: '2-digit', second: '2-digit',
        }),
    },
    {
      key: 'status_log',
      label: 'Status',
      render: (row) => (
        <Badge variant={STATUS_VARIANT[row.status_log] ?? 'outline'} className='text-xs'>
          {STATUS_LABEL[row.status_log] ?? row.status_log}
        </Badge>
      ),
    },
    { key: 'source', label: 'Source', sortable: true, className: 'text-xs', render: (row) => row.source ?? '-' },
    { key: 'id_po', label: 'ID PO', sortable: true, className: 'text-xs', render: (row) => row.id_po ?? '-' },
    { key: 'nomor_po', label: 'Nomor PO', sortable: true, className: 'text-xs font-medium', render: (row) => row.nomor_po ?? '-' },
    { key: 'nama_user', label: 'User', sortable: true, className: 'text-xs', render: (row) => row.nama_user ?? '-' },
    {
      key: 'error_message',
      label: 'Keterangan',
      className: 'max-w-xs text-xs text-muted-foreground',
      render: (row) => <ExpandableText text={row.error_message ?? '-'} maxLength={25} />,
    },
    {
      key: 'error_trace',
      label: 'Error Trace',
      defaultHidden: true,
      className: 'max-w-[200px] truncate text-xs font-mono text-muted-foreground',
      render: (row) => row.error_trace ?? '-',
    },
    {
      key: 'actions',
      label: 'Aksi',
      className: 'min-w-[180px]',
      render: (row) => {
        const poId = Number(row.id_po ?? 0)
        const canManage = Number.isFinite(poId) && poId > 0
        const canResend =
          canManage && (row.status_log === 'FAILED' || row.status_log === 'SKIPPED')

        if (!canManage && !canResend) {
return '-'
}

        return (
          <div className='flex items-center gap-2'>
            {canManage && (
              <Button
                type='button'
                variant='outline'
                size='sm'
                onClick={() => {
                  window.location.href = `/monitoring/integrasi-accurate/po/${poId}`
                }}
              >
                Kelola
              </Button>
            )}
            {canResend && (
              <Button
                type='button'
                variant='secondary'
                size='sm'
                className='border border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100'
                disabled={resendingPoId === row.id_po}
                onClick={() => onResend(row)}
              >
                {resendingPoId === row.id_po ? 'Resend...' : 'Resend'}
              </Button>
            )}
          </div>
        )
      },
    },
  ]
}

export default function IntegrationMonitor() {
  const { logs, sources, summary, filters, refresh_seconds } = usePage<PageProps>().props
  const ALL_SOURCE = 'ALL'
  const ROUTE = '/monitoring/integrasi-accurate'
  const [isTableLoading, setIsTableLoading] = useState(false)
  const [resendingPoId, setResendingPoId] = useState<number | null>(null)
  const [actionMessage, setActionMessage] = useState<{
    type: 'success' | 'error'
    text: string
  } | null>(null)

  const [form, setForm] = useState({
    status: filters.status || 'ALL',
    source: filters.source || ALL_SOURCE,
    date_from: filters.date_from || '',
    date_to: filters.date_to || '',
  })

  const buildQuery = () => ({
    status: form.status === 'ALL' ? '' : form.status,
    source: form.source === ALL_SOURCE ? '' : form.source,
    keyword: filters.keyword || '',
    date_from: form.date_from,
    date_to: form.date_to,
    sort: filters.sort || 'id',
    direction: filters.direction || 'desc',
    per_page: String(logs.per_page),
    page: '1',
  })

  const applyFilter = () => {
    router.get(ROUTE, buildQuery() as Record<string, string>, {
      preserveState: true,
      preserveScroll: true,
      replace: true,
      only: ['logs', 'filters', 'summary'],
      onStart: () => setIsTableLoading(true),
      onFinish: () => setIsTableLoading(false),
    })
  }

  const fromDate = form.date_from ? parseISO(form.date_from) : undefined
  const toDate = form.date_to ? parseISO(form.date_to) : undefined

  const handleResend = useCallback(async (row: LogRow) => {
    if (!row.id_po) {
return
}

    const confirmed = window.confirm(`Resend integrasi untuk PO #${row.id_po}?`)

    if (!confirmed) {
return
}

    const csrf =
      document
        .querySelector('meta[name="csrf-token"]')
        ?.getAttribute('content') ?? ''

    setResendingPoId(row.id_po)

    try {
      const response = await fetch('/monitoring/integrasi-accurate/resend', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
          'X-CSRF-TOKEN': csrf,
          'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify({
          id_po: row.id_po,
          source: row.source ?? '',
          nomor_po: row.nomor_po ?? '',
        }),
      })

      const payload = await response.json().catch(() => ({}))
      const ok = Boolean(payload?.ok) && response.ok
      setActionMessage({
        type: ok ? 'success' : 'error',
        text:
          typeof payload?.message === 'string'
            ? payload.message
            : 'Gagal memproses resend integrasi.',
      })

      router.reload({
        preserveUrl: true,
        only: ['logs', 'filters', 'summary'],
      })
    } catch {
      setActionMessage({
        type: 'error',
        text: 'Gagal mengirim request resend.',
      })
    } finally {
      setResendingPoId(null)
    }
  }, [])

  const integrationColumns = useMemo(
    () => buildIntegrationColumns(handleResend, resendingPoId),
    [handleResend, resendingPoId]
  )

  useEffect(() => {
    const refreshMs = Math.max(3, Number(refresh_seconds || 10)) * 1000
    const interval = window.setInterval(() => {
      const active = document.activeElement as HTMLElement | null

      if (active && ['INPUT', 'TEXTAREA', 'SELECT'].includes(active.tagName)) {
        return
      }

      router.reload({
        preserveUrl: true,
        only: ['logs', 'filters', 'summary'],
      })
    }, refreshMs)

    return () => {
      window.clearInterval(interval)
    }
  }, [refresh_seconds])

  const dtParams: ServerDataTableParams = {
    page: logs.current_page,
    per_page: logs.per_page,
    sort: filters.sort || 'id',
    direction: (filters.direction || 'desc') as 'asc' | 'desc',
    search: filters.keyword,
    status: filters.status,
    source: filters.source,
    keyword: filters.keyword,
    date_from: filters.date_from,
    date_to: filters.date_to,
  }

  return (
    <FinanceAppLayout>
      <Head title='Integration Monitor - Finance' />

      <Main>
        <div className='mb-4 flex items-center justify-between'>
          <div>
            <h1 className='text-2xl font-bold tracking-tight'>Accurate Integration Monitor</h1>
            <p className='text-sm text-muted-foreground'>
              Pantau status integrasi PO ke Accurate - SUCCESS / FAILED / SKIPPED
            </p>
            <p className='text-xs text-muted-foreground'>
              Auto refresh setiap {Math.max(3, Number(refresh_seconds || 10))} detik
            </p>
          </div>
        </div>

        {actionMessage && (
          <div
            className={`mb-4 rounded-md border px-3 py-2 text-sm ${
              actionMessage.type === 'success'
                ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
                : 'border-red-200 bg-red-50 text-red-700'
            }`}
          >
            {actionMessage.text}
          </div>
        )}

        <div className='mb-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4'>
          {[
            { label: 'Total Log', value: summary.total, cls: '' },
            { label: 'Berhasil', value: summary.success, cls: 'text-emerald-600' },
            { label: 'Gagal', value: summary.failed, cls: 'text-red-600' },
            { label: 'Dilewati', value: summary.skipped, cls: 'text-yellow-600' },
          ].map(({ label, value, cls }) => (
            <Card key={label} className='gap-1 py-3'>
              <CardHeader className='px-4 pb-0 pt-2.5'>
                <CardTitle className='text-sm font-medium text-muted-foreground'>{label}</CardTitle>
              </CardHeader>
              <CardContent className='px-4 pb-2 pt-0'>
                <p className={`text-[2rem] leading-none font-bold ${cls}`}>
                  {value.toLocaleString('id-ID')}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>

        <Card className='mb-4 gap-2 py-3'>
          <CardHeader className='px-4 gap-0'>
            <CardTitle className='text-sm font-semibold gap-0'>Filter</CardTitle>
          </CardHeader>
          <CardContent className='px-4 pb-3 pt-0'>
            <div className='flex flex-wrap gap-2.5'>
              <Select
                value={form.status}
                onValueChange={(v) => setForm((f) => ({ ...f, status: v }))}
              >
                <SelectTrigger className='w-36'>
                  <SelectValue placeholder='Status' />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value='ALL'>Semua</SelectItem>
                  <SelectItem value='SUCCESS'>SUCCESS</SelectItem>
                  <SelectItem value='FAILED'>FAILED</SelectItem>
                  <SelectItem value='SKIPPED'>SKIPPED</SelectItem>
                </SelectContent>
              </Select>

              <Select
                value={form.source}
                onValueChange={(v) => setForm((f) => ({ ...f, source: v }))}
              >
                <SelectTrigger className='w-48'>
                  <SelectValue placeholder='Source' />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value={ALL_SOURCE}>Semua Source</SelectItem>
                  {sources.map((s) => (
                    <SelectItem key={s} value={s}>
                      {s}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <DatePicker
                selected={fromDate}
                onSelect={(date) =>
                  setForm((f) => ({
                    ...f,
                    date_from: date ? format(date, 'yyyy-MM-dd') : '',
                  }))
                }
                placeholder='Tanggal dari'
                className='w-[160px]'
              />
              <DatePicker
                selected={toDate}
                onSelect={(date) =>
                  setForm((f) => ({
                    ...f,
                    date_to: date ? format(date, 'yyyy-MM-dd') : '',
                  }))
                }
                placeholder='Tanggal sampai'
                className='w-[160px]'
              />

              <Button onClick={applyFilter}>Terapkan</Button>
            </div>
          </CardContent>
        </Card>

        <div className='relative'>
          {isTableLoading && (
            <div className='absolute inset-0 z-10 flex items-center justify-center rounded-md bg-background/70 backdrop-blur-sm'>
              <div className='flex items-center gap-2 text-sm text-muted-foreground'>
                <Spinner className='size-4' />
                Loading data...
              </div>
            </div>
          )}

          <ServerDataTable<LogRow>
            data={logs}
            columns={integrationColumns}
            params={dtParams}
            onParamsChange={(p) => {
              const nextQuery = {
                ...p,
                keyword: typeof p.search === 'string' ? p.search : '',
              }

              router.get(ROUTE, nextQuery as unknown as Record<string, string>, {
                preserveState: true,
                preserveScroll: true,
                replace: true,
                only: ['logs', 'filters'],
                onStart: () => setIsTableLoading(true),
                onFinish: () => setIsTableLoading(false),
              })
            }}
            searchable
            searchPlaceholder='Search No PO / user / pesan'
            pageSizes={[20, 50, 100]}
            emptyText='Tidak ada data'
          />
        </div>
      </Main>
    </FinanceAppLayout>
  )
}