import React, { useState } 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, Spark, Bars, Progress, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, alpha } from './ui/kit';

const ACCENT = '#4ADE80';
const THEME = { dark: { bg: '#07090B', card: '#111518', card2: '#1A2126', line: '#1E262B', text2: '#95A3AC', text3: '#5A6871' }, light: { bg: '#F1F5F3', card: '#FFFFFF', card2: '#E1E9E4' } };
const IDX = [{ n: 'S&P 500', v: '5,308', c: 0.6 }, { n: 'NASDAQ', v: '16,742', c: 1.1 }, { n: 'DOW', v: '39,806', c: -0.2 }, { n: 'VIX', v: '12.4', c: -3.4 }];
const ST = [
  { sym: 'AAPL', name: 'Apple', px: 189.84, chg: 1.24, s: [182, 184, 183, 186, 185, 187, 188, 189, 190, 189.8], shares: 24 },
  { sym: 'NVDA', name: 'NVIDIA', px: 924.79, chg: 3.6, s: [860, 870, 880, 875, 890, 905, 900, 915, 920, 924.8], shares: 4 },
  { sym: 'TSLA', name: 'Tesla', px: 177.58, chg: -2.1, s: [185, 183, 184, 181, 182, 180, 179, 178, 178.5, 177.6], shares: 10 },
  { sym: 'MSFT', name: 'Microsoft', px: 420.21, chg: 0.8, s: [410, 412, 415, 413, 416, 418, 417, 419, 420, 420.2], shares: 8 },
  { sym: 'AMZN', name: 'Amazon', px: 184.7, chg: 0.3, s: [180, 182, 181, 183, 184, 183, 185, 184, 184.5, 184.7], shares: 12 },
  { sym: 'DIS', name: 'Disney', px: 102.9, chg: -1.4, s: [108, 107, 106, 106.5, 105, 104, 104.5, 103, 103.2, 102.9], shares: 15 },
];
const NEWS = [
  { h: 'Chipmakers rally as AI demand outpaces supply forecasts', s: 'Markets · 2h', c: '#A78BFA' },
  { h: 'Fed minutes point to patience on rate cuts', s: 'Economy · 4h', c: '#38BDF8' },
  { h: 'Apple previews on-device models ahead of developer week', s: 'Tech · 6h', c: '#4ADE80' },
];
const usd = (n) => '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

function SymbolTile({ sym, color }) {
  const t = useT();
  return <View style={{ width: 40, height: 40, borderRadius: 12, backgroundColor: color || t.card2, alignItems: 'center', justifyContent: 'center' }}><Text style={[T.caption2, { color: t.text, fontWeight: '800' }]}>{sym}</Text></View>;
}

function WatchlistScreen({ nav }) {
  const t = useT();
  return (
    <Scroll pad={0}>
      <Header kicker="Markets open · 14:32" title="Watchlist" right={<Icon name="Search" size={24} />} />
      <Scroll horizontal pad={20} contentStyle={{ gap: 10 }}>
        {IDX.map((i) => (
          <Card key={i.n} pad={12} style={{ width: 128 }}>
            <Text style={[T.caption, { color: t.text2 }]}>{i.n}</Text>
            <Text style={[T.headline, T.num, { color: t.text, marginTop: 2 }]}>{i.v}</Text>
            <Text style={[T.caption, T.num, { color: i.c >= 0 ? t.success : t.danger, fontWeight: '700' }]}>{(i.c >= 0 ? '+' : '') + i.c}%</Text>
          </Card>
        ))}
      </Scroll>
      <View style={{ paddingHorizontal: 20 }}>
        <SectionTitle title="Following" action="Edit" onAction={() => {}} />
        <Group>
          {ST.map((s) => (
            <Row key={s.sym} leading={<SymbolTile sym={s.sym} />} title={s.name} subtitle={s.sym + ' · NASDAQ'} right={<View style={{ width: 64 }}><Spark values={s.s} height={28} color={s.chg >= 0 ? t.success : t.danger} dot={false} fill={false} stroke={2} /></View>} value={usd(s.px)} sub2={(s.chg >= 0 ? '+' : '') + s.chg + '%'} onPress={() => nav.push('stock', { sym: s.sym })} />
          ))}
        </Group>
      </View>
    </Scroll>
  );
}

function PortfolioScreen({ nav }) {
  const t = useT();
  const total = ST.reduce((a, s) => a + s.px * s.shares, 0);
  return (
    <Scroll pad={0}>
      <Header kicker="Portfolio value" title={'$' + Math.round(total).toLocaleString('en-US')} right={<Pill label="+1.9% today" color={t.success} />} />
      <View style={{ paddingHorizontal: 20 }}>
        <Card>
          <View style={{ flexDirection: 'row' }}>
            <Stat label="Day change" value="+$402" delta="+1.9%" />
            <Stat label="Total return" value="+$3,120" delta="+18.4%" />
            <Stat label="Cash" value="$1,280" />
          </View>
          <Spark values={[15.2, 15.6, 15.4, 16.1, 16.4, 16.0, 16.8, 17.3, 17.1, 17.6, 18.0, 18.4]} height={100} style={{ marginTop: 12 }} />
        </Card>
        <SectionTitle title="Allocation" />
        <Card>
          {ST.slice(0, 4).map((s) => {
            const v = s.px * s.shares;
            return (
              <View key={s.sym} style={{ marginBottom: 12 }}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}><Text style={[T.subhead, { color: t.text, fontWeight: '600' }]}>{s.sym}</Text><Text style={[T.subhead, T.num, { color: t.text2 }]}>{Math.round((v / total) * 100)}% · {usd(v)}</Text></View>
                <Progress value={v / total} style={{ marginTop: 6 }} color={['#4ADE80', '#A78BFA', '#38BDF8', '#FFB340'][ST.indexOf(s)]} />
              </View>
            );
          })}
        </Card>
        <SectionTitle title="Positions" />
        <Group>
          {ST.map((s) => <Row key={s.sym} leading={<SymbolTile sym={s.sym} />} title={s.name} subtitle={s.shares + ' shares'} value={usd(s.px * s.shares)} sub2={(s.chg >= 0 ? '+' : '') + s.chg + '%'} onPress={() => nav.push('stock', { sym: s.sym })} />)}
        </Group>
      </View>
    </Scroll>
  );
}

