import { View, StyleSheet } from "react-native";

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

import { ThemedView } from "@/components/misc/themed-view";

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

import { useAuth } from "@/context/AuthContext";

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

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

import { Grid, Col, Row, Between } from "@/components/ui/LayoutHelpers";

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

import {

  Shadows,

  Colors,

  Typography,

  Spacing,

  BorderRadius,

} from "@/constants/theme";

import { Ionicons, Octicons } from "@expo/vector-icons";

import { Link, router } from "expo-router";

export default function Actions() {

  const { user } = useAuth();

  const onPressSleep = () => {

    router.push("/sleep/new");

  };

  const onPressTrigger = () => {

    router.push("/triggers/new");

  };

  return (

    <ScreenLayout

      userName={user?.firstName}

      userAvatar={user?.avatarURL}

      showNotificationBadge={true}

    >

      <Section>

        <SectionHeader

          title="Ações de Cuidado"

          subtitle="Registre atividades, acompanhe medicamentos e mantenha sua rotina organizada"

        ></SectionHeader>

        <Button

          title="Registrar ação de cuidado"

          size="large"

          onPress={() => router.push('/care-actions/new')}

          style={{ ...Shadows.lg }}

        />

      </Section>

      <Card style={{ padding: Spacing.cardGap, height: 150 }} onPress={() => router.push('/medicine-regimens')}>

        <View style={[styles.cardIcon, { backgroundColor: "#E7FDEF" }]}>

          <Ionicons name="bandage-outline" size={20} color="#13EC5B" />

        </View>

        <Text style={styles.cardTitleHeadline}>Gerenciar Medicamentos</Text>

        <Text style={styles.cardDescriptionHeadline}>

          Organize seus medicamentos, horários e doses

        </Text>

      </Card>

      <Grid gap={4}>

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

          <View style={[styles.cardIcon, { backgroundColor: "#EFF6FF" }]}>

            <Ionicons name="moon-outline" size={20} color="#2563EB" />

          </View>

          <Text style={styles.cardTitle}>Registrar Sono</Text>

          <Text style={styles.cardDescription}>

            Registre a duração e a qualidade do sono

          </Text>

        </Card>

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

          <View style={[styles.cardIcon, { backgroundColor: "#FFF7ED" }]}>

            <Ionicons name="flash-outline" size={20} color="#EA580C" />

          </View>

          <Text style={styles.cardTitle}>Registrar Gatilho</Text>

          <Text style={styles.cardDescription}>

            Registre eventos que aferatam seu humor

          </Text>

        </Card>

      </Grid>

      <Card style={styles.disclaimerCard}>

        <View style={styles.disclaimerTitleContainer}>

          <Ionicons

            name="information-circle-outline"

            size={20}

            color={Colors.light.tint}

          />

          <Text style={styles.disclaimerTitleText}>Nota de Apoio</Text>

        </View>

        <Text style={styles.disclaimerText}>

          Este aplicativo é um assistente digital para auxiliar no seu

          monitoramento diário. Em caso de emergência ou sintomas graves, entre

          em contato imediatamente com seu médico ou serviços de saúde locais.

        </Text>

        <View style={styles.disclaimerHelp}>

          <Link href="https://expo.dev" style={styles.disclaimerHelpText}>

            Ver canais de ajuda{" "}

            <Octicons name="link-external" size={12} color="black" />

          </Link>

        </View>

      </Card>

    </ScreenLayout>

  );

}

const styles = StyleSheet.create({

  cardIcon: {

    paddingVertical: 15,

    paddingHorizontal: 14,

    width: 48,

    borderRadius: BorderRadius.md,

  },

  cardTitleHeadline: {

    ...Typography.headlineMd,

    lineHeight: 20,

    marginTop: 4,

  },

  cardTitle: {

    ...Typography.bodyLg,

    lineHeight: 20,

    marginTop: 4,

  },

  cardDescriptionHeadline: {

    ...Typography.bodyMg,

    color: Colors.light.textSecondary,

    marginTop: 4,

  },

  cardDescription: {

    ...Typography.labelSm,

    color: Colors.light.textSecondary,

    marginTop: 4,

  },

  disclaimerCard: {

    padding: Spacing.cardGap,

    marginTop: 20,

  },

  disclaimerTitleContainer: {

    flex: 1,

    flexDirection: "row",

    gap: 5,

    marginBottom: 10,

  },

  disclaimerTitleText: {

    fontWeight: 600,

    fontSize: 16,

    lineHeight: 20,

  },

  disclaimerText: {

    fontSize: 12,

    lineHeight: 18,

    color: Colors.light.textSecondary,

  },

  disclaimerHelp: {

    marginTop: 10,

    borderTopWidth: 1,

    borderTopColor: Colors.light.divider,

    paddingTop: 5,

  },

  disclaimerHelpText: {

    color: "#0f172a",

    fontWeight: 500,

    fontSize: 12,

    lineHeight: 16,

    alignItems: "center",

  },

});