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

const ACCENT = '#E879F9';
const THEME = { dark: { bg: '#0E0A10', card: '#1A131D', card2: '#271C2B', line: '#2C2030', text2: '#B99CC0', text3: '#765F7C' }, light: { bg: '#FAF2FB', card: '#FFFFFF', card2: '#F2E0F4' } };
const WORK = [
  { id: 1, title: 'Lumen banking', kind: 'Product design', year: '2026', c: ['#581C87', '#E879F9'], emoji: '💳', role: 'Lead designer', blurb: 'A calmer bank. We cut the home screen to one number and one action, and watched support tickets fall by a third.', tags: ['iOS', 'Design system', 'Research'] },
  { id: 2, title: 'Tide identity', kind: 'Branding', year: '2025', c: ['#0F766E', '#5EEAD4'], emoji: '🌊', role: 'Art direction', blurb: 'A wordmark that moves like water and a palette that survives on a dark terminal.', tags: ['Brand', 'Motion'] },
  { id: 3, title: 'Field notes', kind: 'Editorial', year: '2025', c: ['#7C2D12', '#FDBA74'], emoji: '📓', role: 'Design and type', blurb: 'A quarterly print magazine set in two typefaces and a lot of white space.', tags: ['Print', 'Typography'] },
  { id: 4, title: 'Orbit messaging', kind: 'Product design', year: '2024', c: ['#1E3A8A', '#60A5FA'], emoji: '💬', role: 'Senior designer', blurb: 'Threads, reactions and a composer that gets out of the way.', tags: ['iOS', 'Android'] },
  { id: 5, title: 'Sprout packaging', kind: 'Packaging', year: '2024', c: ['#14532D', '#86EFAC'], emoji: '🪴', role: 'Designer', blurb: 'Compostable boxes for a plant subscription, printed with one colour.', tags: ['Packaging', 'Sustainability'] },
];
const CATS = ['All', 'Product design', 'Branding', 'Editorial', 'Packaging'];

function Tile({ w, big, onPress }) {
  const t = useT();
  return (
    <Pressable onPress={onPress} style={({ pressed }) => [{ width: big ? '100%' : '47.5%', flexGrow: 1 }, pressed && { opacity: 0.8 }]}>
      <Gradient colors={w.c} style={{ height: big ? 240 : 170, borderRadius: 22, padding: 16, justifyContent: 'space-between' }}>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}><Pill label={w.year} color="#fff" /><Icon name="ArrowUpRight" size={18} color="#fff" /></View>
        <Text style={{ fontSize: big ? 84 : 52, textAlign: 'center' }}>{w.emoji}</Text>
        <View><Text style={[T.headline, { color: '#fff' }]}>{w.title}</Text><Text style={[T.caption, { color: alpha('#fff', 0.85) }]}>{w.kind}</Text></View>
      </Gradient>
    </Pressable>
  );
}

function WorkScreen({ nav }) {
  const t = useT();
  const [cat, setCat] = useState('All');
  const list = WORK.filter((w) => cat === 'All' || w.kind === cat);
  return (
    <Scroll pad={0}>
      <Header kicker="Maya Kovacs · Designer" title="Work" right={<Avatar name="Maya Kovacs" size={38} color={ACCENT} />} />
      <Scroll horizontal pad={20} contentStyle={{ gap: 8, paddingBottom: 14 }}>
        {CATS.map((c) => <Chip key={c} label={c} active={cat === c} onPress={() => setCat(c)} />)}
      </Scroll>
      <View style={{ paddingHorizontal: 20, gap: 12 }}>
        {list[0] ? <Tile w={list[0]} big onPress={() => nav.push('project', { id: list[0].id })} /> : null}
        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>{list.slice(1).map((w) => <Tile key={w.id} w={w} onPress={() => nav.push('project', { id: w.id })} />)}</View>
      </View>
    </Scroll>
  );
}

function AboutScreen() {
  const t = useT();
  return (
    <Scroll pad={0}>
      <Header kicker="Hello" title="About" />
      <View style={{ paddingHorizontal: 20 }}>
        <Card style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
          <Avatar name="Maya Kovacs" size={72} color={ACCENT} />
          <View style={{ flex: 1 }}><Text style={[T.title2, { color: t.text }]}>Maya Kovacs</Text><Text style={[T.subhead, { color: t.text2 }]}>Product designer in Lisbon. Ten years of making software feel lighter.</Text></View>
        </Card>
        <View style={{ flexDirection: 'row', gap: 12, marginTop: 12 }}>
          <Card style={{ flex: 1 }}><Stat label="Projects" value="38" /></Card>
          <Card style={{ flex: 1 }}><Stat label="Years" value="10" /></Card>
          <Card style={{ flex: 1 }}><Stat label="Awards" value="6" /></Card>
        </View>
        <SectionTitle title="Experience" />
        <Group>
          <Row icon="Briefcase" iconColor={ACCENT} iconBg={alpha(ACCENT, 0.2)} title="Lead designer, Lumen" subtitle="2024 to now" />
          <Row icon="Briefcase" iconColor="#60A5FA" iconBg={alpha('#60A5FA', 0.2)} title="Senior designer, Orbit" subtitle="2021 to 2024" />
          <Row icon="Briefcase" iconColor="#5EEAD4" iconBg={alpha('#5EEAD4', 0.2)} title="Designer, Studio Tide" subtitle="2017 to 2021" />
        </Group>
        <SectionTitle title="Skills" />
        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>{['Product design', 'Design systems', 'Prototyping', 'Research', 'Motion', 'Typography', 'React Native'].map((s) => <Chip key={s} label={s} onPress={() => {}} />)}</View>
      </View>
    </Scroll>
  );
}

