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

const ACCENT = '#14B8A6';
const THEME = { dark: { bg: '#060F0E', card: '#0F1C1A', card2: '#172A27', line: '#1A2E2B', text2: '#8FB0AB', text3: '#557270' }, light: { bg: '#EDF6F5', card: '#FFFFFF', card2: '#DAEBE8' } };
const GOALS_INIT = [
  { id: 1, title: 'Run a half marathon', area: 'Health', icon: 'Footprints', c: '#14B8A6', due: 'Oct 2026', progress: 0.62, steps: [['Build to 15 km long run', true], ['Sign up for the Lisbon Half', true], ['Four runs a week for 8 weeks', false], ['Race day', false]], why: 'To prove the knee is back and to spend Sunday mornings outside.' },
  { id: 2, title: 'Ship the side project', area: 'Work', icon: 'Rocket', c: '#6366F1', due: 'Jul 2026', progress: 0.4, steps: [['Landing page', true], ['Core feature', false], ['Ten beta users', false], ['Launch post', false]], why: 'A small thing of my own that people use.' },
  { id: 3, title: 'Read 30 books', area: 'Mind', icon: 'BookOpen', c: '#E8B04B', due: 'Dec 2026', progress: 0.6, steps: [['10 books', true], ['20 books', false], ['30 books', false]], why: 'Fewer feeds, more pages.' },
  { id: 4, title: 'Save $10k', area: 'Money', icon: 'PiggyBank', c: '#FF6B9D', due: 'Dec 2026', progress: 0.54, steps: [['Automate $300 a week', true], ['$5k', true], ['$10k', false]], why: 'Room to say no.' },
  { id: 5, title: 'Learn to surf', area: 'Play', icon: 'Waves', c: '#38BDF8', due: 'Sep 2026', progress: 0.2, steps: [['Five lessons', true], ['Stand up on a green wave', false], ['Own board', false]], why: 'Because it looks like joy.' },
];
const Store = createContext(null);

function GoalsScreen({ nav }) {
  const t = useT();
  const { goals } = useContext(Store);
  const avg = goals.reduce((a, g) => a + g.progress, 0) / goals.length;
  const [area, setArea] = useState('All');
  const list = goals.filter((g) => area === 'All' || g.area === area);
  return (
    <Scroll pad={0}>
      <Header kicker="2026" title="Goals" right={<Ring progress={avg} size={46} stroke={5}><Text style={[T.caption2, T.num, { color: t.text }]}>{Math.round(avg * 100)}%</Text></Ring>} />
      <Scroll horizontal pad={20} contentStyle={{ gap: 8, paddingBottom: 14 }}>
        {['All', 'Health', 'Work', 'Mind', 'Money', 'Play'].map((a) => <Chip key={a} label={a} active={area === a} onPress={() => setArea(a)} />)}
      </Scroll>
      <View style={{ paddingHorizontal: 20, gap: 12 }}>
        {list.map((g) => (
          <Card key={g.id} onPress={() => nav.push('goal', { id: g.id })}>
            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 14 }}>
              <View style={{ width: 48, height: 48, borderRadius: 16, backgroundColor: alpha(g.c, 0.2), alignItems: 'center', justifyContent: 'center' }}><Icon name={g.icon} size={24} color={g.c} /></View>
              <View style={{ flex: 1 }}>
                <Text style={[T.headline, { color: t.text }]}>{g.title}</Text>
                <Text style={[T.footnote, { color: t.text2, marginTop: 2 }]}>{g.area} · by {g.due} · {g.steps.filter((s) => s[1]).length}/{g.steps.length} milestones</Text>
              </View>
              <Text style={[T.title3, T.num, { color: g.c }]}>{Math.round(g.progress * 100)}%</Text>
            </View>
            <Progress value={g.progress} color={g.c} height={8} style={{ marginTop: 14 }} />
          </Card>
        ))}
        <Button label="New goal" icon="Plus" kind="soft" full onPress={() => {}} />
      </View>
    </Scroll>
  );
}

function WeekScreen() {
  const t = useT();
  const { goals } = useContext(Store);
  const [checks, setChecks] = useState({ 0: true, 1: true });
  const actions = [['Long run 16 km', 1], ['Write the core feature spec', 2], ['Finish Klara and the Sun', 3], ['Transfer $300', 4], ['Book Saturday lesson', 5], ['Easy run 8 km', 1]];
  const n = Object.values(checks).filter(Boolean).length;
  return (
    <Scroll pad={0}>
      <Header kicker="Week 20" title="This week" right={<Pill label={n + ' of ' + actions.length} color={ACCENT} />} />
      <View style={{ paddingHorizontal: 20 }}>
        <Card>
          <View style={{ flexDirection: 'row' }}>
            <Stat label="Actions done" value={n + '/' + actions.length} />
            <Stat label="Momentum" value="High" color={t.success} />
            <Stat label="Streak" value="6 wks" />
          </View>
          <Spacer h={14} />
          <Bars values={[4, 5, 3, 6, 5, 6, 2]} max={6} labels={['W14', 'W15', 'W16', 'W17', 'W18', 'W19', 'W20']} height={90} highlight={6} />
        </Card>
        <SectionTitle title="Actions" />
        <Group>
          {actions.map((a, i) => {
            const g = goals.find((x) => x.id === a[1]);
            return <Row key={i} leading={<Checkbox checked={!!checks[i]} color={g.c} onChange={() => setChecks((c) => Object.assign({}, c, { [i]: !c[i] }))} />} title={a[0]} subtitle={g.title} titleStyle={checks[i] ? { color: t.text3, textDecorationLine: 'line-through' } : null} right={<Icon name={g.icon} size={18} color={g.c} />} />;
          })}
        </Group>
      </View>
    </Scroll>
  );
}

