import React, { useState } from 'react'

import {

  View,

  TouchableOpacity,

  StyleSheet,

  ScrollView,

} from 'react-native'

import { Text } from '@/components/ui/Text';

import { Stack } from 'expo-router'

import { format, subDays, startOfDay, endOfDay } from 'date-fns'

import { Paths, File } from 'expo-file-system'

import * as Sharing from 'expo-sharing'

import { SafeAreaView } from 'react-native-safe-area-context'

import { Button } from '@/components/ui/Button'

import { Section, SectionHeader } from '@/components/ui/Sections'

import { DatePickerField } from '@/components/ui/DatePickerField'

import { apiClient, ApiError } from '@/lib/api'

import { useToast } from '@/context/ToastContext'

import { translateError } from '@/lib/errors/translations'

import { Colors, Spacing, BorderRadius } from '@/constants/theme'

const PRESETS = [

  { label: '7 dias', days: 7 },

  { label: '30 dias', days: 30 },

  { label: '90 dias', days: 90 },

  { label: 'Personalizado', days: 0 },

]

export default function ReportScreen() {

  const { showToast } = useToast()

  const [preset, setPreset] = useState(30)

  const [startDate, setStartDate] = useState(() => subDays(new Date(), 30))

  const [endDate, setEndDate] = useState(() => new Date())

  const [loading, setLoading] = useState(false)

  const isCustom = preset === 0

  function selectPreset(days: number) {

    setPreset(days)

    if (days > 0) {

      setStartDate(subDays(new Date(), days))

      setEndDate(new Date())

    }

  }

  async function handleGenerate() {

    setLoading(true)

    try {

      const buffer = await apiClient.generateReport(

        startOfDay(startDate).toISOString(),

        endOfDay(endDate).toISOString(),

      )

      const fileName = `nexo-report-${format(startDate, 'yyyy-MM')}.pdf`

      const file = new File(Paths.cache, fileName)

      file.write(new Uint8Array(buffer))

      await Sharing.shareAsync(file.uri, {

        mimeType: 'application/pdf',

        dialogTitle: 'Salvar relatório',

      })

    } catch (err) {

      showToast(

        err instanceof ApiError ? translateError(err.message) : 'Erro ao gerar relatório',

        'error',

      )

    } finally {

      setLoading(false)

    }

  }

  return (

    <SafeAreaView style={styles.safe} edges={['bottom']}>

      <Stack.Screen options={{ title: 'Relatório' }} />

      <ScrollView

        style={styles.scroll}

        contentContainerStyle={styles.content}

      >

        <View style={styles.intro}>

          <Text style={styles.introTitle}>Seu relatório de humor</Text>

          <Text style={styles.introBody}>

            Reúne os registros do período escolhido — humores, sentimentos e

            níveis de ansiedade, estresse e energia — num PDF pronto para

            compartilhar com seu terapeuta ou guardar só pra você.

          </Text>

        </View>

        <Section>

          <SectionHeader title="Período" />

          <View style={styles.chips}>

            {PRESETS.map((p) => (

              <TouchableOpacity

                key={p.days}

                style={[styles.chip, preset === p.days && styles.chipActive]}

                onPress={() => selectPreset(p.days)}

                activeOpacity={0.7}

              >

                <Text

                  style={[

                    styles.chipText,

                    preset === p.days && styles.chipTextActive,

                  ]}

                >

                  {p.label}

                </Text>

              </TouchableOpacity>

            ))}

          </View>

        </Section>

        {isCustom && (

          <Section>

            <SectionHeader title="Intervalo" />

            <DatePickerField

              label="De"

              initialDate={startDate}

              onChange={setStartDate}

              maximumDate={endDate}

            />

            <View style={{ height: Spacing.cardGap }} />

            <DatePickerField

              label="Até"

              initialDate={endDate}

              onChange={setEndDate}

              minimumDate={startDate}

              maximumDate={new Date()}

            />

          </Section>

        )}

        <Button

          title="Gerar relatório"

          variant="primary"

          size="large"

          loading={loading}

          onPress={handleGenerate}

          style={{ marginTop: Spacing.sectionGap }}

        />

      </ScrollView>

    </SafeAreaView>

  )

}

const styles = StyleSheet.create({

  safe: {

    flex: 1,

    backgroundColor: Colors.light.background,

  },

  scroll: {

    flex: 1,

  },

  content: {

    paddingHorizontal: Spacing.containerPadding,

    paddingTop: Spacing.containerPadding,

    paddingBottom: Spacing.sectionGap,

  },

  intro: {

    backgroundColor: Colors.light.surface,

    borderRadius: BorderRadius.md,

    padding: Spacing.cardGap,

    marginBottom: Spacing.cardGap,

  },

  introTitle: {

    fontSize: 15,

    fontWeight: '600',

    color: Colors.light.text,

    marginBottom: 6,

  },

  introBody: {

    fontSize: 13,

    lineHeight: 20,

    color: Colors.light.textSecondary,

  },

  chips: {

    flexDirection: 'row',

    flexWrap: 'wrap',

    gap: 8,

  },

  chip: {

    paddingVertical: 8,

    paddingHorizontal: 16,

    borderRadius: BorderRadius.full,

    borderWidth: 1,

    borderColor: Colors.light.borderDashed,

    backgroundColor: Colors.light.surface,

  },

  chipActive: {

    backgroundColor: Colors.light.tint,

    borderColor: Colors.light.tint,

  },

  chipText: {

    fontSize: 14,

    fontWeight: '500',

    color: Colors.light.text,

  },

  chipTextActive: {

    color: Colors.light.background,

  },

})