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

const ACCENT = '#FB923C';
const THEME = { dark: { bg: '#0F0A06', card: '#1B140E', card2: '#291E15', line: '#2E231A', text2: '#B4A090', text3: '#75655A' }, light: { bg: '#FBF3EC', card: '#FFFFFF', card2: '#F3E2D4' } };
const RUNS = [
  { id: 1, name: 'Morning intervals', when: 'Today', km: 5.2, time: '26:32', pace: '5:06', kcal: 312, splits: [5.2, 5.07, 4.97, 5.14, 4.86], elev: 42 },
  { id: 2, name: 'Easy river loop', when: 'Sun', km: 8.1, time: '44:50', pace: '5:32', kcal: 480, splits: [5.6, 5.5, 5.5, 5.4, 5.6, 5.5, 5.4, 5.3], elev: 18 },
  { id: 3, name: 'Long run', when: 'Fri', km: 15.0, time: '1:22:10', pace: '5:28', kcal: 890, splits: [5.5, 5.4, 5.5, 5.4, 5.3, 5.5, 5.4, 5.6, 5.4, 5.3, 5.5, 5.4, 5.3, 5.2, 5.1], elev: 120 },
  { id: 4, name: 'Tempo', when: 'Wed', km: 6.0, time: '28:48', pace: '4:48', kcal: 360, splits: [5.1, 4.8, 4.7, 4.7, 4.8, 4.7], elev: 30 },
];
const WEEKKM = [6, 0, 8.1, 0, 15, 8.1, 5.2];
const DAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const paceOf = (m) => Math.floor(m) + ':' + (Math.round((m % 1) * 60) < 10 ? '0' : '') + Math.round((m % 1) * 60);

function RunScreen({ nav }) {
  const t = useT();
  const [state, setState] = useState('ready');
  const [sec, setSec] = useState(0);
  useEffect(() => { if (state !== 'running') return; const id = setInterval(() => setSec((s) => s + 1), 1000); return () => clearInterval(id); }, [state]);
  const km = sec * 0.0032;
  const mm = Math.floor(sec / 60), ss = sec % 60;
  return (
    <Scroll pad={0}>
      <Header kicker="Tuesday · 18° light wind" title="Run" right={<Pill label={state === 'running' ? 'Recording' : state === 'paused' ? 'Paused' : 'GPS ready'} color={state === 'running' ? t.danger : state === 'paused' ? t.warning : t.success} />} />
      <View style={{ paddingHorizontal: 20 }}>
        <Card pad={0} style={{ overflow: 'hidden' }}>
          <Gradient colors={t.isDark ? ['#1F2A1C', '#0F1A10'] : ['#DCEBD5', '#F2F7EE']} style={{ height: 190, padding: 16 }}>
            <View style={{ position: 'absolute', left: 30, top: 50, width: 280, height: 110, borderRadius: 60, borderWidth: 4, borderColor: ACCENT, transform: [{ rotate: '-8deg' }] }} />
            {[[60, 70], [140, 40], [250, 62], [300, 130], [120, 150]].map((p, i) => <View key={i} style={{ position: 'absolute', left: p[0], top: p[1], width: 10, height: 10, borderRadius: 5, backgroundColor: alpha(t.text, 0.25) }} />)}
            <View style={{ position: 'absolute', right: 30, top: 70, width: 18, height: 18, borderRadius: 9, backgroundColor: ACCENT, borderWidth: 3, borderColor: '#fff' }} />
            <Pill label="Riverside loop · 5 km" color={ACCENT} />
          </Gradient>
        </Card>
        <Card style={{ alignItems: 'center', marginTop: 12, paddingVertical: 22 }}>
          <Text style={[{ fontSize: 68, fontWeight: '700', letterSpacing: -3, color: t.text }, T.num]}>{km.toFixed(2)}</Text>
          <Text style={[T.subhead, { color: t.text2, marginTop: -4 }]}>kilometres</Text>
          <View style={{ flexDirection: 'row', gap: 28, marginTop: 18 }}>
            <View style={{ alignItems: 'center' }}><Text style={[T.title2, T.num, { color: t.text }]}>{mm}:{ss < 10 ? '0' + ss : ss}</Text><Text style={[T.caption, { color: t.text2 }]}>time</Text></View>
            <View style={{ alignItems: 'center' }}><Text style={[T.title2, T.num, { color: t.text }]}>{km > 0.05 ? paceOf(sec / 60 / km) : '--:--'}</Text><Text style={[T.caption, { color: t.text2 }]}>pace /km</Text></View>
            <View style={{ alignItems: 'center' }}><Text style={[T.title2, T.num, { color: t.text }]}>{state === 'running' ? 152 : 68}</Text><Text style={[T.caption, { color: t.text2 }]}>bpm</Text></View>
          </View>
        </Card>
        <View style={{ flexDirection: 'row', gap: 10, marginTop: 14 }}>
          {state === 'ready' ? <View style={{ flex: 1 }}><Button label="Start run" icon="Play" full onPress={() => setState('running')} /></View> : null}
          {state === 'running' ? <View style={{ flex: 1 }}><Button label="Pause" icon="Pause" kind="secondary" full onPress={() => setState('paused')} /></View> : null}
          {state === 'paused' ? <View style={{ flex: 1 }}><Button label="Resume" icon="Play" full onPress={() => setState('running')} /></View> : null}
          {state !== 'ready' ? <View style={{ flex: 1 }}><Button label="Finish" icon="Flag" color={t.danger} full onPress={() => { setState('ready'); setSec(0); nav.push('run', { id: 1 }); }} /></View> : null}
        </View>
        <SectionTitle title="Recent runs" />
        <Group>
          {RUNS.slice(0, 3).map((r) => <Row key={r.id} icon="Footprints" iconColor={ACCENT} iconBg={alpha(ACCENT, 0.2)} title={r.name} subtitle={r.when + ' · ' + r.time} value={r.km.toFixed(1) + ' km'} sub2={r.pace + ' /km'} onPress={() => nav.push('run', { id: r.id })} />)}
        </Group>
      </View>
    </Scroll>
  );
}