function ReviewScreen() {
  const t = useT();
  return (
    <Scroll pad={0}>
      <Header kicker="Reflect" title="Review" />
      <View style={{ paddingHorizontal: 20 }}>
        <Card pad={0} style={{ overflow: 'hidden' }}>
          <Gradient colors={['#0F766E', '#14B8A6']} style={{ padding: 18 }}>
            <Text style={[T.caption, { color: alpha('#fff', 0.85), textTransform: 'uppercase', letterSpacing: 1 }]}>Sunday review</Text>
            <Text style={[T.title2, { color: '#fff', marginTop: 4 }]}>What moved this week?</Text>
            <Text style={[T.footnote, { color: alpha('#fff', 0.85), marginTop: 4 }]}>Three questions, five minutes. Your last 6 reviews are below.</Text>
            <Button label="Start review" icon="Pencil" color="#fff" style={{ alignSelf: 'flex-start', marginTop: 14 }} onPress={() => {}} />
          </Gradient>
        </Card>
        <SectionTitle title="Progress over 12 weeks" />
        <Card><Spark values={[0.22, 0.25, 0.27, 0.3, 0.31, 0.35, 0.38, 0.4, 0.42, 0.45, 0.46, 0.47].map((v) => v * 100)} height={100} /></Card>
        <SectionTitle title="Past reviews" />
        <Group>
          <Row icon="Sun" iconColor="#E8B04B" iconBg={alpha('#E8B04B', 0.2)} title="Week 19" subtitle="Ran further than ever. Side project stalled on scope." chevron onPress={() => {}} />
          <Row icon="Cloud" iconColor="#8FB0AB" iconBg={alpha('#8FB0AB', 0.2)} title="Week 18" subtitle="Travel week. Kept the reading going." chevron onPress={() => {}} />
          <Row icon="Sun" iconColor="#E8B04B" iconBg={alpha('#E8B04B', 0.2)} title="Week 17" subtitle="Signed up for the half. Hit $5k." chevron onPress={() => {}} />
        </Group>
      </View>
    </Scroll>
  );
}

function GoalDetail({ nav, params }) {
  const t = useT();
  const { goals, toggleStep } = useContext(Store);
  const g = goals.find((x) => x.id === params.id) || goals[0];
  return (
    <Screen>
      <NavBar title={g.area} onBack={nav.pop} right={<Icon name="Ellipsis" size={22} />} />
      <Scroll pad={20}>
        <View style={{ alignItems: 'center', marginTop: 6 }}>
          <Ring progress={g.progress} size={180} stroke={16} color={g.c}>
            <Icon name={g.icon} size={34} color={g.c} />
            <Text style={[T.title1, T.num, { color: t.text, marginTop: 6 }]}>{Math.round(g.progress * 100)}%</Text>
          </Ring>
          <Text style={[T.title1, { color: t.text, marginTop: 16, textAlign: 'center' }]}>{g.title}</Text>
          <Text style={[T.subhead, { color: t.text2, marginTop: 4 }]}>by {g.due}</Text>
        </View>
        <Card style={{ marginTop: 18 }}>
          <Text style={[T.caption, { color: g.c, textTransform: 'uppercase', letterSpacing: 1 }]}>Why this matters</Text>
          <Text style={[T.body, { color: t.text, marginTop: 6, lineHeight: 24 }]}>{g.why}</Text>
        </Card>
        <SectionTitle title="Milestones" />
        <Group>
          {g.steps.map((s, i) => <Row key={i} leading={<Checkbox checked={s[1]} color={g.c} onChange={() => toggleStep(g.id, i)} />} title={s[0]} titleStyle={s[1] ? { color: t.text3, textDecorationLine: 'line-through' } : null} onPress={() => toggleStep(g.id, i)} />)}
        </Group>
        <Spacer h={16} />
        <Button label="Log progress" icon="Plus" color={g.c} full onPress={() => {}} />
      </Scroll>
    </Screen>
  );
}

function Root({ nav }) {
  const [tab, setTab] = useState('goals');
  return (
    <Screen>
      <Tabs active={tab} screens={{ goals: <GoalsScreen nav={nav} />, week: <WeekScreen />, review: <ReviewScreen /> }} />
      <TabBar active={tab} onChange={setTab} tabs={[
        { key: 'goals', label: 'Goals', icon: 'Mountain' },
        { key: 'week', label: 'This week', icon: 'ListChecks' },
        { key: 'review', label: 'Review', icon: 'NotebookPen' },
      ]} />
    </Screen>
  );
}
const SCREENS = { root: Root, goal: GoalDetail };

export default function App() {
  const [goals, setGoals] = useState(GOALS_INIT);
  const toggleStep = (id, i) => setGoals((gs) => gs.map((g) => {
    if (g.id !== id) return g;
    const steps = g.steps.map((s, j) => (j === i ? [s[0], !s[1]] : s));
    return Object.assign({}, g, { steps, progress: steps.filter((s) => s[1]).length / steps.length });
  }));
  return (
    <ThemeProvider accent={ACCENT} overrides={THEME}>
      <Store.Provider value={{ goals, toggleStep }}>
        <Stack screens={SCREENS} initial="root" />
      </Store.Provider>
    </ThemeProvider>
  );
}