function ContactScreen() {
  const t = useT();
  return (
    <Scroll pad={0}>
      <Header kicker="Say hi" title="Contact" />
      <View style={{ paddingHorizontal: 20 }}>
        <Card pad={0} style={{ overflow: 'hidden' }}>
          <Gradient colors={['#581C87', '#E879F9']} style={{ padding: 20 }}>
            <Text style={[T.title2, { color: '#fff' }]}>Open to new projects from July</Text>
            <Text style={[T.footnote, { color: alpha('#fff', 0.85), marginTop: 6 }]}>Product design, design systems and the occasional brand.</Text>
            <Button label="Book an intro call" icon="Calendar" color="#fff" style={{ alignSelf: 'flex-start', marginTop: 14 }} onPress={() => {}} />
          </Gradient>
        </Card>
        <SectionTitle title="Elsewhere" />
        <Group>
          <Row icon="Mail" title="hello@maya.design" chevron onPress={() => {}} />
          <Row icon="Globe" title="maya.design" chevron onPress={() => {}} />
          <Row icon="AtSign" title="@mayakovacs" chevron onPress={() => {}} />
          <Row icon="FileText" title="Download CV" value="PDF · 1.2 MB" chevron onPress={() => {}} />
        </Group>
      </View>
    </Scroll>
  );
}

function Project({ nav, params }) {
  const t = useT();
  const w = WORK.find((x) => x.id === params.id) || WORK[0];
  const next = WORK[(WORK.indexOf(w) + 1) % WORK.length];
  return (
    <Screen>
      <Scroll pad={0}>
        <Gradient colors={w.c} style={{ paddingBottom: 30 }}>
          <NavBar title="" onBack={nav.pop} transparent tint="#fff" right={<Icon name="Share2" size={20} color="#fff" />} />
          <Text style={{ fontSize: 120, textAlign: 'center' }}>{w.emoji}</Text>
        </Gradient>
        <View style={{ paddingHorizontal: 20, paddingTop: 18 }}>
          <View style={{ flexDirection: 'row', gap: 8 }}><Pill label={w.kind} color={w.c[1]} /><Pill label={w.year} color={t.text2} /></View>
          <Text style={[T.largeTitle, { color: t.text, marginTop: 10 }]}>{w.title}</Text>
          <Text style={[T.subhead, { color: t.text2 }]}>{w.role}</Text>
          <Text style={[T.body, { color: t.text, marginTop: 14, lineHeight: 26 }]}>{w.blurb}</Text>
          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>{w.tags.map((x) => <Chip key={x} label={x} onPress={() => {}} />)}</View>
          <SectionTitle title="Gallery" />
          <View style={{ flexDirection: 'row', gap: 10 }}>
            {[0, 1, 2].map((i) => <View key={i} style={{ flex: 1, height: 120, borderRadius: 16, backgroundColor: alpha(w.c[1], 0.3 - i * 0.07), alignItems: 'center', justifyContent: 'center' }}><Icon name="Image" size={24} color={w.c[1]} /></View>)}
          </View>
          <SectionTitle title="Outcome" />
          <View style={{ flexDirection: 'row', gap: 12 }}>
            <Card style={{ flex: 1 }}><Stat label="Support tickets" value="-32%" color={t.success} /></Card>
            <Card style={{ flex: 1 }}><Stat label="App rating" value="4.8" /></Card>
          </View>
          <SectionTitle title="Next project" />
          <Tile w={next} big onPress={() => nav.push('project', { id: next.id })} />
          <Spacer h={10} />
        </View>
      </Scroll>
    </Screen>
  );
}

function Root({ nav }) {
  const [tab, setTab] = useState('work');
  return (
    <Screen>
      <Tabs active={tab} screens={{ work: <WorkScreen nav={nav} />, about: <AboutScreen />, contact: <ContactScreen /> }} />
      <TabBar active={tab} onChange={setTab} tabs={[
        { key: 'work', label: 'Work', icon: 'LayoutGrid' },
        { key: 'about', label: 'About', icon: 'User' },
        { key: 'contact', label: 'Contact', icon: 'Mail' },
      ]} />
    </Screen>
  );
}
const SCREENS = { root: Root, project: Project };

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