function StatsScreen({ nav }) {
  const t = useT();
  const [range, setRange] = useState('week');
  const total = WEEKKM.reduce((a, b) => a + b, 0);
  return (
    <Scroll pad={0}>
      <Header kicker="Progress" title="Stats" />
      <View style={{ paddingHorizontal: 20 }}>
        <Segmented options={[{ label: 'Week', value: 'week' }, { label: 'Month', value: 'month' }, { label: 'Year', value: 'year' }]} value={range} onChange={setRange} />
        <Card style={{ marginTop: 16 }}>
          <View style={{ flexDirection: 'row' }}><Stat label="Distance" value={total.toFixed(1) + ' km'} delta="+6.4 km" /><Stat label="Runs" value="5" /><Stat label="Avg pace" value="5:18" delta="-0:09" /></View>
          <Spacer h={16} />
          <Bars values={WEEKKM} labels={DAYS} height={110} highlight={6} />
        </Card>
        <SectionTitle title="Pace trend" />
        <Card>
          <Text style={[T.subhead, { color: t.text2 }]}>Average pace, 10 weeks</Text>
          <Text style={[T.title2, T.num, { color: t.text, marginTop: 2 }]}>5:18 <Text style={[T.subhead, { color: t.success }]}>30 s faster</Text></Text>
          <Spark values={[5.8, 5.75, 5.7, 5.6, 5.55, 5.5, 5.4, 5.35, 5.3, 5.3].map((v) => -v)} height={90} style={{ marginTop: 8 }} />
        </Card>
        <SectionTitle title="Records" />
        <Group>
          <Row icon="Trophy" iconColor="#E8B04B" iconBg={alpha('#E8B04B', 0.2)} title="Fastest 5 km" value="24:48" sub2="Wed" />
          <Row icon="Trophy" iconColor="#E8B04B" iconBg={alpha('#E8B04B', 0.2)} title="Fastest 10 km" value="52:10" sub2="2 wks ago" />
          <Row icon="Trophy" iconColor="#E8B04B" iconBg={alpha('#E8B04B', 0.2)} title="Longest run" value="15.0 km" sub2="Fri" onPress={() => nav.push('run', { id: 3 })} />
        </Group>
      </View>
    </Scroll>
  );
}

