import { useState } from "react";
import { Pressable, ScrollView, TextInput, View } from "react-native";
import type { FilterGroup } from "@sheikbras/domain";
import { Chip, FONT, Icon, T, colors } from "@sheikbras/ui-native";

/** Desenha o modelo de filtros do domínio como lista recolhível (folha de filtros). */
export function FilterList({ groups, onChange }: { groups: FilterGroup[]; onChange: (field: string, value: string, checked: boolean) => void }) {
  const [closed, setClosed] = useState<Record<string, boolean>>({});
  return (
    <ScrollView style={{ maxHeight: 520 }} showsVerticalScrollIndicator={false}>
      {groups.map((g) => (
        <View key={g.id} style={{ borderBottomWidth: 1, borderBottomColor: colors.border }}>
          <Pressable accessibilityRole="button" accessibilityState={{ expanded: !closed[g.id] }} onPress={() => setClosed({ ...closed, [g.id]: !closed[g.id] })} style={{ minHeight: 52, flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
            <T v="body" w={600} style={{ fontSize: 15 }}>{g.title}</T><T v="h3" color={colors.muted}>{closed[g.id] ? "+" : "−"}</T>
          </Pressable>
          {closed[g.id] ? null : g.type === "price" ? (
            <View style={{ gap: 10, paddingBottom: 14 }}>
              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                {(["pmin", "pmax"] as const).map((f) => (
                  <TextInput key={f + String(g[f])} keyboardType="number-pad" placeholder={f === "pmin" ? "Mín." : "Máx."} placeholderTextColor={colors.muted} defaultValue={g[f] == null ? "" : String(g[f])} accessibilityLabel={f === "pmin" ? "Preço mínimo" : "Preço máximo"}
                    onEndEditing={(e) => onChange(f, e.nativeEvent.text, true)} style={{ flex: 1, minHeight: 44, borderWidth: 1, borderColor: colors.border, borderRadius: 8, paddingHorizontal: 12, fontFamily: FONT[400], fontSize: 15, color: colors.text }} />
                ))}
              </View>
              <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>{g.ranges.map((r) => <Chip key={r.value} label={r.label} on={r.on} onPress={() => onChange("price", r.value, true)} />)}</View>
            </View>
          ) : (
            <View style={{ paddingBottom: 10 }}>
              {g.options.map((o) => (
                <Pressable key={o.field + o.value} accessibilityRole={g.type === "radio" ? "radio" : "checkbox"} accessibilityState={{ checked: o.checked }} onPress={() => onChange(o.field, o.value, g.type === "radio" ? true : !o.checked)} style={{ minHeight: 44, flexDirection: "row", alignItems: "center", gap: 12 }}>
                  <View style={{ width: 22, height: 22, borderRadius: g.type === "radio" ? 11 : 6, borderWidth: 1.5, borderColor: o.checked ? colors.primary : colors.border, backgroundColor: o.checked && g.type !== "radio" ? colors.primary : colors.surface, alignItems: "center", justifyContent: "center" }}>
                    {o.checked ? g.type === "radio" ? <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: colors.primary }} /> : <Icon name="check" size={16} color="#fff" stroke={2.5} /> : null}
                  </View>
                  <T v="body" style={{ flex: 1, fontSize: 15 }}>{o.label}</T>{o.count != null ? <T v="cap" color={colors.muted}>{o.count}</T> : null}
                </Pressable>
              ))}
            </View>
          )}
        </View>
      ))}
    </ScrollView>
  );
}