import React from 'react'
import {
  Document,
  Page,
  View,
  Text,
  Svg,
  Rect,
  Image,
  StyleSheet,
} from '@react-pdf/renderer'
import { format } from 'date-fns'
import { ptBR } from 'date-fns/locale'
import { BaseMoodOption, IntensityLevel, MoodComponentOption } from '@prisma/client'
import { ReportData } from './report.data'
import { LOGO_DATA_URI } from './logo'

const T = {
  title: 'Relatório de Humor e Bem-Estar',
  appName: 'Nexo',
  tagline: 'Nexo · Rastreador de humor — usenexo.xyz',
  confidential: 'Confidencial — uso clínico',
  sections: {
    glance: 'Visão Geral do Período',
    distribution: 'Distribuição de Humor',
    heatmap: 'Mapa de Calor Diário',
    components: 'Sentimentos & Emoções',
    log: 'Registros e níveis (ansiedade, energia e estresse)',
  },
  stats: {
    checkins: 'Check-ins',
    topMood: 'Humor predominante',
    daysTracked: 'Dias rastreados',
  },
  moods: {
    GREAT: 'Ótimo', GOOD: 'Bom', NEUTRAL: 'Neutro',
    SAD: 'Triste', ANGRY: 'Irritado',
  } as Record<BaseMoodOption, string>,
  intensity: {
    LIGHT: 'Leve', MODERATE: 'Moderado', HIGH: 'Alto',
  } as Record<IntensityLevel, string>,
  components: {
    JOY: 'Alegria', ANGER: 'Raiva', SADNESS: 'Tristeza',
    FEAR: 'Medo', GUILT: 'Culpa', FRUSTRATION: 'Frustração',
    CALM: 'Calma', MOTIVATED: 'Motivação', TIREDNESS: 'Cansaço',
    GRATITUDE: 'Gratidão', FOCUS: 'Foco', RESTLESS: 'Agitação',
    RELAXED: 'Relaxado', OVERWHELMED: 'Sobrecarga',
  } as Record<MoodComponentOption, string>,
  tableHeaders: {
    component: 'Componente', count: 'Qtd', avgIntensity: 'Int. Média',
    date: 'Data', mood: 'Humor', anxiety: 'Ans', stress: 'Est',
    energy: 'Ene', note: 'Nota',
  },
}

const MOOD_COLORS: Record<BaseMoodOption, string> = {
  GREAT: '#378ADD',
  GOOD: '#639922',
  NEUTRAL: '#888780',
  SAD: '#1D9E75',
  ANGRY: '#D85A30',
}

const INTENSITY_COLORS: Record<IntensityLevel, string> = {
  LIGHT: '#639922',
  MODERATE: '#BA7517',
  HIGH: '#D85A30',
}

const EMPTY_CELL = '#E8E7E2'

const s = StyleSheet.create({
  page: {
    fontFamily: 'Helvetica',
    fontSize: 9,
    paddingTop: 40,
    paddingBottom: 50,
    paddingHorizontal: 40,
    color: '#1a1a1a',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 4,
    paddingBottom: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  headerTitle: {
    fontSize: 13,
    fontFamily: 'Helvetica-Bold',
  },
  headerLogo: {
    width: 48,
    height: 48,
    objectFit: 'contain',
  },
  headerSub: {
    fontSize: 8,
    color: '#666666',
    marginTop: 2,
  },
  footer: {
    position: 'absolute',
    bottom: 20,
    left: 40,
    right: 40,
    flexDirection: 'column',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
    paddingTop: 5,
  },
  footerRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  footerText: {
    fontSize: 7,
    color: '#888888',
  },
  section: {
    marginTop: 16,
    marginBottom: 4,
  },
  sectionTitle: {
    fontFamily: 'Helvetica-Bold',
    fontSize: 10,
    marginBottom: 6,
    paddingBottom: 3,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  statRow: {
    flexDirection: 'row',
    gap: 8,
    marginBottom: 4,
  },
  statBox: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 4,
    padding: 8,
  },
  statLabel: {
    fontSize: 7,
    color: '#888888',
    marginBottom: 3,
  },
  statValue: {
    fontSize: 12,
    fontFamily: 'Helvetica-Bold',
  },
  barRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  barLabel: {
    width: 60,
    fontSize: 8,
  },
  barPct: {
    width: 32,
    fontSize: 8,
    textAlign: 'right',
    color: '#666666',
  },
  heatmapRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 2,
  },
  heatmapWeekLabel: {
    width: 24,
    fontSize: 7,
    color: '#888888',
  },
  tableHeaderRow: {
    flexDirection: 'row',
    backgroundColor: '#f0f0f0',
    paddingVertical: 4,
    paddingHorizontal: 4,
  },
  tableRow: {
    flexDirection: 'row',
    paddingVertical: 3,
    paddingHorizontal: 4,
  },
  tableCell: {
    fontSize: 7,
  },
  footnote: {
    fontSize: 6,
    color: '#aaaaaa',
    marginTop: 6,
    fontFamily: 'Helvetica-Oblique',
  },
})