function PlanScreen() {
  const t = useT();
  const plan = [['Mon', 'Rest', '', t.text3], ['Tue', 'Intervals', '6 × 800 m', ACCENT], ['Wed', 'Easy', '6 km', '#22C55E'], ['Thu', 'Tempo', '5 km at 4:50', '#A78BFA'], ['Fri', 'Rest', '', t.text3], ['Sat', 'Long run', '16 km', '#38BDF8'], ['Sun', 'Recovery', '5 km easy', '#22C55E']];
  return (
    <Scroll pad={0}>
      <Header kicker="Lisbon Half · 18 weeks" title="Plan" right={<Pill label="Week 9" color={ACCENT} />} />
      <View style={{ paddingHorizontal: 20 }}>
        <Card>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}><Text style={[T.subhead, { color: t.text2 }]}>Training block</Text><Text style={[T.subhead, T.num, { color: t.text }]}>9 of 18 weeks</Text></View>
          <Progress value={0.5} style={{ marginTop: 10 }} />
          <Text style={[T.footnote, { color: t.text2, marginTop: 10 }]}>Goal 1:52:00 · predicted 1:54:30 at current fitness</Text>
        </Card>
        <SectionTitle title="This week" />
        <Group>
          {plan.map((p) => <Row key={p[0]} leading={<Text style={[T.subhead, { color: t.text2, width: 36 }]}>{p[0]}</Text>} title={p[1]} subtitle={p[2]} right={p[0] === 'Tue' ? <Pill label="Today" color={ACCENT} small /> : <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: p[3] }} />} />)}
        </Group>
      </View>
    </Scroll>
  );
}

function RunDetail({ nav, params }) {
  const t = useT();
  const r = RUNS.find((x) => x.id === params.id) || RUNS[0];
  const best = Math.min(...r.splits);
  return (
    <Screen>
      <NavBar title={r.name} onBack={nav.pop} right={<Icon name="Share2" size={20} />} />
      <Scroll pad={20}>
        <Card pad={0} style={{ overflow: 'hidden' }}>
          <Gradient colors={t.isDark ? ['#1F2A1C', '#0F1A10'] : ['#DCEBD5', '#F2F7EE']} style={{ height: 160 }}>
            <View style={{ position: 'absolute', left: 40, top: 30, width: 280, height: 100, borderRadius: 50, borderWidth: 4, borderColor: ACCENT, transform: [{ rotate: '6deg' }] }} />
          </Gradient>
        </Card>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12, marginTop: 12 }}>
          <Card style={{ width: '47.5%', flexGrow: 1 }}><Stat label="Distance" value={r.km.toFixed(2) + ' km'} /></Card>
          <Card style={{ width: '47.5%', flexGrow: 1 }}><Stat label="Time" value={r.time} /></Card>
          <Card style={{ width: '47.5%', flexGrow: 1 }}><Stat label="Avg pace" value={r.pace + ' /km'} color={ACCENT} /></Card>
          <Card style={{ width: '47.5%', flexGrow: 1 }}><Stat label="Elevation" value={'+' + r.elev + ' m'} /></Card>
        </View>
        <SectionTitle title="Splits" />
        <Card>
          {r.splits.map((s, i) => (
            <View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 12, marginBottom: 8 }}>
              <Text style={[T.caption, T.num, { color: t.text2, width: 36 }]}>km {i + 1}</Text>
              <View style={{ flex: 1 }}><Progress value={(6.2 - s) / 1.8} color={s === best ? t.success : ACCENT} height={10} /></View>
              <Text style={[T.subhead, T.num, { color: s === best ? t.success : t.text, width: 44, textAlign: 'right' }]}>{paceOf(s)}</Text>
            </View>
          ))}
        </Card>
        <SectionTitle title="Effort" />
        <Group>
          <Row icon="HeartPulse" iconColor="#FF375F" iconBg={alpha('#FF375F', 0.2)} title="Average heart rate" value="156 bpm" />
          <Row icon="Flame" iconColor={ACCENT} iconBg={alpha(ACCENT, 0.2)} title="Calories" value={r.kcal + ' kcal'} />
          <Row icon="Footprints" iconColor="#22C55E" iconBg={alpha('#22C55E', 0.2)} title="Cadence" value="178 spm" />
        </Group>
      </Scroll>
    </Screen>
  );
}

function Root({ nav }) {
  const [tab, setTab] = useState('run');
  return (
    <Screen>
      <Tabs active={tab} screens={{ run: <RunScreen nav={nav} />, stats: <StatsScreen nav={nav} />, plan: <PlanScreen /> }} />
      <TabBar active={tab} onChange={setTab} tabs={[
        { key: 'run', label: 'Run', icon: 'Footprints' },
        { key: 'stats', label: 'Stats', icon: 'ChartColumn' },
        { key: 'plan', label: 'Plan', icon: 'CalendarDays' },
      ]} />
    </Screen>
  );
}
const SCREENS = { root: Root, run: RunDetail };

export default function App() {
  return (
    <ThemeProvider accent={ACCENT} overrides={THEME}>
      <Stack screens={SCREENS} initial="root" />
    </ThemeProvider>
  );
}