'use client'

import { useCallback, useEffect, useState } from 'react'
import {
  getOperationsSummary,
  getOperationsAnalytics,
  getJobsStatus,
  runJob,
  OperationsSummaryData,
  OperationsAnalyticsData,
  JobsStatusData,
} from '@/lib/api/agent'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { Skeleton } from '@/components/ui/Skeleton'
import { EmptyState } from '@/components/ui/EmptyState'
import { ErrorState } from '@/components/ui/ErrorState'
import { formatCurrency, formatRelativeTime } from '@/lib/types'
import { useToast } from '@/components/ui/Toast'
import {
  ClipboardList,
  AlertTriangle,
  Truck,
  CreditCard,
  BellRing,
  PackageX,
  Gauge,
  RefreshCw,
  Play,
  CheckCircle2,
  XCircle,
  TrendingUp,
  Timer,
} from 'lucide-react'

const JOB_LABELS: Record<string, string> = {
  supplier_delay_check: 'Supplier delay watch',
  payment_reconciliation: 'Payment reconciliation',
  email_retry: 'Email retry',
  approval_expiration: 'Approval expiration',
  low_stock_eval: 'Low stock evaluation',
}

function StatCard({
  title,
  value,
  sub,
  tone = 'default',
  icon: Icon,
}: {
  title: string
  value: string
  sub?: string | null
  tone?: 'default' | 'warning' | 'danger' | 'success'
  icon: React.ComponentType<{ className?: string }>
}) {
  const toneCls =
    tone === 'danger'
      ? 'text-red-600 dark:text-red-400'
      : tone === 'warning'
        ? 'text-amber-600 dark:text-amber-400'
        : tone === 'success'
          ? 'text-emerald-600 dark:text-emerald-400'
          : 'text-gray-900 dark:text-white'
  return (
    <Card>
      <CardContent className="p-4">
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            <p className="truncate text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
              {title}
            </p>
            <p className={`mt-1 text-2xl font-bold ${toneCls}`}>{value}</p>
            {sub ? (
              <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{sub}</p>
            ) : null}
          </div>
          <Icon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
        </div>
      </CardContent>
    </Card>
  )
}

