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

const ACCENT = '#F59E42';
const THEME = { dark: { bg: '#110C07', card: '#1C1510', card2: '#2A2017', line: '#2F241B', text2: '#B5A08C', text3: '#766457' }, light: { bg: '#FBF4EC', card: '#FFFFFF', card2: '#F3E4D4' } };
const PETS = [
  { id: 1, name: 'Biscuit', kind: 'Golden retriever', age: '3 yrs', emoji: '🐕', c: '#F59E42', weight: 29.4, next: 'Vaccination · 2 Jun' },
  { id: 2, name: 'Miso', kind: 'British shorthair', age: '5 yrs', emoji: '🐈', c: '#8E8E93', weight: 4.8, next: 'Dental check · 14 Jun' },
];
const TASKS_INIT = [
  { id: 1, pet: 1, title: 'Morning walk', time: '07:30', icon: 'Footprints', done: true },
  { id: 2, pet: 1, title: 'Breakfast · 180 g', time: '08:00', icon: 'Bone', done: true },
  { id: 3, pet: 2, title: 'Breakfast · 55 g', time: '08:00', icon: 'Fish', done: true },
  { id: 4, pet: 1, title: 'Flea treatment', time: '12:00', icon: 'Pill', done: false },
  { id: 5, pet: 1, title: 'Evening walk', time: '18:30', icon: 'Footprints', done: false },
  { id: 6, pet: 2, title: 'Playtime · 15 min', time: '19:00', icon: 'Puzzle', done: false },
  { id: 7, pet: 2, title: 'Dinner · 55 g', time: '19:30', icon: 'Fish', done: false },
];
const Store = createContext(null);
const petOf = (id) => PETS.find((p) => p.id === id);

function TodayScreen({ nav }) {
  const t = useT();
  const { tasks, toggle } = useContext(Store);
  const n = tasks.filter((x) => x.done).length;
  return (
    <Scroll pad={0}>
      <Header kicker="Tuesday" title="Good morning" right={<Ring progress={n / tasks.length} size={44} stroke={5}><Text style={[T.caption2, T.num, { color: t.text }]}>{n}/{tasks.length}</Text></Ring>} />
      <Scroll horizontal pad={20} contentStyle={{ gap: 12, paddingBottom: 6 }}>
        {PETS.map((p) => (
          <Card key={p.id} pad={0} style={{ width: 230, overflow: 'hidden' }} onPress={() => nav.push('pet', { id: p.id })}>
            <Gradient colors={[p.c, alpha(p.c, 0.45)]} style={{ padding: 16, height: 150, justifyContent: 'space-between' }}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}><Pill label={p.age} color="#fff" /><Text style={{ fontSize: 48 }}>{p.emoji}</Text></View>
              <View><Text style={[T.title2, { color: '#fff' }]}>{p.name}</Text><Text style={[T.footnote, { color: alpha('#fff', 0.85) }]}>{p.kind} · {p.weight} kg</Text></View>
            </Gradient>
            <View style={{ padding: 12, flexDirection: 'row', alignItems: 'center', gap: 8 }}><Icon name="Calendar" size={14} color={t.text2} /><Text style={[T.caption, { color: t.text2 }]}>{p.next}</Text></View>
          </Card>
        ))}
        <Pressable style={{ width: 110, borderRadius: 20, borderWidth: 1, borderStyle: 'dashed', borderColor: t.line, alignItems: 'center', justifyContent: 'center' }}><Icon name="Plus" size={22} color={t.text3} /><Text style={[T.caption, { color: t.text3, marginTop: 6 }]}>Add pet</Text></Pressable>
      </Scroll>
      <View style={{ paddingHorizontal: 20 }}>
        <SectionTitle title="Today's care" />
        <Group>
          {tasks.map((x) => { const p = petOf(x.pet); return <Row key={x.id} icon={x.icon} iconColor={p.c} iconBg={alpha(p.c, 0.2)} title={x.title} subtitle={p.name + ' · ' + x.time} titleStyle={x.done ? { color: t.text3, textDecorationLine: 'line-through' } : null} right={<Checkbox checked={x.done} color={p.c} onChange={() => toggle(x.id)} />} onPress={() => toggle(x.id)} />; })}
        </Group>
      </View>
    </Scroll>
  );
}