function formatPeriod(start: Date, end: Date): string {
  const s = format(start, 'd MMM', { locale: ptBR })
  const e = format(end, 'd MMM yyyy', { locale: ptBR })
  return `${s} – ${e}`
}

function truncate(str: string | null, max: number): string {
  if (!str) return '—'
  return str.length > max ? str.slice(0, max) + '…' : str
}

function topMoodLabel(dist: ReportData['moodDistribution']): string {
  const top = [...dist].sort((a, b) => b.count - a.count)[0]
  return top && top.count > 0 ? T.moods[top.mood] : '—'
}

type SectionHeaderProps = { label: string }
function SectionHeader({ label }: SectionHeaderProps) {
  return (
    <View style={s.section}>
      <Text style={s.sectionTitle}>{label}</Text>
    </View>
  )
}

type StatBoxProps = { label: string; value: string }
function StatBox({ label, value }: StatBoxProps) {
  return (
    <View style={s.statBox}>
      <Text style={s.statLabel}>{label}</Text>
      <Text style={s.statValue}>{value}</Text>
    </View>
  )
}

const BAR_MAX_WIDTH = 350

type MoodBarProps = {
  mood: BaseMoodOption
  count: number
  pct: number
  maxPct: number
}
function MoodBar({ mood, count, pct, maxPct }: MoodBarProps) {
  const barWidth = maxPct > 0 ? (pct / maxPct) * BAR_MAX_WIDTH : 0
  const color = MOOD_COLORS[mood]
  return (
    <View style={s.barRow}>
      <Text style={s.barLabel}>{T.moods[mood]}</Text>
      <Svg width={BAR_MAX_WIDTH} height={12}>
        <Rect x={0} y={2} width={BAR_MAX_WIDTH} height={8}
          rx={2} fill={EMPTY_CELL} />
        {barWidth > 0 && (
          <Rect x={0} y={2} width={barWidth} height={8}
            rx={2} fill={color} />
        )}
      </Svg>
      <Text style={s.barPct}>{pct}%</Text>
      <Text style={[s.barPct, { width: 24 }]}>{count}</Text>
    </View>
  )
}

const CELL = 52
const GAP = 4

type HeatmapRowProps = {
  week: number
  cells: Array<{ date: string; mood: BaseMoodOption | null }>
  startDow: number
}
function HeatmapRow({ week, cells, startDow }: HeatmapRowProps) {
  const totalCols = 7
  const svgWidth = totalCols * (CELL + GAP)

  return (
    <View style={s.heatmapRow}>
      <Text style={s.heatmapWeekLabel}>S{week}</Text>
      <Svg width={svgWidth} height={CELL}>
        {Array.from({ length: totalCols }).map((_, col) => {
          const dayIndex = col - startDow
          const cell = dayIndex >= 0 ? cells[dayIndex] : undefined
          const fill = cell
            ? cell.mood ? MOOD_COLORS[cell.mood] : EMPTY_CELL
            : '#f8f8f8'
          return (
            <Rect
              key={col}
              x={col * (CELL + GAP)}
              y={0}
              width={CELL}
              height={CELL}
              rx={3}
              fill={fill}
            />
          )
        })}
      </Svg>
    </View>
  )
}

type TableHeaderProps = { cols: string[]; widths: number[] }
function TableHeader({ cols, widths }: TableHeaderProps) {
  return (
    <View style={s.tableHeaderRow}>
      {cols.map((col, i) => (
        <Text key={i}
          style={[s.tableCell, { width: widths[i], fontFamily: 'Helvetica-Bold' }]}>
          {col}
        </Text>
      ))}
    </View>
  )
}

type TableRowProps = {
  cols: string[]
  widths: number[]
  even: boolean
  colors?: (string | undefined)[]
}
function TableRow({ cols, widths, even, colors }: TableRowProps) {
  return (
    <View style={[s.tableRow, { backgroundColor: even ? '#F8F7F4' : '#ffffff' }]}>
      {cols.map((col, i) => (
        <Text key={i}
          style={[s.tableCell, { width: widths[i], color: colors?.[i] ?? '#1a1a1a' }]}>
          {col}
        </Text>
      ))}
    </View>
  )
}

type PageHeaderProps = { data: ReportData }
function PageHeader({ data }: PageHeaderProps) {
  const name = [data.user.firstName, data.user.lastName].filter(Boolean).join(' ')
  const period = formatPeriod(data.periodStart, data.periodEnd)
  return (
    <View style={s.header}>
      <View>
        <Text style={s.headerTitle}>{T.title}</Text>
        <Text style={s.headerSub}>{name} · {period}</Text>
      </View>

      <Image src={LOGO_DATA_URI} style={s.headerLogo} />
    </View>
  )
}

function PageFooter() {
  return (
    <View style={s.footer} fixed>
      <View style={s.footerRow}>
        <Text style={s.footerText}>{T.tagline}</Text>
        <Text
          style={s.footerText}
          render={({ pageNumber, totalPages }: { pageNumber: number; totalPages: number }) =>
            `${pageNumber} / ${totalPages}`
          }
        />
      </View>
      <Text style={[s.footerText, { marginTop: 2 }]}>{T.confidential}</Text>
    </View>
  )
}

