import { creationOptions, defaultStoryDraft } from '@infiplot/core';
import { SymbolView } from 'expo-symbols';
import { useState } from 'react';
import {
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { BottomTabInset } from '@/constants/theme';

export default function CreateScreen() {
  const [world, setWorld] = useState(defaultStoryDraft.worldSetting);
  const [style, setStyle] = useState(defaultStoryDraft.styleGuide);
  const [template, setTemplate] = useState(creationOptions.templates[1]);
  const [ratio, setRatio] = useState(creationOptions.ratios[0]);
  const [rhythm, setRhythm] = useState(creationOptions.rhythms[0]);

  const ready = world.trim().length > 10 && style.trim().length > 5;

  return (
    <SafeAreaView style={styles.safe}>
      <ScrollView
        style={styles.scroll}
        keyboardShouldPersistTaps="handled"
        contentContainerStyle={styles.content}>
        <View style={styles.header}>
          <View>
            <Text style={styles.eyebrow}>AI 剧情创作</Text>
            <Text style={styles.title}>写下两段文字，生成可刷的短剧。</Text>
          </View>
          <View style={styles.headerIcon}>
            <SymbolView name={{ ios: 'sparkles', android: 'auto_awesome', web: 'auto_awesome' }} size={24} tintColor="#fff" />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.label}>题材模板</Text>
          <ChipRow options={creationOptions.templates} value={template} onChange={setTemplate} />
        </View>

        <View style={styles.fieldBlock}>
          <View style={styles.fieldHeader}>
            <Text style={styles.label}>世界设定</Text>
            <Text style={styles.counter}>{world.length}</Text>
          </View>
          <TextInput
            value={world}
            onChangeText={setWorld}
            multiline
            textAlignVertical="top"
            placeholder="主角、世界、冲突、第一幕钩子..."
            placeholderTextColor="rgba(255,255,255,0.36)"
            style={styles.textArea}
          />
        </View>

        <View style={styles.fieldBlock}>
          <View style={styles.fieldHeader}>
            <Text style={styles.label}>视觉风格</Text>
            <Text style={styles.counter}>{style.length}</Text>
          </View>
          <TextInput
            value={style}
            onChangeText={setStyle}
            multiline
            textAlignVertical="top"
            placeholder="镜头、色彩、材质、画风、氛围..."
            placeholderTextColor="rgba(255,255,255,0.36)"
            style={[styles.textArea, styles.shortArea]}
          />
        </View>

        <View style={styles.twoColumns}>
          <View style={styles.optionCard}>
            <Text style={styles.label}>画面比例</Text>
            <ChipRow compact options={creationOptions.ratios} value={ratio} onChange={setRatio} />
          </View>
          <View style={styles.optionCard}>
            <Text style={styles.label}>叙事节奏</Text>
            <ChipRow compact options={creationOptions.rhythms} value={rhythm} onChange={setRhythm} />
          </View>
        </View>

        <View style={styles.previewCard}>
          <Text style={styles.previewTitle}>生成流程</Text>
          <View style={styles.steps}>
            {['故事圣经', '分镜脚本', '角色视觉', '首集预览'].map((step, index) => (
              <View key={step} style={styles.step}>
                <Text style={styles.stepIndex}>{index + 1}</Text>
                <Text style={styles.stepText}>{step}</Text>
              </View>
            ))}
          </View>
        </View>
      </ScrollView>

      <View style={styles.footer}>
        <Pressable
          disabled={!ready}
          style={({ pressed }) => [
            styles.generateButton,
            !ready && styles.disabledButton,
            pressed && ready && styles.pressed,
          ]}>
          <SymbolView name={{ ios: 'wand.and.stars', android: 'auto_fix_high', web: 'auto_fix_high' }} size={18} tintColor="#050505" />
          <Text style={styles.generateText}>{ready ? '生成第一集' : '继续补充设定'}</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
}

function ChipRow({
  options,
  value,
  onChange,
  compact,
}: {
  options: readonly string[];
  value: string;
  onChange: (value: string) => void;
  compact?: boolean;
}) {
  return (
    <View style={[styles.chips, compact && styles.compactChips]}>
      {options.map((option) => {
        const selected = option === value;
        return (
          <Pressable
            key={option}
            onPress={() => onChange(option)}
            style={({ pressed }) => [
              styles.chip,
              compact && styles.compactChip,
              selected && styles.selectedChip,
              pressed && styles.pressed,
            ]}>
            <Text style={[styles.chipText, selected && styles.selectedChipText]}>{option}</Text>
          </Pressable>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  safe: {
    flex: 1,
    backgroundColor: '#09090b',
  },
  scroll: {
    flex: 1,
  },
  content: {
    padding: 18,
    paddingBottom: BottomTabInset + 112,
    gap: 18,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    gap: 18,
    paddingTop: 8,
  },
  eyebrow: {
    color: '#ff4d6d',
    fontSize: 12,
    fontWeight: '900',
    marginBottom: 8,
  },
  title: {
    color: '#fff',
    fontSize: 30,
    lineHeight: 36,
    fontWeight: '900',
    maxWidth: 300,
  },
  headerIcon: {
    width: 46,
    height: 46,
    borderRadius: 23,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255,255,255,0.12)',
  },
  section: {
    gap: 10,
  },
  label: {
    color: 'rgba(255,255,255,0.7)',
    fontSize: 13,
    fontWeight: '900',
  },
  chips: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
  },
  compactChips: {
    gap: 8,
  },
  chip: {
    minHeight: 38,
    borderRadius: 19,
    paddingHorizontal: 14,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255,255,255,0.09)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
  },
  compactChip: {
    minHeight: 32,
    paddingHorizontal: 10,
  },
  selectedChip: {
    backgroundColor: '#fff',
    borderColor: '#fff',
  },
  chipText: {
    color: '#fff',
    fontSize: 13,
    fontWeight: '800',
  },
  selectedChipText: {
    color: '#09090b',
  },
  fieldBlock: {
    gap: 10,
  },
  fieldHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  counter: {
    color: 'rgba(255,255,255,0.42)',
    fontSize: 12,
    fontWeight: '800',
  },
  textArea: {
    minHeight: 158,
    borderRadius: 8,
    padding: 14,
    color: '#fff',
    fontSize: 16,
    lineHeight: 24,
    fontWeight: '600',
    backgroundColor: 'rgba(255,255,255,0.08)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.1)',
  },
  shortArea: {
    minHeight: 116,
  },
  twoColumns: {
    flexDirection: 'row',
    gap: 12,
  },
  optionCard: {
    flex: 1,
    gap: 12,
    borderRadius: 8,
    padding: 12,
    backgroundColor: 'rgba(255,255,255,0.07)',
  },
  previewCard: {
    borderRadius: 8,
    padding: 14,
    gap: 12,
    backgroundColor: 'rgba(255,255,255,0.07)',
  },
  previewTitle: {
    color: '#fff',
    fontSize: 15,
    fontWeight: '900',
  },
  steps: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
  },
  step: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    minWidth: '46%',
  },
  stepIndex: {
    width: 22,
    height: 22,
    borderRadius: 11,
    overflow: 'hidden',
    textAlign: 'center',
    lineHeight: 22,
    color: '#09090b',
    backgroundColor: '#b8ff5d',
    fontSize: 12,
    fontWeight: '900',
  },
  stepText: {
    color: 'rgba(255,255,255,0.82)',
    fontSize: 13,
    fontWeight: '800',
  },
  footer: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    paddingHorizontal: 18,
    paddingTop: 12,
    paddingBottom: BottomTabInset + 14,
    backgroundColor: 'rgba(9,9,11,0.96)',
  },
  generateButton: {
    height: 52,
    borderRadius: 26,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    backgroundColor: '#fff',
  },
  disabledButton: {
    opacity: 0.42,
  },
  generateText: {
    color: '#050505',
    fontSize: 16,
    fontWeight: '900',
  },
  pressed: {
    opacity: 0.76,
  },
});