function HealthScreen({ nav }) {
  const t = useT();
  const [pet, setPet] = useState(1);
  const p = petOf(pet);
  return (
    <Scroll pad={0}>
      <Header kicker="Records" title="Health" />
      <View style={{ paddingHorizontal: 20 }}>
        <Segmented options={PETS.map((x) => ({ label: x.emoji + ' ' + x.name, value: x.id }))} value={pet} onChange={setPet} />
        <Card style={{ marginTop: 16 }}>
          <View style={{ flexDirection: 'row' }}><Stat label="Weight" value={p.weight + ' kg'} delta={pet === 1 ? '+0.4 kg' : 'Stable'} up={pet !== 1} /><Stat label="Activity" value={pet === 1 ? '1h 40m' : '35 min'} /><Stat label="Sleep" value={pet === 1 ? '13h' : '16h'} /></View>
          <Spacer h={14} />
          <Bars values={pet === 1 ? [90, 110, 80, 120, 100, 150, 100] : [30, 40, 25, 45, 30, 50, 35]} labels={['M', 'T', 'W', 'T', 'F', 'S', 'S']} height={90} color={p.c} highlight={1} />
        </Card>
        <SectionTitle title="Upcoming" />
        <Group>
          <Row icon="Syringe" iconColor="#38BDF8" iconBg={alpha('#38BDF8', 0.2)} title={pet === 1 ? 'Annual vaccination' : 'Dental check'} subtitle={p.next.split(' · ')[1] + ' · Dr Costa'} right={<Pill label="Booked" color={t.success} small />} chevron onPress={() => nav.push('visit', { id: pet })} />
          <Row icon="Pill" iconColor="#A78BFA" iconBg={alpha('#A78BFA', 0.2)} title="Flea and tick" subtitle="Every 4 weeks · next 12 Jun" chevron onPress={() => {}} />
          <Row icon="Scissors" iconColor={ACCENT} iconBg={alpha(ACCENT, 0.2)} title="Grooming" subtitle="Every 6 weeks · next 20 Jun" chevron onPress={() => {}} />
        </Group>
        <SectionTitle title="History" />
        <Group>
          <Row icon="Stethoscope" title="Check-up" subtitle="12 Mar · all good, slightly overweight" value="€45" />
          <Row icon="Syringe" title="Rabies booster" subtitle="2 Jun 2025" value="€38" />
        </Group>
      </View>
    </Scroll>
  );
}

function ShopScreen() {
  const t = useT();
  const items = [['Dry food 12 kg', 'Repeats monthly', 'Bone', '€58', ACCENT], ['Flea treatment ×3', 'Repeats quarterly', 'Pill', '€34', '#A78BFA'], ['Cat litter 10 L', 'Repeats monthly', 'Box', '€16', '#8E8E93'], ['Dental chews', 'Order again', 'Smile', '€9', '#38BDF8']];
  return (
    <Scroll pad={0}>
      <Header kicker="Supplies" title="Shop" right={<Icon name="ShoppingBag" size={24} />} />
      <View style={{ paddingHorizontal: 20 }}>
        <Card style={{ flexDirection: 'row', alignItems: 'center', gap: 14 }}>
          <View style={{ width: 48, height: 48, borderRadius: 16, backgroundColor: alpha(t.success, 0.2), alignItems: 'center', justifyContent: 'center' }}><Icon name="Truck" size={22} color={t.success} /></View>
          <View style={{ flex: 1 }}><Text style={[T.headline, { color: t.text }]}>Next delivery Thursday</Text><Text style={[T.footnote, { color: t.text2 }]}>Dry food and litter · €74</Text></View>
          <Button label="Edit" small kind="secondary" onPress={() => {}} />
        </Card>
        <SectionTitle title="Subscriptions" />
        <Group>
          {items.map((x) => <Row key={x[0]} icon={x[2]} iconColor={x[4]} iconBg={alpha(x[4], 0.2)} title={x[0]} subtitle={x[1]} value={x[3]} chevron onPress={() => {}} />)}
        </Group>
      </View>
    </Scroll>
  );
}

