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, Stat, Ring, Bars, Progress, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, SearchBar, alpha } from './ui/kit';

const ACCENT = '#E8B04B';
const THEME = { dark: { bg: '#0F0D09', card: '#1A1711', card2: '#262118', line: '#2B261C', text2: '#A89F8C', text3: '#6C6557' }, light: { bg: '#FAF6EE', card: '#FFFFFF', card2: '#F0E8D8' } };
const BOOKS_INIT = [
  { id: 1, title: 'The Overstory', author: 'Richard Powers', pages: 502, read: 322, c: '#2A9D8F', genre: 'Fiction', rating: 5 },
  { id: 2, title: 'Project Hail Mary', author: 'Andy Weir', pages: 476, read: 130, c: '#4DA3FF', genre: 'Sci-fi', rating: 4 },
  { id: 3, title: 'Klara and the Sun', author: 'Kazuo Ishiguro', pages: 303, read: 276, c: '#E8B04B', genre: 'Fiction', rating: 4 },
  { id: 4, title: 'Thinking, Fast and Slow', author: 'Daniel Kahneman', pages: 499, read: 40, c: '#A78BFA', genre: 'Non-fiction', rating: 0 },
  { id: 5, title: 'Piranesi', author: 'Susanna Clarke', pages: 245, read: 245, c: '#FF6B9D', genre: 'Fantasy', rating: 5 },
  { id: 6, title: 'Educated', author: 'Tara Westover', pages: 334, read: 334, c: '#F0743A', genre: 'Memoir', rating: 5 },
];
const WEEK = [24, 40, 12, 36, 48, 60, 22];
const DAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const Store = createContext(null);

function Cover({ b, w, h, radius }) {
  const t = useT();
  return (
    <View style={{ width: w, height: h, borderRadius: radius == null ? 8 : radius, backgroundColor: b.c, padding: 8, justifyContent: 'flex-end', overflow: 'hidden' }}>
      <View style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, backgroundColor: alpha('#000', 0.25) }} />
      <Text style={{ color: '#fff', fontSize: Math.max(9, w / 7), fontWeight: '700', lineHeight: Math.max(11, w / 6) }} numberOfLines={3}>{b.title}</Text>
    </View>
  );
}

function ReadingScreen({ nav }) {
  const t = useT();
  const { books } = useContext(Store);
  const current = books.filter((b) => b.read < b.pages).sort((a, b) => b.read / b.pages - a.read / a.pages);
  const main = current[0];
  const readYear = 18, goal = 30;
  return (
    <Scroll pad={0}>
      <Header kicker="Tuesday evening" title="Reading" right={<Pill label="12 day streak" color="#FF9F43" />} />
      <View style={{ paddingHorizontal: 20 }}>
        <Card onPress={() => nav.push('book', { id: main.id })} style={{ flexDirection: 'row', gap: 16 }}>
          <Cover b={main} w={96} h={140} radius={10} />
          <View style={{ flex: 1, justifyContent: 'space-between' }}>
            <View>
              <Text style={[T.caption, { color: ACCENT, textTransform: 'uppercase', letterSpacing: 1 }]}>Continue</Text>
              <Text style={[T.title3, { color: t.text, marginTop: 4 }]} numberOfLines={2}>{main.title}</Text>
              <Text style={[T.footnote, { color: t.text2 }]}>{main.author}</Text>
            </View>
            <View>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}><Text style={[T.caption, T.num, { color: t.text2 }]}>Page {main.read} of {main.pages}</Text><Text style={[T.caption, T.num, { color: t.text }]}>{Math.round((main.read / main.pages) * 100)}%</Text></View>
              <Progress value={main.read / main.pages} color={main.c} height={6} style={{ marginTop: 6 }} />
            </View>
          </View>
        </Card>
        <SectionTitle title="2026 goal" />
        <Card style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
          <Ring progress={readYear / goal} size={84} stroke={9}><Text style={[T.headline, T.num, { color: t.text }]}>{readYear}</Text></Ring>
          <View style={{ flex: 1 }}>
            <Text style={[T.headline, { color: t.text }]}>{readYear} of {goal} books</Text>
            <Text style={[T.footnote, { color: t.text2, marginTop: 2 }]}>3 books ahead of schedule. At this pace you finish in October.</Text>
          </View>
        </Card>
        <SectionTitle title="Also reading" />
        <Group>
          {current.slice(1).map((b) => <Row key={b.id} leading={<Cover b={b} w={34} h={48} radius={5} />} title={b.title} subtitle={b.author} value={Math.round((b.read / b.pages) * 100) + '%'} valueColor={t.text2} chevron onPress={() => nav.push('book', { id: b.id })} />)}
        </Group>
      </View>
    </Scroll>
  );
}

