import React, { useState, useMemo, useEffect } from 'react'
import { FiRefreshCw, FiExternalLink, FiSearch } from 'react-icons/fi'
import { useApp } from '../context/AppContext'
import { C, PageTitle, EmptyOk } from '../components/UI'
import EmptyStateCard from '../components/EmptyStateCard'
import AnalysisBanner from '../components/AnalysisBanner'
import { GovernanceSkeleton } from '../components/Orgexplorerskeletons'

import HealthScorecard from '../components/HealthScorecard'

const TABS = [
  { key: 'dead', label: 'Dead Issues' },
  { key: 'zombie', label: 'Zombie PRs' },
  { key: 'stale', label: 'Stale Issues Ratio' },
  { key: 'license', label: 'No License' },
]

const getStatus = ratio => {
  if (ratio <= 10)
    return {
      label: 'Excellent',
      color: 'var(--green)',
      bg: 'rgba(34,197,94,.12)'
    }

  if (ratio <= 25)
    return {
      label: 'Healthy',
      color: 'var(--amber)',
      bg: 'rgba(250,204,21,.12)'
    }

  if (ratio <= 40)
    return {
      label: 'Warning',
      color: 'var(--orange)',
      bg: 'rgba(251,146,60,.12)'
    }

  return {
    label: 'Critical',
    color: 'var(--red)',
    bg: 'rgba(239,68,68,.12)'
  }
}

