import React, { useState, createContext, useContext } from 'react';
import { View, Text } from 'react-native';
import { ThemeProvider, useT, T, Screen, Scroll, Header, NavBar, Card, Group, Row, Button, Chip, Pill, Checkbox, Toggle, Ring, Bars, Spark, Stat, Avatar, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle } from './ui/kit';

const ACCENT = '#7C5CFF';
const THEME = { dark: { bg: '#0B0B10', card: '#15151C', card2: '#1F1F28', line: '#24242E' }, light: { bg: '#F4F3FA' } };

const HABITS = [
  { id: 1, name: 'Morning stretch', icon: 'Sunrise', color: '#FF9F43', streak: 14, time: '7:00', days: [1,1,1,0,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1] },
  { id: 2, name: 'Read 20 pages', icon: 'BookOpen', color: '#4DA3FF', streak: 9, time: '21:30', days: [1,0,1,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1] },
  { id: 3, name: 'Deep work block', icon: 'Target', color: '#7C5CFF', streak: 21, time: '9:00', days: [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] },
  { id: 4, name: 'Walk outside', icon: 'Footprints', color: '#30D158', streak: 5, time: '12:30', days: [0,1,1,0,1,0,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,0,1,1,1,1,1,1] },
  { id: 5, name: 'No screens after 10', icon: 'MoonStar', color: '#F2C94C', streak: 3, time: '22:00', days: [1,0,0,1,0,1,0,1,0,0,1,0,1,1,0,1,0,0,1,0,1,1,0,1,0,1,1,1] },
];
const WEEK = [3, 5, 4, 5, 2, 5, 3];
const DAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const Done = createContext([{}, () => {}]);

function TodayScreen({ nav }) {
  const t = useT();
  const [done, setDone] = useContext(Done);
  const completed = HABITS.filter((h) => done[h.id]).length;
  const pct = completed / HABITS.length;
  return (
    <Scroll pad={0}>
      <Header kicker="Tuesday, 14 May" title="Today" right={<Avatar name="Maya K" size={38} />} />
      <View style={{ paddingHorizontal: 20 }}>
        <Card style={{ flexDirection: 'row', alignItems: 'center', gap: 18 }} onPress={() => nav.push('week')}>
          <Ring progress={pct} size={128} stroke={13}>
            <Text style={[T.title1, T.num, { color: t.text }]}>{Math.round(pct * 100)}%</Text>
            <Text style={[T.caption, { color: t.text2 }]}>{completed} of {HABITS.length}</Text>
          </Ring>
          <View style={{ flex: 1 }}>
            <Text style={[T.title3, { color: t.text }]}>{completed === HABITS.length ? 'All done. Rest well.' : (HABITS.length - completed) + ' to go'}</Text>
            <Text style={[T.footnote, { color: t.text2, marginTop: 4 }]}>You are on a 12 day streak. Finish today to keep it alive.</Text>
            <View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>
              <Pill label="12 day streak" color="#FF9F43" />
              <Pill label="Best 21" color={ACCENT} />
            </View>
          </View>
        </Card>
        <SectionTitle title="Habits" action="Edit" onAction={() => {}} />
        <Group>
          {HABITS.map((h) => (
            <Row
              key={h.id}
              icon={h.icon}
              iconColor={h.color}
              iconBg={t.isDark ? h.color + '2E' : h.color + '22'}
              title={h.name}
              subtitle={h.time + '  ·  ' + h.streak + ' day streak'}
              titleStyle={done[h.id] ? { color: t.text3, textDecorationLine: 'line-through' } : null}
              onPress={() => nav.push('habit', { id: h.id })}
              right={<Checkbox checked={!!done[h.id]} color={h.color} onChange={() => setDone((d) => Object.assign({}, d, { [h.id]: !d[h.id] }))} />}
            />
          ))}
        </Group>
        <Spacer h={16} />
        <Button label="Add a habit" icon="Plus" kind="soft" full onPress={() => {}} />
      </View>
    </Scroll>
  );
}

function StatsScreen() {
  const t = useT();
  const [range, setRange] = useState('week');
  return (
    <Scroll pad={0}>
      <Header kicker="Insights" title="Stats" />
      <View style={{ paddingHorizontal: 20 }}>
        <View style={{ flexDirection: 'row', gap: 8, marginBottom: 16 }}>
          <Chip label="Week" active={range === 'week'} onPress={() => setRange('week')} />
          <Chip label="Month" active={range === 'month'} onPress={() => setRange('month')} />
          <Chip label="Year" active={range === 'year'} onPress={() => setRange('year')} />
        </View>
        <Card>
          <View style={{ flexDirection: 'row' }}>
            <Stat label="Completion" value="86%" delta="+8% vs last week" />
            <Stat label="Perfect days" value="4" delta="of 7" up />
          </View>
          <Spacer h={18} />
          <Bars values={WEEK} max={5} labels={DAYS} height={110} highlight={1} />
        </Card>
        <SectionTitle title="Consistency" />
        <Card>
          <Text style={[T.subhead, { color: t.text2 }]}>Last 30 days</Text>
          <Text style={[T.title2, T.num, { color: t.text, marginTop: 2 }]}>Trending up</Text>
          <Spark values={[2, 3, 3, 4, 3, 4, 5, 4, 4, 5, 3, 5, 5, 4, 5, 5]} height={90} style={{ marginTop: 10 }} />
        </Card>
        <SectionTitle title="Streaks" />
        <Group>
          {HABITS.slice().sort((a, b) => b.streak - a.streak).map((h) => (
            <Row key={h.id} icon={h.icon} iconColor={h.color} iconBg={t.isDark ? h.color + '2E' : h.color + '22'} title={h.name} value={h.streak + 'd'} sub2="streak" />
          ))}
        </Group>
      </View>
    </Scroll>
  );
}

