import { Download, ShieldAlert, ShieldCheck } from 'lucide-react'
import { useAdverseImpact } from '../lib/queries'
import { api } from '../lib/api'
import { Badge, Panel } from '../components/ui'
import { flagRatio } from '../lib/format'
import type { AnalysisSection, ImpactRow } from '../lib/types'

export function Compliance() {
  const report = useAdverseImpact()

  async function downloadExport() {
    const text = await api.adverseImpactExport()
    const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }))
    const a = document.createElement('a')
    a.href = url
    a.download = 'adverse_impact_report.txt'
    a.click()
    URL.revokeObjectURL(url)
  }

  return (
    <div className="space-y-4">
      <Panel className="flex flex-wrap items-center justify-between gap-3 p-4">
        <div>
          <div className="flex items-center gap-2 text-base font-bold">
            <ShieldCheck size={18} style={{ color: 'var(--color-gold)' }} /> Adverse Impact and AEDT Compliance
          </div>
          <p className="mt-0.5 text-xs text-faint">
            Four fifths analysis over recorded decisions. The platform supplies this data for an
            independent audit run by the deploying employer.
          </p>
        </div>
        <button
          onClick={downloadExport}
          disabled={!report.data}
          className="flex items-center gap-2 rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink disabled:opacity-50"
        >
          <Download size={15} /> Export summary
        </button>
      </Panel>

      {report.isLoading && <Panel><p className="text-sm text-muted">Loading the report.</p></Panel>}

      {report.isError && (
        <Panel>
          <p className="text-sm text-warn">
            The adverse impact report is unavailable. It is read only by the compliance role and requires
            the compliance database connection. Detail: {(report.error as Error).message}
          </p>
        </Panel>
      )}

      {report.data && (
        <>
          <Panel>
            <dl className="grid grid-cols-1 gap-2 text-sm sm:grid-cols-2">
              <Meta k="Generated" v={report.data.generated_at} />
              <Meta k="Data covered" v={`${report.data.data_from || 'not available'} to ${report.data.data_to || 'not available'}`} />
              <Meta k="Source" v={report.data.source} wide />
              <Meta k="Method" v={report.data.method} wide />
            </dl>
          </Panel>
          <Section section={report.data.selection} />
          <Section section={report.data.screening} />
        </>
      )}
    </div>
  )
}

function Meta({ k, v, wide }: { k: string; v: string; wide?: boolean }) {
  return (
    <div className={wide ? 'sm:col-span-2' : ''}>
      <dt className="text-[11px] font-bold uppercase tracking-wider text-muted">{k}</dt>
      <dd className="text-ink">{v}</dd>
    </div>
  )
}

function Section({ section }: { section: AnalysisSection }) {
  return (
    <Panel
      title={section.stage}
      hint={`${section.total_n} analyzed, ${section.unknown_count} unknown category, ${section.no_demographics_count} with no consented demographics`}
    >
      <div className="space-y-4">
        <Cut title="By sex" rows={section.by_gender} />
        <Cut title="By race or ethnicity" rows={section.by_race_ethnicity} />
        <Cut title="Intersectional (sex by race or ethnicity)" rows={section.intersectional} />
      </div>
    </Panel>
  )
}

function Cut({ title, rows }: { title: string; rows: ImpactRow[] }) {
  return (
    <div>
      <div className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-muted">{title}</div>
      {rows.length === 0 ? (
        <p className="text-sm text-faint">No data.</p>
      ) : (
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left text-[11px] uppercase tracking-wider text-faint">
              <th className="py-1 font-semibold">Group</th>
              <th className="py-1 text-right font-semibold">Selected</th>
              <th className="py-1 text-right font-semibold">Rate</th>
              <th className="py-1 text-right font-semibold">Impact ratio</th>
              <th className="py-1 text-right font-semibold">Status</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.group} className="border-t border-line/50">
                <td className="py-1.5">{r.group}</td>
                <td className="py-1.5 text-right tabular-nums text-muted">
                  {r.selected} of {r.considered}
                </td>
                <td className="py-1.5 text-right tabular-nums">{r.rate}</td>
                <td
                  className="py-1.5 text-right tabular-nums font-semibold"
                  style={{ color: r.flagged ? 'var(--color-risk)' : flagRatio(r.impact_ratio) }}
                >
                  {r.impact_ratio}
                </td>
                <td className="py-1.5 text-right">
                  {r.flagged ? (
                    <Badge color="var(--color-risk)" subtle>
                      <ShieldAlert size={12} /> Below 0.80
                    </Badge>
                  ) : (
                    <span className="text-faint">ok</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}