function PetDetail({ nav, params }) {
  const t = useT();
  const p = petOf(params.id) || PETS[0];
  return (
    <Screen>
      <Scroll pad={0}>
        <Gradient colors={[p.c, alpha(p.c, 0.5)]} style={{ paddingBottom: 26 }}>
          <NavBar title="" onBack={nav.pop} transparent tint="#fff" right={<Icon name="Pencil" size={20} color="#fff" />} />
          <Text style={{ fontSize: 120, textAlign: 'center' }}>{p.emoji}</Text>
        </Gradient>
        <View style={{ paddingHorizontal: 20, paddingTop: 18 }}>
          <Text style={[T.largeTitle, { color: t.text }]}>{p.name}</Text>
          <Text style={[T.subhead, { color: t.text2 }]}>{p.kind} · {p.age}</Text>
          <View style={{ flexDirection: 'row', gap: 12, marginTop: 16 }}>
            <Card style={{ flex: 1 }}><Stat label="Weight" value={p.weight + ' kg'} /></Card>
            <Card style={{ flex: 1 }}><Stat label="Microchip" value="Yes" color={t.success} /></Card>
            <Card style={{ flex: 1 }}><Stat label="Insured" value="Yes" color={t.success} /></Card>
          </View>
          <SectionTitle title="Details" />
          <Group>
            <Row icon="Cake" title="Birthday" value="14 Mar 2023" />
            <Row icon="Bone" title="Food" value={p.id === 1 ? '180 g twice a day' : '55 g twice a day'} />
            <Row icon="Stethoscope" title="Vet" value="Dr Costa" chevron onPress={() => {}} />
            <Row icon="Phone" title="Emergency" value="+351 21 …" chevron onPress={() => {}} />
          </Group>
          <Spacer h={16} />
          <Button label="Share profile with sitter" icon="Share2" color={p.c} full onPress={() => {}} />
        </View>
      </Scroll>
    </Screen>
  );
}

function Visit({ nav, params }) {
  const t = useT();
  const p = petOf(params.id) || PETS[0];
  return (
    <Screen>
      <NavBar title="Appointment" onBack={nav.pop} />
      <Scroll pad={20}>
        <Card style={{ alignItems: 'center', paddingVertical: 24 }}>
          <Text style={{ fontSize: 56 }}>{p.emoji}</Text>
          <Text style={[T.title2, { color: t.text, marginTop: 10 }]}>{p.next.split(' · ')[0]}</Text>
          <Text style={[T.subhead, { color: t.text2 }]}>{p.next.split(' · ')[1]} · 10:30 · Dr Costa</Text>
        </Card>
        <Group style={{ marginTop: 12 }}>
          <Row icon="MapPin" title="Clínica Veterinária Belém" subtitle="12 min by car" chevron onPress={() => {}} />
          <Row icon="Bell" title="Reminder" value="Day before" chevron onPress={() => {}} />
          <Row icon="FileText" title="Bring" subtitle="Vaccination booklet, insurance card" />
        </Group>
        <Spacer h={16} />
        <View style={{ flexDirection: 'row', gap: 10 }}><View style={{ flex: 1 }}><Button label="Reschedule" kind="secondary" full onPress={() => {}} /></View><View style={{ flex: 1 }}><Button label="Directions" icon="Navigation" full onPress={() => {}} /></View></View>
      </Scroll>
    </Screen>
  );
}

function Root({ nav }) {
  const [tab, setTab] = useState('today');
  return (
    <Screen>
      <Tabs active={tab} screens={{ today: <TodayScreen nav={nav} />, health: <HealthScreen nav={nav} />, shop: <ShopScreen /> }} />
      <TabBar active={tab} onChange={setTab} tabs={[
        { key: 'today', label: 'Today', icon: 'PawPrint' },
        { key: 'health', label: 'Health', icon: 'HeartPulse' },
        { key: 'shop', label: 'Shop', icon: 'ShoppingBag' },
      ]} />
    </Screen>
  );
}
const SCREENS = { root: Root, pet: PetDetail, visit: Visit };

export default function App() {
  const [tasks, setTasks] = useState(TASKS_INIT);
  const toggle = (id) => setTasks((xs) => xs.map((x) => (x.id === id ? Object.assign({}, x, { done: !x.done }) : x)));
  return (
    <ThemeProvider accent={ACCENT} overrides={THEME}>
      <Store.Provider value={{ tasks, toggle }}>
        <Stack screens={SCREENS} initial="root" />
      </Store.Provider>
    </ThemeProvider>
  );
}