function NewsScreen() {
  const t = useT();
  return (
    <Scroll pad={0}>
      <Header kicker="Today" title="News" />
      <View style={{ paddingHorizontal: 20, gap: 12 }}>
        {NEWS.map((n, i) => (
          <Card key={i} onPress={() => {}}>
            <View style={{ flexDirection: 'row', gap: 14 }}>
              <View style={{ width: 72, height: 72, borderRadius: 14, backgroundColor: alpha(n.c, 0.22), alignItems: 'center', justifyContent: 'center' }}><Icon name="Newspaper" size={28} color={n.c} /></View>
              <View style={{ flex: 1 }}>
                <Text style={[T.headline, { color: t.text }]}>{n.h}</Text>
                <Text style={[T.footnote, { color: t.text2, marginTop: 6 }]}>{n.s}</Text>
              </View>
            </View>
          </Card>
        ))}
        <SectionTitle title="Earnings this week" style={{ marginTop: 10 }} />
        <Group>
          <Row leading={<SymbolTile sym="NVDA" />} title="NVIDIA" subtitle="Wed, after close" right={<Pill label="Est. $5.59" color={t.text2} small />} />
          <Row leading={<SymbolTile sym="DIS" />} title="Disney" subtitle="Thu, before open" right={<Pill label="Est. $1.10" color={t.text2} small />} />
        </Group>
      </View>
    </Scroll>
  );
}

function StockDetail({ nav, params }) {
  const t = useT();
  const s = ST.find((x) => x.sym === params.sym) || ST[0];
  const [range, setRange] = useState('1M');
  const up = s.chg >= 0;
  return (
    <Screen>
      <NavBar title={s.sym} onBack={nav.pop} right={<Icon name="Star" size={20} />} />
      <Scroll pad={20}>
        <Text style={[T.subhead, { color: t.text2 }]}>{s.name}</Text>
        <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 10 }}>
          <Text style={[T.largeTitle, T.num, { color: t.text }]}>{usd(s.px)}</Text>
          <Text style={[T.headline, T.num, { color: up ? t.success : t.danger }]}>{(up ? '+' : '') + s.chg}%</Text>
        </View>
        <Card style={{ marginTop: 14 }}>
          <Spark values={s.s} height={160} color={up ? t.success : t.danger} />
          <Segmented options={['1D', '1W', '1M', '1Y', 'All']} value={range} onChange={setRange} style={{ marginTop: 14 }} />
        </Card>
        <SectionTitle title="Key stats" />
        <Card>
          <View style={{ flexDirection: 'row' }}><Stat label="Open" value={usd(s.s[0])} /><Stat label="High" value={usd(Math.max(...s.s))} /><Stat label="Low" value={usd(Math.min(...s.s))} /></View>
          <Spacer h={14} />
          <View style={{ flexDirection: 'row' }}><Stat label="P/E" value="29.4" /><Stat label="Mkt cap" value="2.9T" /><Stat label="Div yield" value="0.5%" /></View>
        </Card>
        <SectionTitle title="Your position" />
        <Group>
          <Row title="Shares" value={String(s.shares)} />
          <Row title="Market value" value={usd(s.px * s.shares)} />
          <Row title="Average cost" value={usd(s.px * 0.86)} />
          <Row title="Total return" value={'+' + usd(s.px * s.shares * 0.14)} valueColor={t.success} />
        </Group>
        <Spacer h={16} />
        <View style={{ flexDirection: 'row', gap: 10 }}>
          <View style={{ flex: 1 }}><Button label="Buy" full onPress={() => {}} /></View>
          <View style={{ flex: 1 }}><Button label="Sell" kind="secondary" full onPress={() => {}} /></View>
        </View>
      </Scroll>
    </Screen>
  );
}

function Root({ nav }) {
  const [tab, setTab] = useState('watch');
  return (
    <Screen>
      <Tabs active={tab} screens={{ watch: <WatchlistScreen nav={nav} />, portfolio: <PortfolioScreen nav={nav} />, news: <NewsScreen /> }} />
      <TabBar active={tab} onChange={setTab} tabs={[
        { key: 'watch', label: 'Watchlist', icon: 'Eye' },
        { key: 'portfolio', label: 'Portfolio', icon: 'ChartPie' },
        { key: 'news', label: 'News', icon: 'Newspaper' },
      ]} />
    </Screen>
  );
}
const SCREENS = { root: Root, stock: StockDetail };

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