function HabitsScreen({ nav }) {
  const t = useT();
  const [remind, setRemind] = useState({ 1: true, 2: true, 3: true, 4: false, 5: true });
  return (
    <Scroll pad={0}>
      <Header kicker="Manage" title="Habits" right={<Button label="New" icon="Plus" small onPress={() => {}} />} />
      <View style={{ paddingHorizontal: 20 }}>
        <Group>
          {HABITS.map((h) => (
            <Row key={h.id} icon={h.icon} iconColor={h.color} iconBg={t.isDark ? h.color + '2E' : h.color + '22'} title={h.name} subtitle={'Reminder at ' + h.time} onPress={() => nav.push('habit', { id: h.id })} right={<Toggle value={!!remind[h.id]} onChange={(v) => setRemind((r) => Object.assign({}, r, { [h.id]: v }))} />} />
          ))}
        </Group>
        <SectionTitle title="Preferences" />
        <Group>
          <Row icon="Bell" title="Daily summary" subtitle="Every evening at 21:00" right={<Toggle value onChange={() => {}} />} />
          <Row icon="CalendarDays" title="Week starts on" value="Monday" chevron onPress={() => {}} />
          <Row icon="Palette" title="Accent colour" value="Violet" chevron onPress={() => {}} />
        </Group>
      </View>
    </Scroll>
  );
}

function HabitDetail({ nav, params }) {
  const t = useT();
  const [done, setDone] = useContext(Done);
  const h = HABITS.find((x) => x.id === params.id) || HABITS[0];
  const rate = h.days.filter(Boolean).length / h.days.length;
  const isDone = !!done[h.id];
  return (
    <Screen>
      <NavBar title={h.name} onBack={nav.pop} right={<Icon name="Ellipsis" size={22} />} />
      <Scroll pad={20}>
        <View style={{ alignItems: 'center', marginTop: 8 }}>
          <Ring progress={rate} size={170} stroke={16} color={h.color}>
            <Icon name={h.icon} size={34} color={h.color} strokeWidth={2.2} />
            <Text style={[T.title2, T.num, { color: t.text, marginTop: 6 }]}>{Math.round(rate * 100)}%</Text>
          </Ring>
          <Text style={[T.subhead, { color: t.text2, marginTop: 12 }]}>completed over the last 28 days</Text>
        </View>
        <View style={{ flexDirection: 'row', gap: 12, marginTop: 20 }}>
          <Card style={{ flex: 1 }}><Stat label="Current streak" value={h.streak + ' days'} /></Card>
          <Card style={{ flex: 1 }}><Stat label="Reminder" value={h.time} /></Card>
        </View>
        <SectionTitle title="Last 4 weeks" />
        <Card>
          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, justifyContent: 'space-between' }}>
            {h.days.map((d, i) => (
              <View key={i} style={{ width: 34, height: 34, borderRadius: 10, backgroundColor: d ? h.color : t.card2, alignItems: 'center', justifyContent: 'center', opacity: d ? 1 : 0.9 }}>
                {d ? <Icon name="Check" size={16} color="#fff" strokeWidth={3} /> : null}
              </View>
            ))}
          </View>
        </Card>
        <Spacer h={20} />
        <Button label={isDone ? 'Completed today' : 'Mark as done'} icon={isDone ? 'Check' : 'Circle'} color={h.color} full onPress={() => setDone((d) => Object.assign({}, d, { [h.id]: !d[h.id] }))} />
      </Scroll>
    </Screen>
  );
}

function WeekDetail({ nav }) {
  const t = useT();
  return (
    <Screen>
      <NavBar title="This week" onBack={nav.pop} />
      <Scroll pad={20}>
        <Card>
          <Text style={[T.subhead, { color: t.text2 }]}>Completed habits</Text>
          <Text style={[T.largeTitle, T.num, { color: t.text }]}>27 <Text style={[T.title3, { color: t.text2 }]}>of 35</Text></Text>
          <Bars values={WEEK} max={5} labels={DAYS} height={140} highlight={1} style={{ marginTop: 14 }} />
        </Card>
        <SectionTitle title="By habit" />
        <Group>
          {HABITS.map((h) => (
            <Row key={h.id} icon={h.icon} iconColor={h.color} iconBg={t.isDark ? h.color + '2E' : h.color + '22'} title={h.name} value={Math.round(h.days.slice(-7).filter(Boolean).length) + '/7'} />
          ))}
        </Group>
      </Scroll>
    </Screen>
  );
}

function Root({ nav }) {
  const [tab, setTab] = useState('today');
  return (
    <Screen>
      <Tabs active={tab} screens={{ today: <TodayScreen nav={nav} />, stats: <StatsScreen />, habits: <HabitsScreen nav={nav} /> }} />
      <TabBar
        active={tab}
        onChange={setTab}
        tabs={[
          { key: 'today', label: 'Today', icon: 'CircleCheckBig' },
          { key: 'stats', label: 'Stats', icon: 'ChartColumn' },
          { key: 'habits', label: 'Habits', icon: 'ListChecks' },
        ]}
      />
    </Screen>
  );
}

const SCREENS = { root: Root, habit: HabitDetail, week: WeekDetail };

export default function App() {
  const state = useState({ 3: true });
  return (
    <ThemeProvider accent={ACCENT} overrides={THEME}>
      <Done.Provider value={state}>
        <Stack screens={SCREENS} initial="root" />
      </Done.Provider>
    </ThemeProvider>
  );
}