function LibraryScreen({ nav }) {
  const t = useT();
  const { books } = useContext(Store);
  const [f, setF] = useState('all');
  const [q, setQ] = useState('');
  const list = books.filter((b) => (f === 'all' ? true : f === 'done' ? b.read >= b.pages : b.read < b.pages)).filter((b) => b.title.toLowerCase().includes(q.toLowerCase()));
  return (
    <Scroll pad={0}>
      <Header kicker={books.length + ' books'} title="Library" right={<Icon name="Plus" size={24} />} />
      <View style={{ paddingHorizontal: 20 }}>
        <SearchBar placeholder="Search your shelf" value={q} onChange={setQ} />
        <Segmented options={[{ label: 'All', value: 'all' }, { label: 'Reading', value: 'reading' }, { label: 'Finished', value: 'done' }]} value={f} onChange={setF} style={{ marginTop: 12 }} />
        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 14, marginTop: 20 }}>
          {list.map((b) => (
            <Pressable key={b.id} onPress={() => nav.push('book', { id: b.id })} style={({ pressed }) => [{ width: '30%', flexGrow: 1 }, pressed && { opacity: 0.7 }]}>
              <Cover b={b} w={108} h={156} radius={10} />
              <Text style={[T.caption, { color: t.text, fontWeight: '600', marginTop: 8 }]} numberOfLines={1}>{b.title}</Text>
              <Text style={[T.caption2, { color: t.text2 }]} numberOfLines={1}>{b.author}</Text>
            </Pressable>
          ))}
        </View>
      </View>
    </Scroll>
  );
}

function StatsScreen() {
  const t = useT();
  return (
    <Scroll pad={0}>
      <Header kicker="This week" title="Stats" />
      <View style={{ paddingHorizontal: 20 }}>
        <Card>
          <View style={{ flexDirection: 'row' }}>
            <Stat label="Minutes" value="242" delta="+38 vs last week" />
            <Stat label="Pages" value="186" />
            <Stat label="Avg speed" value="46 p/h" />
          </View>
          <Spacer h={16} />
          <Bars values={WEEK} labels={DAYS} height={110} highlight={5} />
        </Card>
        <SectionTitle title="Genres this year" />
        <Card>
          {[['Fiction', 0.44, '#2A9D8F'], ['Non-fiction', 0.28, '#A78BFA'], ['Sci-fi', 0.17, '#4DA3FF'], ['Memoir', 0.11, '#F0743A']].map((g) => (
            <View key={g[0]} style={{ marginBottom: 12 }}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}><Text style={[T.subhead, { color: t.text }]}>{g[0]}</Text><Text style={[T.subhead, T.num, { color: t.text2 }]}>{Math.round(g[1] * 100)}%</Text></View>
              <Progress value={g[1]} color={g[2]} style={{ marginTop: 6 }} />
            </View>
          ))}
        </Card>
        <SectionTitle title="Highlights" />
        <Group>
          <Row icon="Trophy" iconColor={ACCENT} iconBg={alpha(ACCENT, 0.18)} title="Longest session" subtitle="Saturday · 1h 40m" />
          <Row icon="Flame" iconColor="#FF9F43" iconBg={alpha('#FF9F43', 0.18)} title="Streak" subtitle="12 days, best is 31" />
          <Row icon="BookMarked" iconColor="#4DA3FF" iconBg={alpha('#4DA3FF', 0.18)} title="Finished this month" subtitle="Piranesi, Educated" />
        </Group>
      </View>
    </Scroll>
  );
}