export default function GovernancePage() {
  const { model, issuesData, runAudit, govLoading, auditComplete, loading, runGovernanceAnalysis,staleRepoStats } = useApp()
  const [viewMode, setViewMode] = useState('scorecard') // 'scorecard' | 'audit'
  const [tab, setTab] = useState('dead')
  const [orgFilter, setOrgFilter] = useState('All Organizations')
  const [search, setSearch] = useState('')

  const ITEMS_PER_PAGE = 10
  const [stalePage, setStalePage] = useState(1)
  const [deadPage, setDeadPage] = useState(1)
  const [zombiePage, setZombiePage] = useState(1)

  const query = search.trim().toLowerCase()

  const handleSearchChange = e => {
    setSearch(e.target.value)
    setDeadPage(1)
    setZombiePage(1)
    setStalePage(1)
  }

  const handleOrgChange = e => {
    setOrgFilter(e.target.value)
    setDeadPage(1)
    setZombiePage(1)
    setStalePage(1)
  }

  useEffect(() => {
    setDeadPage(1)
    setZombiePage(1)
    setStalePage(1)
  }, [issuesData])

  // Stale repos: org filter first, then search, then pagination
  const staleReposForOrg = useMemo(() => {
    if (orgFilter === 'All Organizations') return staleRepoStats
    return staleRepoStats.filter(r => r.org === orgFilter)
  }, [staleRepoStats, orgFilter])

  const filteredStale = useMemo(() => {
    if (!query) return staleReposForOrg
    return staleReposForOrg.filter(r => `${r.org}/${r.repo}`.toLowerCase().includes(query))
  }, [staleReposForOrg, query])

  const totalPages = Math.ceil(filteredStale.length / ITEMS_PER_PAGE)

  const paginatedStaleRepos = useMemo(() => {
    const start = (stalePage - 1) * ITEMS_PER_PAGE
    return filteredStale.slice(start, start + ITEMS_PER_PAGE)
  }, [filteredStale, stalePage])

  // Flatten all issues and tag with repo/org
  const allIssues = useMemo(() => {
    const arr = []
    Object.entries(issuesData || {}).forEach(([key, issues]) => {
      const [org, repo] = key.split('/')
      issues.forEach(i => arr.push({ ...i, repoName: repo, orgName: org }))
    })
    return arr
  }, [issuesData])

  if (loading) return <GovernanceSkeleton />
  if (!model) return null

  const hasAudit = Object.keys(issuesData || {}).length > 0
  const daysSince = d => Math.floor((Date.now() - new Date(d)) / 86_400_000)
  const matchesQuery = text => !query || text.toLowerCase().includes(query)
  const issuesOfOrg = orgFilter === 'All Organizations' ? allIssues : allIssues.filter(i => i.orgName === orgFilter)

  // Health check 1 — Dead Issues (>90 days open, not a PR)
  const deadIssues = allIssues
    .filter(i => !i.pull_request && i.state === 'open' && daysSince(i.created_at) >= 90)
    .sort((a, b) => daysSince(b.created_at) - daysSince(a.created_at))

  const deadIssuesOfOrg = (org) => {
    if (org === 'All Organizations') { return deadIssues }
    return deadIssues.filter(issue => issue.orgName === org)
  }

  // Health check 2 — Percentage of dead issues relative to all issues
  const staleIssuesRatio = allIssues.length ? (deadIssues.length / allIssues.length) * 100 : 0
  const staleIssuesRatioOfOrg = (org) => {
    if (org === 'All Organizations') { return staleIssuesRatio }
    const issueOfOrg = allIssues.filter(i => i.orgName === org)
    return issueOfOrg.length ? (deadIssuesOfOrg(org).length / issueOfOrg.length) * 100 : 0
  }

  // Health check 3 — Zombie PRs (>90 days open)
  const zombiePRs = allIssues
    .filter(i => i.pull_request && i.state === 'open' && daysSince(i.created_at) >= 90)
    .sort((a, b) => daysSince(b.created_at) - daysSince(a.created_at))

  const zombiePRsOfOrg = (org) => {
    if (org === 'All Organizations') { return zombiePRs }
    return zombiePRs.filter(pr => pr.orgName === org)
  }

  // Health check 4 — No license
  const noLicense = model.allRepos.filter(r => !r.license && !r.archived && !r.fork)

  const noLicenseOfOrg = (org) => {
    if (org === 'All Organizations') { return noLicense }
    return noLicense.filter(r => r.orgLogin === org)
  }

  // Org-scoped lists (org filter applied first)
  const scopedDead = deadIssuesOfOrg(orgFilter)
  const scopedZombie = zombiePRsOfOrg(orgFilter)
  const scopedLicense = noLicenseOfOrg(orgFilter)

  // Search-filtered lists (client-side, uses already-fetched data)
  const filteredDead = scopedDead.filter(i => matchesQuery(`${i.orgName}/${i.repoName}`))
  const filteredZombie = scopedZombie.filter(i => matchesQuery(`${i.orgName}/${i.repoName}`))
  const filteredLicense = scopedLicense.filter(r => matchesQuery(`${r.orgLogin}/${r.name}`))

  const deadTotalPages = Math.ceil(filteredDead.length / ITEMS_PER_PAGE)
  const paginatedDeadIssues = filteredDead.slice((deadPage - 1) * ITEMS_PER_PAGE, deadPage * ITEMS_PER_PAGE)
  const zombieTotalPages = Math.ceil(filteredZombie.length / ITEMS_PER_PAGE)
  const paginatedZombiePRs = filteredZombie.slice((zombiePage - 1) * ITEMS_PER_PAGE, zombiePage * ITEMS_PER_PAGE)

  // Issue resolution rate per repo
  const topRepos = model.allRepos.slice(0, 8)

  const counts = {
    dead: scopedDead.length,
    zombie: scopedZombie.length,
    license: scopedLicense.length,
    stale: staleIssuesRatioOfOrg(orgFilter).toFixed(2)
  }

  const tabTotals = { dead: scopedDead.length, zombie: scopedZombie.length, stale: staleReposForOrg.length, license: scopedLicense.length }
  const tabMatches = { dead: filteredDead.length, zombie: filteredZombie.length, stale: filteredStale.length, license: filteredLicense.length }

  // Stat card
  const StatBox = ({ label, value, sub, color }) => (
    <div style={C.card}>
      <div style={C.label}>{label}</div>
      <div style={{ fontSize: 32, fontWeight: 700, color, margin: '6px 0 2px' }}>{value}</div>
      <div style={{ fontSize: 10, color: 'var(--text3)', letterSpacing: '.06em' }}>{sub}</div>
    </div>
  )

  // Issue / PR row
  const IssueRow = ({ item, i }) => (
    <tr style={{ borderBottom: '1px solid var(--border)', background: i % 2 ? 'var(--surface2)' : 'transparent' }}>
      <td style={{ padding: '10px 14px' }}>
        <div style={{ fontSize: 13, fontWeight: 500 }}>{item.title}</div>
        <div style={{ fontSize: 11, color: 'var(--text2)' }}>#{item.number} · @{item.user?.login}</div>
      </td>
      <td style={{ padding: '10px 14px' }}>
        <span style={C.pill('var(--accent)', 'rgba(245,197,24,.1)')}>{item.repoName}</span>
      </td>
      <td style={{ padding: '10px 14px' }}>
        <span style={C.pill('var(--red)', 'rgba(239,68,68,.1)')}>{daysSince(item.created_at)} DAYS</span>
      </td>
      <td style={{ padding: '10px 14px' }}>
        {item.html_url && (
          <a href={item.html_url} target="_blank" rel="noreferrer"
            style={{ fontSize: 12, color: 'var(--text2)', display: 'flex', alignItems: 'center', gap: 4 }}>
            <FiExternalLink size={12} /> GitHub
          </a>
        )}
      </td>
    </tr>
  )

  const TableHead = () => (
    <thead>
      <tr>
        {['TITLE / ID', 'REPOSITORY', 'AGE', 'ACTION'].map(h => (
          <th key={h} style={{ padding: '8px 14px', textAlign: 'left', fontSize: 11, color: 'var(--text2)', fontWeight: 600, borderBottom: '1px solid var(--border)', background: 'var(--surface2)' }}>
            {h}
          </th>
        ))}
      </tr>
    </thead>
  )

  const Pagination = ({ page, totalPages, onPrev, onNext }) => {
    if (totalPages <= 1) return null
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
        <button
          onClick={onPrev}
          disabled={page === 1}
          style={{ ...C.btn('primary'), padding: '8px 14px', cursor: page === 1 ? 'not-allowed' : 'pointer', opacity: page === 1 ? 0.5 : 1 }}
        >
          ← Previous
        </button>
        <span style={{ fontSize: 13, color: 'var(--text2)' }}>Page {page} of {totalPages}</span>
        <button
          onClick={onNext}
          disabled={page === totalPages}
          style={{ ...C.btn('primary'), padding: '8px 14px', cursor: page === totalPages ? 'not-allowed' : 'pointer', opacity: page === totalPages ? 0.5 : 1 }}
        >
          Next →
        </button>
      </div>
    )
  }

  const noMatch = (
    <div style={{ padding: '32px 24px', maxWidth: 900, margin: '0 auto' }}>
      <EmptyStateCard
        SvgIcon={<FiSearch size={36} color="var(--accent)" />}
        title="No matching repositories"
        description={`No results match "${search.trim()}" in this tab. Try a different repository or organization name.`}
        buttonText="Clear Search"
        onButtonClick={() => setSearch('')}
      />
    </div>
  )

  return (
    <div style={{ padding: '32px 24px', maxWidth: 1100, margin: '0 auto' }} className="fade-up">
      <AnalysisBanner
        page="governance"
        description="Governance insights are computed from a representative subset to balance speed and API usage. Connect a PAT to analyze every repository and access complete results."
        analysisStatus={auditComplete ? 'complete' : 'standard'}
        loading={loading || govLoading}
        onRun={runGovernanceAnalysis}
      />
      <PageTitle
        title="Governance Audit"
        subtitle="Analyzing structural integrity and compliance across the portfolio"
        right={
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {govLoading && <span style={{ fontSize: 13, color: 'var(--text2)' }}>Running audit...</span>}
            <button
              onClick={runAudit}
              disabled={govLoading}
              style={{ ...C.btn(hasAudit ? 'ghost' : 'primary'), display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, opacity: govLoading ? 0.7 : 1 }}
            >
              <FiRefreshCw size={13} /> {hasAudit ? 'Re-run Audit' : 'Run Audit'}
            </button>
          </div>
        }
      />

      {/* Primary Navigation Tabs */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 24, borderBottom: '1px solid var(--border)', paddingBottom: 10 }}>
        <button
          onClick={() => setViewMode('scorecard')}
          style={{
            background: 'none', border: 'none', cursor: 'pointer',
            color: viewMode === 'scorecard' ? 'var(--text)' : 'var(--text2)',
            fontWeight: viewMode === 'scorecard' ? 600 : 400,
            fontSize: 14, padding: '8px 16px',
            borderBottom: viewMode === 'scorecard' ? '2px solid var(--accent)' : '2px solid transparent',
          }}
        >
          🏥 Health Scorecard & Risk Advisor
        </button>
        <button
          onClick={() => setViewMode('audit')}
          style={{
            background: 'none', border: 'none', cursor: 'pointer',
            color: viewMode === 'audit' ? 'var(--text)' : 'var(--text2)',
            fontWeight: viewMode === 'audit' ? 600 : 400,
            fontSize: 14, padding: '8px 16px',
            borderBottom: viewMode === 'audit' ? '2px solid var(--accent)' : '2px solid transparent',
          }}
        >
          📋 Structural Audit Details
        </button>
      </div>

      {viewMode === 'scorecard' ? (
        <HealthScorecard model={model} issuesData={issuesData} hasAudit={hasAudit} onRunAudit={runAudit} govLoading={govLoading} />
      ) : (
        <>
          {/* Summary stat cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 24 }}>
            <StatBox label="Dead Issues"  value={counts.dead}    sub="OPEN 90+ DAYS"          color="var(--red)"    />
            <StatBox label="Stale Issues Ratio" value={`${staleIssuesRatio.toFixed(2)}%`} sub={`of ${allIssues.length} total issues`} color={` ${getStatus(staleIssuesRatio).color}`} />
            <StatBox label="Zombie PRs"   value={counts.zombie}  sub="PENDING 90+ DAYS"       color="var(--amber)"  />
            <StatBox label="No License"   value={counts.license} sub="COMPLIANCE MISSING"     color="var(--text2)"  />
          </div>

      {/* Issue Resolution Rate */}
      <div style={{ ...C.card, marginBottom: 20 }}>
        <div style={{ fontWeight: 600, marginBottom: 4 }}>Issue Resolution Rate</div>
        <div style={{ ...C.label, marginBottom: 16 }}>Resolution velocity across key repositories</div>
        {topRepos.map(r => {
          const repoIssues = allIssues.filter(i => i.repoName === r.name)
          const closed = repoIssues.filter(i => i.state === 'closed').length
          const total = repoIssues.length
          const rate = total ? Math.round(closed / total * 100) : null
          const color = rate === null ? 'var(--text3)' : rate >= 70 ? 'var(--green)' : rate >= 30 ? 'var(--amber)' : 'var(--red)'

          return (
            <div key={r.id} style={{ marginBottom: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <div>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>{r.name}</span>
                  <span style={{ fontSize: 11, color: 'var(--text2)', marginLeft: 8 }}>{r.orgLogin}</span>
                </div>
                <span style={{ fontSize: 13, fontWeight: 600, color }}>
                  {rate === null ? 'No data' : `${rate}%`}
                </span>
              </div>
              <div style={{ height: 5, background: 'var(--border)', borderRadius: 3 }}>
                {rate !== null && (
                  <div style={{ width: `${rate}%`, height: '100%', background: color, borderRadius: 3, transition: 'width .5s' }} />
                )}
              </div>
            </div>
          )
        })}
        {!hasAudit && (
          <div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 4 }}>
            Run the audit to populate resolution rates with live issue data.
          </div>
        )}
      </div>

      {/* Tabbed detail view */}
      <div style={C.card}>
        <div style={{ display: 'flex', gap: 4, marginBottom: 20, borderBottom: '1px solid var(--border)', paddingBottom: 12, overflowX: 'auto', justifyContent: 'space-between' }}>
          <div className="tabs">
            {TABS.map(t => (
              <button
                key={t.key}
                onClick={() => setTab(t.key)}
                style={{
                  background: 'none', border: 'none', cursor: 'pointer', whiteSpace: 'nowrap',
                  color: tab === t.key ? 'var(--text)' : 'var(--text2)',
                  fontWeight: tab === t.key ? 600 : 400,
                  fontSize: 13, padding: '6px 12px',
                  borderBottom: tab === t.key ? '2px solid var(--accent)' : '2px solid transparent',
                }}
              >
                {t.label}{' '}
                <span style={{ color: counts[t.key] > 40 ? 'var(--red)' : 'var(--green)', marginLeft: 4 }}>
                  {counts[t.key]}
                </span>
              </button>
            ))}
          </div>
          <div style={{ marginBottom: 16 }}>
            <select
              value={orgFilter}
              onChange={handleOrgChange}
              style={C.select}
              aria-label="Filter stats by organization"
            >
              <option>All Organizations</option>
              {orgs.map(o => <option key={o.login}>{o.login}</option>)}
            </select>
          </div>
        </div>

        {/* Repository search */}
        {tabTotals[tab] > 0 && (
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 16 }}>
            <input
              value={search}
              onChange={handleSearchChange}
              placeholder="Search by repository or organization..."
              aria-label="Search repositories in governance results"
              style={{ ...C.input, width: 280 }}
            />
            {query && (
              <span style={{ fontSize: 12, color: 'var(--text2)' }}>
                {tabMatches[tab]} of {tabTotals[tab]} matching
              </span>
            )}
          </div>
        )}

        {/* Dead Issues */}
        {tab === 'dead' && (
          scopedDead.length === 0 ? (
            <EmptyOk msg="No dead issues found" sub="This org actively maintains its open items." />
          ) : filteredDead.length === 0 ? (
            noMatch
          ) : (
            <>
              <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                  <TableHead />
                  <tbody>{paginatedDeadIssues.map((item, i) => <IssueRow key={item.id} item={item} i={i} />)}</tbody>
                </table>
              </div>
              <Pagination page={deadPage} totalPages={deadTotalPages} onPrev={() => setDeadPage(p => p - 1)} onNext={() => setDeadPage(p => p + 1)} />
            </>
          )
        )}

        {/* Zombie PRs */}
        {tab === 'zombie' && (
          scopedZombie.length === 0 ? (
            <EmptyOk msg="No zombie PRs found" sub="This org reviews and closes contributions actively." />
          ) : filteredZombie.length === 0 ? (
            noMatch
          ) : (
            <>
              <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                  <TableHead />
                  <tbody>{paginatedZombiePRs.map((item, i) => <IssueRow key={item.id} item={item} i={i} />)}</tbody>
                </table>
              </div>
              <Pagination page={zombiePage} totalPages={zombieTotalPages} onPrev={() => setZombiePage(p => p - 1)} onNext={() => setZombiePage(p => p + 1)} />
            </>
          )
        )}

        {/* Stale Issues */}
        {tab === 'stale' && (
          staleReposForOrg.length === 0 ? (
            <EmptyOk msg="No stale issues found" sub="All repositories have active open issues." />
          ) : filteredStale.length === 0 ? (
            noMatch
          ) : (
            <>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {paginatedStaleRepos.map(repo => {
                  const status = getStatus(repo.ratio)

                  return (
                    <div
                      key={repo.id}
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        padding: '12px 14px',
                        background: 'var(--surface2)',
                        borderRadius: 6
                      }}
                    >
                      <div>
                        <div style={{ fontWeight: 600 }}>
                          {repo.repo}
                        </div>
                        <div style={{ marginTop: 4, fontSize: 12, color: 'var(--text2)' }}>
                          {repo.staleCount} stale issues out of{' '}
                          {repo.openCount} open issues ({repo.ratio}%)
                        </div>
                      </div>

                      <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
                        <span style={C.pill(status.color, status.bg)}>
                          {status.label}
                        </span>
                        <a href={`https://github.com/${repo.org}/${repo.repo}/issues`} target="_blank" rel="noreferrer"
                          style={{ fontSize: 12, color: 'var(--text2)', display: 'flex', alignItems: 'center', gap: 4 }}>
                          <FiExternalLink size={12} /> GitHub
                        </a>
                      </div>
                    </div>
                  )
                })}
              </div>
              <Pagination page={stalePage} totalPages={totalPages} onPrev={() => setStalePage(p => p - 1)} onNext={() => setStalePage(p => p + 1)} />
            </>
          )
        )}

        {/* No License */}
        {tab === 'license' && (
          scopedLicense.length === 0 ? (
            <EmptyOk msg="All repos have licenses" sub="Good compliance across the portfolio." />
          ) : filteredLicense.length === 0 ? (
            noMatch
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {filteredLicense.map(r => (
                <div key={r.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 14px', background: 'var(--surface2)', borderRadius: 6 }}>
                  <div>
                    <div style={{ fontWeight: 500, fontSize: 13 }}>{r.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--text2)' }}>{r.orgLogin}</div>
                  </div>
                  <span style={C.pill('var(--red)', 'rgba(239,68,68,.12)')}>NO LICENSE</span>
                </div>
              ))}
            </div>
          )
        )}
      </div>
        </>
      )}
    </div>
  )
}