import { useRef, type ReactNode, type RefObject } from 'react'
import { AlertCircle, Check, ChevronDown, Copy, Download, ExternalLink, RefreshCw } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ReportError, ReportSkeleton } from '@/components/ui/reporting'
import { useSystemInfo } from '../hooks/use-system-info'
import { buildDiagnostics, displayValue, environmentGroups, registrationRows, statusLabel, summarizeDiagnostics } from '../diagnostics'
import type { DiagnosticCheck, DiagnosticStatus } from '../config'
import type { ReportRow } from '../diagnostics'

const statusClass: Record<DiagnosticStatus, string> = {
  pass: 'bg-emerald-50 text-emerald-800', warning: 'bg-amber-50 text-amber-900',
  fail: 'bg-red-50 text-red-800', unknown: 'bg-slate-100 text-slate-700',
}

function Status({ status }: { status: DiagnosticStatus }) {
  return <span className={`inline-flex shrink-0 items-center rounded px-2 py-0.5 text-xs font-medium ${statusClass[status]}`}>{statusLabel[status]}</span>
}

function Rows({ rows }: { rows: ReportRow[] }) {
  return <dl className="min-w-0 divide-y">
    {rows.map(([label, value]) => <div key={label} className="grid min-w-0 gap-1 py-3 text-sm sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] sm:gap-6">
      <dt className="min-w-0 text-muted-foreground [overflow-wrap:anywhere]">{label}</dt>
      <dd className="min-w-0 font-medium [overflow-wrap:anywhere]">{displayValue(value)}</dd>
    </div>)}
  </dl>
}

function DetailsSection({ title, description, children, sectionRef, nested = false }: { title: string; description?: string; children: ReactNode; sectionRef?: RefObject<HTMLDetailsElement>; nested?: boolean }) {
  const Heading = nested ? 'h3' : 'h2'
  return <details ref={sectionRef} className="group min-w-0 rounded-xl border bg-background">
    <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 rounded-xl px-5 py-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 [&::-webkit-details-marker]:hidden">
      <div className="min-w-0"><Heading className="text-base font-semibold">{title}</Heading>{description && <p className="mt-1 text-sm text-muted-foreground [overflow-wrap:anywhere]">{description}</p>}</div>
      <ChevronDown aria-hidden="true" className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180 motion-reduce:transition-none" />
    </summary>
    <div className="min-w-0 border-t px-5 pb-3">{children}</div>
  </details>
}

