import { creationOptions, defaultStoryDraft } from "@infiplot/core";
import { SymbolView } from "expo-symbols";
import { useState } from "react";
import { Pressable, ScrollView, 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 className="flex-1 bg-[#09090b]">
      <ScrollView
        className="flex-1"
        keyboardShouldPersistTaps="handled"
        contentContainerStyle={{ paddingBottom: BottomTabInset + 112 }}
      >
        <View className="gap-[18px] p-[18px]">
          <View className="flex-row items-start justify-between gap-[18px] pt-2">
            <View>
              <Text className="mb-2 text-xs font-black text-[#ff4d6d]">
                AI 剧情创作
              </Text>
              <Text className="max-w-[300px] text-[30px] font-black leading-9 text-white">
                写下两段文字，生成可刷的短剧。
              </Text>
            </View>
            <View className="h-[46px] w-[46px] items-center justify-center rounded-full bg-white/10">
              <SymbolView
                name={{
                  ios: "sparkles",
                  android: "auto_awesome",
                  web: "auto_awesome",
                }}
                size={24}
                tintColor="#fff"
              />
            </View>
          </View>

          <View className="gap-2.5">
            <Text className="text-[13px] font-black text-white/70">
              题材模板
            </Text>
            <ChipRow
              options={creationOptions.templates}
              value={template}
              onChange={setTemplate}
            />
          </View>

          <View className="gap-2.5">
            <View className="flex-row items-center justify-between">
              <Text className="text-[13px] font-black text-white/70">
                世界设定
              </Text>
              <Text className="text-xs font-extrabold text-white/40">
                {world.length}
              </Text>
            </View>
            <TextInput
              value={world}
              onChangeText={setWorld}
              multiline
              textAlignVertical="top"
              placeholder="主角、世界、冲突、第一幕钩子..."
              placeholderTextColor="rgba(255,255,255,0.36)"
              className="min-h-[158px] rounded-lg border border-white/10 bg-white/10 p-3.5 text-base font-semibold leading-6 text-white"
            />
          </View>

          <View className="gap-2.5">
            <View className="flex-row items-center justify-between">
              <Text className="text-[13px] font-black text-white/70">
                视觉风格
              </Text>
              <Text className="text-xs font-extrabold text-white/40">
                {style.length}
              </Text>
            </View>
            <TextInput
              value={style}
              onChangeText={setStyle}
              multiline
              textAlignVertical="top"
              placeholder="镜头、色彩、材质、画风、氛围..."
              placeholderTextColor="rgba(255,255,255,0.36)"
              className="min-h-[116px] rounded-lg border border-white/10 bg-white/10 p-3.5 text-base font-semibold leading-6 text-white"
            />
          </View>

          <View className="flex-row gap-3">
            <View className="flex-1 gap-3 rounded-lg bg-white/[0.07] p-3">
              <Text className="text-[13px] font-black text-white/70">
                画面比例
              </Text>
              <ChipRow
                compact
                options={creationOptions.ratios}
                value={ratio}
                onChange={setRatio}
              />
            </View>
            <View className="flex-1 gap-3 rounded-lg bg-white/[0.07] p-3">
              <Text className="text-[13px] font-black text-white/70">
                叙事节奏
              </Text>
              <ChipRow
                compact
                options={creationOptions.rhythms}
                value={rhythm}
                onChange={setRhythm}
              />
            </View>
          </View>

          <View className="gap-3 rounded-lg bg-white/[0.07] p-3.5">
            <Text className="text-[15px] font-black text-white">生成流程</Text>
            <View className="flex-row flex-wrap gap-2.5">
              {["故事圣经", "分镜脚本", "角色视觉", "首集预览"].map(
                (step, index) => (
                  <View
                    key={step}
                    className="min-w-[46%] flex-row items-center gap-2"
                  >
                    <Text className="h-[22px] w-[22px] overflow-hidden rounded-full bg-[#b8ff5d] text-center text-xs font-black leading-[22px] text-[#09090b]">
                      {index + 1}
                    </Text>
                    <Text className="text-[13px] font-extrabold text-white/80">
                      {step}
                    </Text>
                  </View>
                ),
              )}
            </View>
          </View>
        </View>
      </ScrollView>

      <View
        className="absolute bottom-0 left-0 right-0 bg-[#09090b]/95 px-[18px] pt-3"
        style={{ paddingBottom: BottomTabInset + 14 }}
      >
        <Pressable
          disabled={!ready}
          className={`h-[52px] flex-row items-center justify-center gap-2 rounded-full bg-white ${!ready ? "opacity-40" : ""}`}
          style={({ pressed }) => ({
            opacity: pressed && ready ? 0.76 : undefined,
          })}
        >
          <SymbolView
            name={{
              ios: "wand.and.stars",
              android: "auto_fix_high",
              web: "auto_fix_high",
            }}
            size={18}
            tintColor="#050505"
          />
          <Text className="text-base font-black text-[#050505]">
            {ready ? "生成第一集" : "继续补充设定"}
          </Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
}

function ChipRow({
  options,
  value,
  onChange,
  compact,
}: {
  options: readonly string[];
  value: string;
  onChange: (value: string) => void;
  compact?: boolean;
}) {
  return (
    <View className={`flex-row flex-wrap ${compact ? "gap-2" : "gap-2.5"}`}>
      {options.map((option) => {
        const selected = option === value;
        return (
          <Pressable
            key={option}
            onPress={() => onChange(option)}
            className={`items-center justify-center rounded-full border ${
              compact ? "min-h-8 px-2.5" : "min-h-[38px] px-3.5"
            } ${selected ? "border-white bg-white" : "border-white/10 bg-white/10"}`}
            style={({ pressed }) => ({ opacity: pressed ? 0.76 : undefined })}
          >
            <Text
              className={`text-[13px] font-extrabold ${selected ? "text-[#09090b]" : "text-white"}`}
            >
              {option}
            </Text>
          </Pressable>
        );
      })}
    </View>
  );
}