function buildHeatmapWeeks(
  dailyMoods: ReportData['dailyMoods'],
): Array<{
  week: number
  cells: Array<{ date: string; mood: BaseMoodOption | null }>
  startDow: number
}> {
  const weeks: ReturnType<typeof buildHeatmapWeeks> = []
  let weekNum = 1
  let i = 0

  if (dailyMoods.length === 0) return weeks

  const firstDow = new Date(dailyMoods[0].date + 'T12:00:00').getDay()

  while (i < dailyMoods.length) {
    const slots = 7 - (weekNum === 1 ? firstDow : 0)
    const cells = dailyMoods.slice(i, i + slots)

    weeks.push({ week: weekNum, cells, startDow: weekNum === 1 ? firstDow : 0 })
    i += slots
    weekNum++
  }

  return weeks
}

type Props = { data: ReportData }

export default function ReportDocument({ data }: Props) {
  const maxPct = Math.max(...data.moodDistribution.map(d => d.pct), 0)
  const daysTracked = data.dailyMoods.filter(d => d.mood !== null).length
  const heatmapWeeks = buildHeatmapWeeks(data.dailyMoods)

  return (
    <Document>
      {/* Page 1 */}
      <Page size="A4" style={s.page}>
        <PageHeader data={data} />
        <PageFooter />

        <SectionHeader label={T.sections.glance} />
        <View style={s.statRow}>
          <StatBox label={T.stats.checkins} value={String(data.totalCheckins)} />
          <StatBox label={T.stats.topMood} value={topMoodLabel(data.moodDistribution)} />
          <StatBox label={T.stats.daysTracked} value={String(daysTracked)} />
          <StatBox
            label="Período"
            value={`${data.dailyMoods.length}d`}
          />
        </View>

        <SectionHeader label={T.sections.distribution} />
        {data.moodDistribution.map(d => (
          <MoodBar
            key={d.mood}
            mood={d.mood}
            count={d.count}
            pct={d.pct}
            maxPct={maxPct}
          />
        ))}

        <SectionHeader label={T.sections.heatmap} />
        {heatmapWeeks.map(({ week, cells, startDow }) => (
          <HeatmapRow key={week} week={week} cells={cells} startDow={startDow} />
        ))}
      </Page>

      {/* Page 2 */}
      <Page size="A4" style={s.page}>
        <PageHeader data={data} />
        <PageFooter />

        <SectionHeader label={T.sections.components} />
        {data.topComponents.length > 0 ? (
          <View>
            <TableHeader
              cols={[
                T.tableHeaders.component,
                T.tableHeaders.count,
                T.tableHeaders.avgIntensity,
              ]}
              widths={[200, 60, 100]}
            />
            {data.topComponents.map((c, i) => (
              <TableRow
                key={c.component}
                even={i % 2 === 1}
                cols={[
                  T.components[c.component] ?? c.component,
                  String(c.count),
                  T.intensity[c.avgIntensity],
                ]}
                widths={[200, 60, 100]}
                colors={[
                  undefined,
                  undefined,
                  INTENSITY_COLORS[c.avgIntensity],
                ]}
              />
            ))}
          </View>
        ) : (
          <Text style={[s.tableCell, { color: '#888888', marginTop: 4 }]}>
            Sem componentes registrados no período.
          </Text>
        )}

        <SectionHeader label={T.sections.log} />

        <Text style={[s.footnote, { marginBottom: 10 }]}>
          Ans = Ansiedade · Est = Estresse · Ene = Energia.
          Níveis percebidos de 0 a 10.
        </Text>

        {data.checkinLog.length > 0 ? (
          <View>
            <TableHeader
              cols={[
                T.tableHeaders.date,
                T.tableHeaders.mood,
                T.tableHeaders.anxiety,
                T.tableHeaders.stress,
                T.tableHeaders.energy,
                T.tableHeaders.note,
              ]}
              widths={[56, 78, 30, 30, 30, 75]}
            />
            {data.checkinLog.map((entry, i) => (
              <TableRow
                key={i}
                even={i % 2 === 1}
                cols={[
                  format(entry.moment, 'd MMM', { locale: ptBR }),
                  T.moods[entry.mood] ?? entry.mood,
                  String(entry.anxietyLevel),
                  String(entry.stressLevel),
                  String(entry.energyLevel),
                  truncate(entry.annotation?.trim() ?? "", 73),
                ]}
                widths={[56, 78, 30, 30, 30, 75]}
                colors={[
                  undefined,
                  MOOD_COLORS[entry.mood],
                  undefined,
                  undefined,
                  undefined,
                  undefined,
                ]}
              />
            ))}
          </View>
        ) : (
          <Text style={[s.tableCell, { color: '#888888', marginTop: 4 }]}>
            Sem check-ins no período.
          </Text>
        )}
      </Page>
    </Document>
  )
}