function CheckRow({ check, expanded = false }: { check: DiagnosticCheck; expanded?: boolean }) {
  return <li className="min-w-0 space-y-2 py-4">
    <div className="flex items-start justify-between gap-3"><h3 className="min-w-0 text-sm font-semibold [overflow-wrap:anywhere]">{check.name}</h3><Status status={check.status} /></div>
    <dl className="grid min-w-0 gap-2 text-sm sm:grid-cols-2 sm:gap-6">
      <div className="min-w-0"><dt className="text-muted-foreground">Current</dt><dd className="mt-0.5 font-medium [overflow-wrap:anywhere]">{check.current}</dd></div>
      <div className="min-w-0"><dt className="text-muted-foreground">{check.kind === 'requirement' ? 'Required' : 'Guidance'}</dt><dd className="mt-0.5 [overflow-wrap:anywhere]">{check.expected}</dd></div>
    </dl>
    {expanded && <>
      <p className="max-w-[75ch] text-sm text-muted-foreground [overflow-wrap:anywhere]">{check.detail}</p>
      {check.action && <p className="max-w-[75ch] text-sm [overflow-wrap:anywhere]">{check.action}</p>}
      {check.helpUrl && <a href={check.helpUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 rounded-sm text-sm font-medium text-primary underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-primary/40">Memory configuration guide<ExternalLink aria-hidden="true" className="h-3.5 w-3.5" /><span className="sr-only"> (opens in a new tab)</span></a>}
    </>}
  </li>
}

export function SystemInfoPage() {
  const { systemInfo: info, loading, error, checkedAt, refresh, copyState, copyToClipboard, downloadReport, downloadError } = useSystemInfo()
  const issuesRef = useRef<HTMLElement>(null)
  const passedRef = useRef<HTMLDetailsElement>(null)
  const checks = info ? buildDiagnostics(info) : []
  const counts = summarizeDiagnostics(checks)
  const priority: Record<DiagnosticStatus, number> = { fail: 0, warning: 1, unknown: 2, pass: 3 }
  const issues = checks.filter(check => check.status !== 'pass').sort((a, b) => priority[a.status] - priority[b.status])
  const passed = checks.filter(check => check.status === 'pass')
  const focusIssues = () => { issuesRef.current?.scrollIntoView({ block: 'start' }); issuesRef.current?.focus({ preventScroll: true }) }
  const showPassed = () => { if (passedRef.current) { passedRef.current.open = true; passedRef.current.scrollIntoView({ block: 'start' }); passedRef.current.querySelector('summary')?.focus({ preventScroll: true }) } }

  return <div className="flex min-w-0 flex-1 flex-col gap-6 bg-[#f5f6f8] p-4 sm:p-6">
    <header className="flex min-w-0 flex-wrap items-start justify-between gap-4">
      <div className="min-w-0 space-y-1">
        <h1 className="text-2xl font-semibold tracking-tight">System Info</h1>
        <p className="text-sm text-muted-foreground">Compatibility checks, configuration guidance and a report for support.</p>
        <p role="status" className="text-xs text-muted-foreground">{loading ? 'Checking system information…' : checkedAt ? `Last checked ${checkedAt.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })} · browser timezone` : ''}</p>
      </div>
      <div className="flex flex-wrap gap-2">
        <Button type="button" variant="outline" size="sm" className="h-11 sm:h-9" onClick={refresh} disabled={loading}><RefreshCw aria-hidden="true" className={`mr-2 h-4 w-4 ${loading ? 'animate-spin motion-reduce:animate-none' : ''}`} />Refresh</Button>
        <Button type="button" variant="outline" size="sm" className="h-11 sm:h-9" onClick={copyToClipboard} disabled={!info || copyState === 'copying'}>
          {copyState === 'success' ? <Check aria-hidden="true" className="mr-2 h-4 w-4" /> : <Copy aria-hidden="true" className="mr-2 h-4 w-4" />}
          {copyState === 'copying' ? 'Copying…' : copyState === 'success' ? 'Copied report' : 'Copy report'}
        </Button>
        <Button type="button" variant="outline" size="sm" className="h-11 sm:h-9" onClick={downloadReport} disabled={!info}><Download aria-hidden="true" className="mr-2 h-4 w-4" />Download report</Button>
      </div>
    </header>

    <div role="status" className="sr-only">{copyState === 'success' ? 'System report copied to clipboard.' : copyState === 'copying' ? 'Copying system report.' : ''}</div>
    {copyState === 'error' && <p role="alert" className="rounded-lg border border-red-200 bg-background p-4 text-sm text-red-800">The report could not be copied. Your browser may restrict clipboard access. Try Copy report again or use Download report.</p>}
    {downloadError && <p role="alert" className="rounded-lg border border-red-200 bg-background p-4 text-sm text-red-800">The download could not be started. Try again or use Copy report.</p>}
    {error && <ReportError message={error} stale={!!info} onRetry={refresh} />}
    {!info && loading && <ReportSkeleton label="Loading system information" />}

    {info && <>
      <section aria-label="Diagnostic summary" className="flex min-w-0 flex-wrap items-center gap-x-6 gap-y-3 rounded-xl border bg-background px-5 py-4 text-sm">
        {counts.fail ? <button type="button" onClick={focusIssues} className="rounded-sm font-medium text-red-800 focus-visible:ring-2 focus-visible:ring-primary/40"><span className="tabular-nums">{counts.fail}</span> failed</button> : <span className="text-muted-foreground">0 failed</span>}
        {counts.warning ? <button type="button" onClick={focusIssues} className="rounded-sm font-medium text-amber-900 focus-visible:ring-2 focus-visible:ring-primary/40"><span className="tabular-nums">{counts.warning}</span> to review</button> : <span className="text-muted-foreground">0 to review</span>}
        {counts.unknown ? <button type="button" onClick={focusIssues} className="rounded-sm text-slate-700 focus-visible:ring-2 focus-visible:ring-primary/40"><span className="tabular-nums">{counts.unknown}</span> unavailable</button> : <span className="text-muted-foreground">0 unavailable</span>}
        {counts.pass ? <button type="button" onClick={showPassed} className="rounded-sm font-medium text-emerald-800 focus-visible:ring-2 focus-visible:ring-primary/40"><span className="tabular-nums">{counts.pass}</span> passed</button> : <span className="text-muted-foreground">0 passed</span>}
        <p className="basis-full text-xs text-muted-foreground">Includes compatibility, memory recommendations, PHP extensions and registration setup. Not a security or background-job health audit.</p>
      </section>

      <section ref={issuesRef} tabIndex={-1} aria-labelledby="system-attention-title" className="min-w-0 scroll-mt-20 rounded-xl border bg-background px-5 py-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40">
        <h2 id="system-attention-title" className="text-base font-semibold">Needs attention</h2>
        {issues.length ? <ul className="mt-2 min-w-0 divide-y">{issues.map(check => <CheckRow key={check.id} check={check} expanded />)}</ul> : <p className="mt-3 flex items-start gap-2 text-sm"><Check aria-hidden="true" className="h-4 w-4 shrink-0 text-emerald-800" />No issues found in these checks. This does not verify every storefront workflow.</p>}
      </section>

      <DetailsSection title={`Passed checks (${passed.length})`} description="Compatibility and configuration checks that passed." sectionRef={passedRef}>
        <ul className="min-w-0 divide-y">{passed.map(check => <CheckRow key={check.id} check={check} />)}</ul>
        {!passed.length && <p className="py-4 text-sm text-muted-foreground">No checks passed in the current report.</p>}
      </DetailsSection>

      <section aria-labelledby="environment-title" className="min-w-0 space-y-3">
        <h2 id="environment-title" className="text-base font-semibold">Environment details</h2>
        <div className="grid min-w-0 items-start gap-3 lg:grid-cols-2">
          {environmentGroups(info).map(group => <DetailsSection key={group.title} title={group.title} nested>
            <Rows rows={group.rows} />
            {group.title === 'WordPress environment' && <p className="border-t py-3 text-xs text-muted-foreground">A disabled built-in WP Cron flag may be intentional when your host runs a system scheduler.</p>}
            {group.title === 'Server' && <details className="border-t py-3"><summary className="cursor-pointer text-sm font-medium">Private server details · excluded from report</summary><Rows rows={[
              ['Document root', info.server.documentRoot], ['Server IP', info.server.serverAddress],
            ]} /></details>}
          </DetailsSection>)}
        </div>
      </section>

      <DetailsSection title="Registration diagnostics" description={info.registrationForms.warnings.length ? `${info.registrationForms.warnings.length} setup warnings are included in Needs attention.` : 'Form ownership and technical details for registration support.'}>
        <Rows rows={[
          ['WordPress form handled by', info.registrationForms.wordpress.activeOwner],
          ['WooCommerce form handled by', info.registrationForms.woocommerce.activeOwner],
        ]} />
        <details className="border-t py-3"><summary className="cursor-pointer text-sm font-medium">Advanced registration details</summary><Rows rows={registrationRows(info).filter(([label]) => !['WordPress form handled by', 'WooCommerce form handled by'].includes(label))} /></details>
        <details className="border-t py-3"><summary className="cursor-pointer text-sm font-medium">Theme template path · excluded from report</summary><Rows rows={[
          ['My Account template override', info.registrationForms.woocommerce.themeTemplateOverride || 'None detected'],
        ]} /></details>
      </DetailsSection>

      <footer className="flex items-start gap-2 border-t pt-4 text-xs text-muted-foreground">
        <AlertCircle aria-hidden="true" className="mt-0.5 h-4 w-4 shrink-0" /><p className="max-w-[85ch]">Copy and Download include the check results and environment details from this snapshot. Server IPs, document-root paths and theme-template paths are excluded. Review the report before sharing; nothing is sent automatically.</p>
      </footer>
    </>}
  </div>
}