import {

  View,

  Text,

  StyleSheet,

  KeyboardAvoidingView,

  ScrollView,

  TouchableOpacity,

} from "react-native";

import { useState } from "react";

import { router } from "expo-router";

import { Card } from "@/components/ui/Cards";

import { Input } from "@/components/ui/Input";

import { Button } from "@/components/ui/Button";

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

import { Spacing, Typography, Colors, BorderRadius, Shadows } from "@/constants/theme";

import { TimePicker } from "@/components/ui/TimePicker";

import { useCreateCareAction } from "@/hooks";

import { MedicinePeriodicity } from "@/lib/api";

const PERIODICITY_OPTIONS: { label: string; value: MedicinePeriodicity }[] = [

  { label: 'Uma vez', value: 'ONCE' },

  { label: 'Diário', value: 'DAILY' },

  { label: '2x ao dia', value: 'TWICE_DAILY' },

  { label: '3x ao dia', value: 'THREE_TIMES_DAILY' },

  { label: 'Semanal', value: 'WEEKLY' },

  { label: 'Quinzenal', value: 'BIWEEKLY' },

  { label: 'Mensal', value: 'MONTHLY' },

];

function getTimePickerCount(p: MedicinePeriodicity): number {

  switch (p) {

    case 'ONCE': return 0;

    case 'DAILY': return 1;

    case 'TWICE_DAILY': return 2;

    case 'THREE_TIMES_DAILY': return 3;

    case 'WEEKLY':

    case 'BIWEEKLY':

    case 'MONTHLY': return 1;

  }

}

export default function MedicineNewCareAction() {

  const [medicineName, setMedicineName] = useState('');

  const [medicineDosage, setMedicineDosage] = useState('');

  const [medicinePeriodicity, setMedicinePeriodicity] = useState<MedicinePeriodicity>('ONCE');

  const [scheduledTimes, setScheduledTimes] = useState<Date[]>([]);

  const createCareAction = useCreateCareAction();

  const handleSave = async () => {

    const count = getTimePickerCount(medicinePeriodicity);

    const scheduledAt = scheduledTimes.slice(0, count).map(

      d => `${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`

    );

    await createCareAction.mutateAsync({

      type: 'MEDICINE',

      moment: new Date(),

      medicine: {

        name: medicineName,

        dosage: medicineDosage,

        periodicity: medicinePeriodicity,

        scheduledAt,

      },

    });

    router.replace('/(tabs)/actions');

  };

  return (

    <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>

      <ScrollView scrollEventThrottle={16}>

        <View style={styles.container}>

          <View style={styles.header}>

            <Text style={styles.headerTitle}>Novo medicamento</Text>

            <Text style={styles.headerSubtitle}>

              Informe os detalhes do medicamento

            </Text>

          </View>

          <Section>

            <SectionHeader title="Detalhes" />

            <Card style={{ padding: Spacing.cardGap }}>

              <Input

                label="Nome"

                value={medicineName}

                onChangeText={setMedicineName}

                placeholder="Ex: Fluoxetina"

                variant="darkGhost"

              />

              <Input

                label="Dosagem"

                value={medicineDosage}

                onChangeText={setMedicineDosage}

                placeholder="Ex: 20mg"

                variant="darkGhost"

              />

            </Card>

          </Section>

          <Section>

            <SectionHeader title="Frequência" />

            <View style={styles.periodicityRow}>

              {PERIODICITY_OPTIONS.map((opt) => (

                <TouchableOpacity

                  key={opt.value}

                  style={[

                    styles.periodicityChip,

                    medicinePeriodicity === opt.value && styles.periodicityChipActive,

                  ]}

                  onPress={() => {

                    setMedicinePeriodicity(opt.value);

                    const count = getTimePickerCount(opt.value);

                    setScheduledTimes(prev =>

                      count === 0 ? [] :

                      count > prev.length ? [...prev, ...Array(count - prev.length).fill(new Date())] :

                      prev.slice(0, count)

                    );

                  }}

                  activeOpacity={0.7}

                >

                  <Text

                    style={[

                      styles.periodicityChipLabel,

                      medicinePeriodicity === opt.value && styles.periodicityChipLabelActive,

                    ]}

                  >

                    {opt.label}

                  </Text>

                </TouchableOpacity>

              ))}

            </View>

          </Section>

          {scheduledTimes.length > 0 && (

            <Section>

              <SectionHeader title={scheduledTimes.length === 1 ? 'Horário' : 'Horários'} />

              {scheduledTimes.map((t, i) => (

                <View style={{ marginTop: 10 }} key={i}>

                  <TimePicker

                    value={t}

                    onChange={(date) =>

                      setScheduledTimes(prev => prev.map((v, idx) => idx === i ? date : v))

                    }

                  />

                </View>

              ))}

            </Section>

          )}

          <Button

            title="Salvar"

            onPress={handleSave}

            loading={createCareAction.isPending}

            disabled={!medicineName || !medicineDosage}

          />

        </View>

      </ScrollView>

    </KeyboardAvoidingView>

  );

}

const styles = StyleSheet.create({

  keyboardView: {

    flex: 1,

  },

  container: {

    gap: 24,

    paddingHorizontal: Spacing.containerPadding,

    paddingVertical: Spacing.sectionGap,

    marginBottom: 50,

  },

  header: {

    gap: 8,

  },

  headerTitle: {

    ...Typography.headlineMd,

  },

  headerSubtitle: {

    ...Typography.bodyMd,

    color: Colors.light.textSecondary,

  },

  periodicityRow: {

    flexDirection: 'row',

    flexWrap: 'wrap',

    gap: 8,

  },

  periodicityChip: {

    paddingHorizontal: 16,

    paddingVertical: 10,

    borderRadius: BorderRadius.full,

    backgroundColor: '#fff',

    borderWidth: 1.5,

    borderColor: Colors.light.divider,

  },

  periodicityChipActive: {

    backgroundColor: Colors.light.tint + '1A',

    borderColor: Colors.light.tint,

  },

  periodicityChipLabel: {

    fontSize: 14,

    fontWeight: '500',

    color: Colors.light.text,

  },

  periodicityChipLabelActive: {

    fontWeight: '600',

    color: Colors.light.text,

  },

});