import { useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppPath } from '@core/hooks/useAppPath'
import { useWorkbenchRole } from '../../hooks/useWorkbenchRole'
import { apiFetch } from '@core/lib/api'
import { Button } from '@core/components/ui/button'
import { Input } from '@core/components/ui/input'
import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@core/components/ui/table'
import { Badge } from '@core/components/ui/badge'
import { Checkbox } from '@core/components/ui/checkbox'
import { Search, Siren, Plus } from 'lucide-react'
import { SeverityBadge, TeamBadge } from '../../components/work/badges'

const RESOLVED_INCIDENT_STATUSES = ['resolved', 'postmortem_complete']

interface IncidentRecord {
  id: string
  title: string
  status: string
  data: Record<string, any>
  updated_at?: string
}

function isActiveIncident(item: IncidentRecord): boolean {
  return item.data?.work_type === 'incident_followup' && !RESOLVED_INCIDENT_STATUSES.includes(item.data?.incident_status)
}

export default function IncidentDashboard() {
  const navigate = useNavigate()
  const appPath = useAppPath()
  const { role } = useWorkbenchRole()
  const [items, setItems] = useState<IncidentRecord[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [filter, setFilter] = useState('')
  const [showResolved, setShowResolved] = useState(false)
  const [sort, setSort] = useState<{ key: string; direction: 'asc' | 'desc' }>({ key: 'updated_at', direction: 'desc' })

  useEffect(() => {
    const load = async () => {
      setLoading(true)
      setError(null)
      try {
        const res = await apiFetch('/api/admin-data?entity=items&type_slug=workbench_work_item&limit=500')
        const json = await res.json()
        const data = Array.isArray(json?.data) ? json.data : []
        setItems(data)
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load incidents')
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [])

  const incidents = useMemo(() => {
    let rows = items.filter((item) => item.data?.work_type === 'incident_followup')
    if (!showResolved) {
      rows = rows.filter((item) => !RESOLVED_INCIDENT_STATUSES.includes(item.data?.incident_status))
    }
    const term = filter.trim().toLowerCase()
    if (term) {
      rows = rows.filter((item) =>
        [item.title, item.description, item.status, item.id]
          .concat(Object.values(item.data || {}))
          .some((v) => String(v || '').toLowerCase().includes(term))
      )
    }
    rows = [...rows].sort((a, b) => {
      const av = a[sort.key as keyof IncidentRecord] ?? a.data?.[sort.key] ?? ''
      const bv = b[sort.key as keyof IncidentRecord] ?? b.data?.[sort.key] ?? ''
      if (av < bv) return sort.direction === 'asc' ? -1 : 1
      if (av > bv) return sort.direction === 'asc' ? 1 : -1
      return 0
    })
    return rows
  }, [items, showResolved, filter, sort])

  const stats = useMemo(() => {
    const active = items.filter(isActiveIncident)
    return {
      active: active.length,
      sev1: active.filter((i) => i.data?.severity === 'sev1').length,
      investigating: active.filter((i) => i.data?.incident_status === 'investigating').length,
      mitigating: active.filter((i) => i.data?.incident_status === 'mitigating').length,
      monitoring: active.filter((i) => i.data?.incident_status === 'monitoring').length,
      postmortem: active.filter((i) => i.data?.incident_status === 'postmortem_pending').length,
    }
  }, [items])

  const handleSort = (key: string) => {
    setSort((prev) => ({
      key,
      direction: prev.key === key && prev.direction === 'asc' ? 'desc' : 'asc',
    }))
  }

  const incidentStatus = (value?: string) => {
    if (!value) return <Badge variant="outline">Unknown</Badge>
    const label = value.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
    return <Badge variant="outline">{label}</Badge>
  }

  const arrayCount = (value: any) => {
    if (Array.isArray(value)) return value.length
    if (typeof value === 'string' && value.trim().startsWith('[')) {
      try {
        const parsed = JSON.parse(value)
        return Array.isArray(parsed) ? parsed.length : 0
      } catch {
        return 0
      }
    }
    return 0
  }

  return (
    <div className="p-4 lg:p-6 h-[calc(100vh-4rem)] flex flex-col space-y-6">
      <div className="flex items-center justify-between shrink-0">
        <div className="flex items-center gap-3">
          <Siren className="h-6 w-6 text-destructive" />
          <h1 className="text-2xl font-bold tracking-tight">Incident Dashboard</h1>
        </div>
        <Button size="sm" onClick={() => navigate(appPath(`/${role}/items/new`))}>
          <Plus className="h-4 w-4 mr-2" /> Declare Incident
        </Button>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Active Incidents</CardTitle>
            <Siren className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.active}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Active SEV1</CardTitle>
            <Badge variant="destructive" className="text-[0.625rem]">SEV1</Badge>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.sev1}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Investigating</CardTitle>
            <Badge variant="outline" className="text-[0.625rem]">Investigating</Badge>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.investigating}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Postmortem Pending</CardTitle>
            <Badge variant="secondary" className="text-[0.625rem]">Pending</Badge>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.postmortem}</div>
          </CardContent>
        </Card>
      </div>

      <div className="flex items-center justify-between gap-4">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
            placeholder="Filter incidents…"
            className="pl-9"
          />
        </div>
        <div className="flex items-center gap-2">
          <Checkbox
            id="show-resolved"
            checked={showResolved}
            onCheckedChange={(v) => setShowResolved(v === true)}
          />
          <label htmlFor="show-resolved" className="text-sm text-muted-foreground">Show resolved</label>
        </div>
      </div>

      <Card className="flex-1 min-h-0 flex flex-col">
        <CardHeader className="shrink-0">
          <CardTitle className="text-base">{showResolved ? 'All Incidents' : 'Active Incidents'}</CardTitle>
        </CardHeader>
        <CardContent className="flex-1 min-h-0 overflow-auto p-0">
          {loading ? (
            <div className="p-6 text-sm text-muted-foreground">Loading incidents…</div>
          ) : error ? (
            <div className="p-6 text-destructive text-sm">{error}</div>
          ) : incidents.length === 0 ? (
            <div className="p-6 text-sm text-muted-foreground">No incidents found.</div>
          ) : (
            <Table>
              <TableHeader className="sticky top-0 bg-background z-10">
                <TableRow>
                  <TableHead className="cursor-pointer" onClick={() => handleSort('title')}>Title</TableHead>
                  <TableHead>Severity</TableHead>
                  <TableHead>Incident Status</TableHead>
                  <TableHead className="cursor-pointer" onClick={() => handleSort('status')}>Record Status</TableHead>
                  <TableHead>Team</TableHead>
                  <TableHead>Started</TableHead>
                  <TableHead>Responders</TableHead>
                  <TableHead>Services</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {incidents.map((item) => (
                  <TableRow
                    key={item.id}
                    className="cursor-pointer hover:bg-muted/50"
                    onClick={() => navigate(appPath(`/${role}/items/${item.id}`))}
                  >
                    <TableCell>{item.title || 'Untitled'}</TableCell>
                    <TableCell><SeverityBadge severity={item.data?.severity} /></TableCell>
                    <TableCell>{incidentStatus(item.data?.incident_status)}</TableCell>
                    <TableCell><Badge variant="outline">{item.status || '—'}</Badge></TableCell>
                    <TableCell><TeamBadge team={item.data?.team} /></TableCell>
                    <TableCell>{item.data?.started_at || '—'}</TableCell>
                    <TableCell>{arrayCount(item.data?.responders)}</TableCell>
                    <TableCell>{arrayCount(item.data?.affected_services)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}