function BookDetail({ nav, params }) {
  const t = useT();
  const { books, addPages } = useContext(Store);
  const b = books.find((x) => x.id === params.id) || books[0];
  const done = b.read >= b.pages;
  return (
    <Screen>
      <NavBar title="" onBack={nav.pop} right={<Icon name="Ellipsis" size={22} />} />
      <Scroll pad={20}>
        <View style={{ alignItems: 'center' }}>
          <Cover b={b} w={150} h={220} radius={14} />
          <Text style={[T.title1, { color: t.text, marginTop: 16, textAlign: 'center' }]}>{b.title}</Text>
          <Text style={[T.subhead, { color: t.text2, marginTop: 2 }]}>{b.author}</Text>
          <View style={{ flexDirection: 'row', gap: 4, marginTop: 10 }}>
            {[1, 2, 3, 4, 5].map((i) => <Icon key={i} name="Star" size={18} color={i <= b.rating ? ACCENT : t.text3} fill={i <= b.rating ? ACCENT : 'none'} />)}
          </View>
          <View style={{ flexDirection: 'row', gap: 8, marginTop: 10 }}>
            <Pill label={b.genre} color={b.c} /><Pill label={b.pages + ' pages'} color={t.text2} /><Pill label={done ? 'Finished' : 'Reading'} color={done ? t.success : ACCENT} />
          </View>
        </View>
        <Card style={{ marginTop: 20 }}>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}><Text style={[T.subhead, { color: t.text2 }]}>Progress</Text><Text style={[T.subhead, T.num, { color: t.text }]}>{b.read} / {b.pages}</Text></View>
          <Progress value={b.read / b.pages} color={b.c} height={10} style={{ marginTop: 10 }} />
          <Text style={[T.footnote, { color: t.text2, marginTop: 8 }]}>{done ? 'You finished this book.' : 'About ' + Math.ceil((b.pages - b.read) / 46) + ' hours left at your pace.'}</Text>
        </Card>
        <Spacer h={14} />
        {done ? <Button label="Write a review" icon="Pencil" kind="secondary" full onPress={() => {}} /> : <Button label="Log 20 pages" icon="BookOpen" full onPress={() => addPages(b.id, 20)} />}
        <SectionTitle title="Notes" />
        <Group>
          <Row icon="Quote" iconColor={b.c} iconBg={alpha(b.c, 0.18)} title="The best time to plant a tree was twenty years ago." subtitle="p. 112" />
          <Row icon="Highlighter" iconColor={ACCENT} iconBg={alpha(ACCENT, 0.18)} title="Chapter on mycorrhizal networks" subtitle="p. 204 · 3 highlights" />
        </Group>
      </Scroll>
    </Screen>
  );
}

function Root({ nav }) {
  const [tab, setTab] = useState('reading');
  return (
    <Screen>
      <Tabs active={tab} screens={{ reading: <ReadingScreen nav={nav} />, library: <LibraryScreen nav={nav} />, stats: <StatsScreen /> }} />
      <TabBar active={tab} onChange={setTab} tabs={[
        { key: 'reading', label: 'Reading', icon: 'BookOpen' },
        { key: 'library', label: 'Library', icon: 'Library' },
        { key: 'stats', label: 'Stats', icon: 'ChartColumn' },
      ]} />
    </Screen>
  );
}
const SCREENS = { root: Root, book: BookDetail };

export default function App() {
  const [books, setBooks] = useState(BOOKS_INIT);
  const addPages = (id, n) => setBooks((bs) => bs.map((b) => (b.id === id ? Object.assign({}, b, { read: Math.min(b.pages, b.read + n) }) : b)));
  return (
    <ThemeProvider accent={ACCENT} overrides={THEME}>
      <Store.Provider value={{ books, addPages }}>
        <Stack screens={SCREENS} initial="root" />
      </Store.Provider>
    </ThemeProvider>
  );
}