export default function OperationsPage() {
  const { toast } = useToast()
  const [summary, setSummary] = useState<OperationsSummaryData | null>(null)
  const [jobs, setJobs] = useState<JobsStatusData | null>(null)
  const [analytics, setAnalytics] = useState<OperationsAnalyticsData | null>(null)
  const [windowDays, setWindowDays] = useState(30)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [runningJob, setRunningJob] = useState<string | null>(null)

  const load = useCallback(
    async (withAnalytics: boolean) => {
      const [sumRes, jobsRes, anRes] = await Promise.all([
        getOperationsSummary(),
        getJobsStatus(),
        withAnalytics ? getOperationsAnalytics(windowDays) : Promise.resolve(null),
      ])
      if (!sumRes.success) throw new Error(sumRes.message)
      setSummary(sumRes.data)
      if (jobsRes.success) setJobs(jobsRes.data)
      if (anRes && anRes.success) setAnalytics(anRes.data)
    },
    [windowDays]
  )

  useEffect(() => {
    let mounted = true
    async function initial() {
      try {
        await load(true)
      } catch (err) {
        if (mounted) setError(err instanceof Error ? err.message : 'Failed to load operations data')
      } finally {
        if (mounted) setLoading(false)
      }
    }
    initial()
    const interval = setInterval(() => {
      load(analytics !== null).catch(() => undefined)
    }, 15000)
    return () => {
      mounted = false
      clearInterval(interval)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [load])

  async function handleRunJob(name: string) {
    setRunningJob(name)
    const res = await runJob(name)
    setRunningJob(null)
    if (!res.success) {
      toast({ title: 'Job failed', description: res.message, variant: 'destructive' })
    } else {
      toast({ title: `${JOB_LABELS[name] ?? name} finished`, variant: 'success' })
      try {
        await load(false)
      } catch {
        /* keep previous view */
      }
    }
  }

  if (loading) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Operations Center</h1>
          <p className="text-gray-500 dark:text-gray-400">Everything that needs attention, in one place</p>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <Skeleton key={i} className="h-24 w-full rounded-xl" />
          ))}
        </div>
      </div>
    )
  }

  if (error || !summary) return <ErrorState message={error ?? 'No data'} onRetry={() => window.location.reload()} />

  const payAwait = summary.payments_awaiting_confirmation
  const jobNames = jobs?.known_jobs ?? Object.keys(JOB_LABELS)

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Operations Center</h1>
          <p className="text-gray-500 dark:text-gray-400">
            Everything that needs attention, in one place
          </p>
        </div>
        <Button variant="outline" size="sm" onClick={() => load(true).catch(() => undefined)}>
          <RefreshCw className="mr-2 h-4 w-4" /> Refresh
        </Button>
      </div>

      {/* Attention items */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <StatCard
          title="Approvals pending"
          value={String(summary.approvals_pending)}
          sub={
            summary.oldest_pending_approval_hours != null
              ? `Oldest waiting ${summary.oldest_pending_approval_hours}h`
              : null
          }
          tone={summary.approvals_pending > 0 ? 'warning' : 'success'}
          icon={ClipboardList}
        />
        <StatCard
          title="Purchase requests open"
          value={String(summary.purchase_requests_open)}
          sub={summary.purchase_requests_open > 0 ? 'Awaiting supplier response' : null}
          tone={summary.purchase_requests_open > 0 ? 'default' : 'success'}
          icon={Truck}
        />
        <StatCard
          title="Deliveries in transit"
          value={`${summary.deliveries_in_transit - summary.deliveries_delayed}/${summary.deliveries_in_transit}`}
          sub={
            summary.deliveries_delayed > 0
              ? `${summary.deliveries_delayed} delayed — follow-up sent`
              : 'All on time'
          }
          tone={summary.deliveries_delayed > 0 ? 'danger' : 'success'}
          icon={Truck}
        />
        <StatCard
          title="Payments awaiting confirmation"
          value={String(payAwait.count)}
          sub={payAwait.count > 0 ? formatCurrency(payAwait.total, 'USD') : null}
          tone={payAwait.count > 0 ? 'warning' : 'success'}
          icon={CreditCard}
        />
        <StatCard
          title="Payments failed (24h)"
          value={String(summary.payments_failed_last_24h)}
          sub={summary.payments_failed_last_24h > 0 ? 'Retry or reconcile manually' : null}
          tone={summary.payments_failed_last_24h > 0 ? 'danger' : 'success'}
          icon={CreditCard}
        />
        <StatCard
          title="Unread notifications"
          value={String(summary.unread_notifications)}
          sub={null}
          tone={summary.unread_notifications > 0 ? 'default' : 'success'}
          icon={BellRing}
        />
      </div>

      {/* Stock alerts */}
      {(summary.inventory_low.length > 0 || summary.inventory_out.length > 0) && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <PackageX className="h-4 w-4" /> Stock alerts
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {summary.inventory_out.map(item => (
              <div key={item.name} className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-3 py-2 dark:border-red-900/50 dark:bg-red-950/30">
                <span className="text-sm font-medium text-gray-900 dark:text-white">{item.name}</span>
                <Badge variant="danger">Out of stock</Badge>
              </div>
            ))}
            {summary.inventory_low.map(item => (
              <div key={item.name} className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 dark:border-amber-900/50 dark:bg-amber-950/30">
                <span className="text-sm font-medium text-gray-900 dark:text-white">{item.name}</span>
                <Badge variant="warning">{item.available} left</Badge>
              </div>
            ))}
          </CardContent>
        </Card>
      )}

      {/* Automation health */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between gap-2 text-base">
            <span className="flex items-center gap-2">
              <Gauge className="h-4 w-4" /> Automation health
            </span>
            {jobs ? (
              <Badge variant={jobs.enabled ? 'success' : 'secondary'}>
                {jobs.enabled ? `Every ${jobs.interval_seconds}s` : 'Paused'}
              </Badge>
            ) : null}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-2">
          {jobNames.map(name => {
            const health = summary.jobs_health[name]
            const last = jobs?.last_results?.[name]
            const ok =
              health?.last_status === 'success' || (!health && last?.status === 'success')
            const failed =
              health?.last_status === 'failed' || (!health && last?.status === 'failed')
            return (
              <div
                key={name}
                className="flex items-center justify-between gap-3 rounded-lg border border-gray-100 px-3 py-2 dark:border-gray-800"
              >
                <div className="min-w-0">
                  <p className="text-sm font-medium text-gray-900 dark:text-white">
                    {JOB_LABELS[name] ?? name}
                  </p>
                  <p className="truncate text-xs text-gray-500 dark:text-gray-400">
                    {ok
                      ? `Last run OK · ${formatRelativeTime(health?.last_started_at ?? last?.finished_at ?? '')}`
                      : failed
                        ? `Failed: ${health?.last_error ?? last?.error ?? 'error'}`
                        : 'Never run yet'}
                  </p>
                </div>
                <div className="flex flex-shrink-0 items-center gap-2">
                  {ok ? (
                    <CheckCircle2 className="h-4 w-4 text-emerald-500" aria-label="healthy" />
                  ) : failed ? (
                    <XCircle className="h-4 w-4 text-red-500" aria-label="failing" />
                  ) : null}
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={runningJob === name}
                    onClick={() => handleRunJob(name)}
                  >
                    <Play className="mr-1 h-3 w-3" />
                    {runningJob === name ? 'Running…' : 'Run'}
                  </Button>
                </div>
              </div>
            )
          })}
        </CardContent>
      </Card>

      {/* Analytics */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between gap-2 text-base">
            <span className="flex items-center gap-2">
              <TrendingUp className="h-4 w-4" /> Performance ({analytics?.window_days ?? windowDays}d)
            </span>
            <select
              aria-label="Analytics window"
              value={windowDays}
              onChange={e => {
                setWindowDays(Number(e.target.value))
                getOperationsAnalytics(Number(e.target.value)).then(r => {
                  if (r.success) setAnalytics(r.data)
                })
              }}
              className="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs dark:border-gray-700 dark:bg-gray-900"
            >
              <option value={7}>7 days</option>
              <option value={30}>30 days</option>
              <option value={90}>90 days</option>
            </select>
          </CardTitle>
        </CardHeader>
        <CardContent>
          {analytics ? (
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
              <StatCard
                title="Confirmed revenue"
                value={formatCurrency(analytics.revenue_confirmed, analytics.currency)}
                icon={TrendingUp}
              />
              <StatCard
                title="Procurement spend"
                value={formatCurrency(analytics.procurement_spend, analytics.currency)}
                sub={`Margin est. ${formatCurrency(analytics.gross_margin_estimate, analytics.currency)}`}
                icon={TrendingUp}
              />
              <StatCard
                title="Payment success"
                value={analytics.payment_success_rate_pct != null ? `${analytics.payment_success_rate_pct}%` : '—'}
                sub={`${analytics.orders_total} orders`}
                tone={
                  analytics.payment_success_rate_pct == null
                    ? 'default'
                    : analytics.payment_success_rate_pct >= 80
                      ? 'success'
                      : 'warning'
                }
                icon={CreditCard}
              />
              <StatCard
                title="Avg completion"
                value={analytics.avg_order_completion_hours != null ? `${analytics.avg_order_completion_hours}h` : '—'}
                sub="Order placed → completed"
                icon={Timer}
              />
              <StatCard
                title="Avg lead time"
                value={analytics.avg_procurement_lead_time_hours != null ? `${analytics.avg_procurement_lead_time_hours}h` : '—'}
                sub="PR created → received"
                icon={Timer}
              />
              <StatCard
                title="Delivery delay rate"
                value={analytics.delivery_delay_rate_pct != null ? `${analytics.delivery_delay_rate_pct}%` : '—'}
                tone={
                  analytics.delivery_delay_rate_pct == null
                    ? 'default'
                    : analytics.delivery_delay_rate_pct <= 10
                      ? 'success'
                      : 'warning'
                }
                icon={Truck}
              />
              <StatCard
                title="Supplier response"
                value={analytics.supplier_response_time_hours_avg != null ? `${analytics.supplier_response_time_hours_avg}h` : '—'}
                sub={
                  analytics.supplier_acceptance_rate_pct != null
                    ? `${analytics.supplier_acceptance_rate_pct}% accepted`
                    : null
                }
                icon={Truck}
              />
              <StatCard
                title="Agent task success"
                value={analytics.agent_task_success_rate_pct != null ? `${analytics.agent_task_success_rate_pct}%` : '—'}
                sub={`${analytics.agent_tasks_total} tasks`}
                icon={Gauge}
              />
            </div>
          ) : (
            <EmptyState title="No analytics yet" description="KPIs appear once orders flow through." />
          )}
        </CardContent>
      </Card>

      {summary.latest_notifications.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Latest notifications</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {summary.latest_notifications.map(n => (
              <div key={n.id} className="flex items-start justify-between gap-3 border-b border-gray-100 pb-2 last:border-0 last:pb-0 dark:border-gray-800">
                <div className="min-w-0">
                  <p className="text-sm text-gray-900 dark:text-white">{n.message}</p>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {n.type} · {formatRelativeTime(n.created_at)}
                  </p>
                </div>
                <Badge
                  variant={
                    n.priority === 'critical'
                      ? 'danger'
                      : n.priority === 'important'
                        ? 'warning'
                        : 'secondary'
                  }
                >
                  {n.priority}
                </Badge>
              </div>
            ))}
          </CardContent>
        </Card>
      )}

      {summary.inventory_low.length === 0 &&
        summary.inventory_out.length === 0 &&
        summary.approvals_pending === 0 &&
        summary.latest_notifications.length === 0 && (
          <EmptyState
            icon={AlertTriangle}
            title="All clear"
            description="No attention items right now. The automation worker keeps watching."
          />
        )}
    </div>
  )
}