import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet, SafeAreaView } from "react-native";
import { useLocalSearchParams, router } from "expo-router";
import { ArrowLeft, Plus } from "lucide-react-native";
import { useThemeColor } from "@/hooks/useThemeColor";
import { useColorScheme } from "@/hooks/useColorScheme";
import { useTablosList } from "@/hooks/tablos";
import { Etape } from "@/types/tasks.types";
import { ColorMap, PRIMARY } from "@/constants/colors";
import TaskList from "@/components/tasks/TaskList";
import EtapeSheet from "@/components/tasks/EtapeSheet";

export default function TabloDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const colorScheme = useColorScheme();
  const isDark = colorScheme === "dark";
  const bgColor = useThemeColor({ light: "#f8fafc", dark: "#111827" }, "background");
  const textColor = useThemeColor({ light: "#1f2937", dark: "#f9fafb" }, "text");
  const headerBg = useThemeColor({ light: "#ffffff", dark: "#1f2937" }, "background");
  const borderColor = isDark ? "#374151" : "#e5e7eb";

  const { data: tablos } = useTablosList();
  const tablo = tablos?.find((t) => t.id === id);

  const [etapeSheetVisible, setEtapeSheetVisible] = useState(false);
  const [editingEtape, setEditingEtape] = useState<Etape | null>(null);

  const handleEditEtape = (etape: Etape) => {
    setEditingEtape(etape);
    setEtapeSheetVisible(true);
  };

  const handleCreateEtape = () => {
    setEditingEtape(null);
    setEtapeSheetVisible(true);
  };

  const handleCloseEtapeSheet = () => {
    setEtapeSheetVisible(false);
    setEditingEtape(null);
  };

  if (!tablo || !id) {
    return (
      <SafeAreaView style={[styles.container, { backgroundColor: bgColor }]}>
        <Text style={{ color: textColor }}>Tablo introuvable</Text>
      </SafeAreaView>
    );
  }

  const tabloColor = tablo.color ? ColorMap[tablo.color] ?? PRIMARY : PRIMARY;

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: bgColor }]}>
      {/* Header */}
      <View style={[styles.header, { backgroundColor: headerBg, borderBottomColor: borderColor }]}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <ArrowLeft size={22} color={textColor} />
        </TouchableOpacity>
        <View style={[styles.colorIndicator, { backgroundColor: tabloColor }]} />
        <Text style={[styles.tabloName, { color: textColor }]} numberOfLines={1}>
          {tablo.name}
        </Text>
      </View>

      {/* Task list */}
      <TaskList
        tabloId={id}
        onEditEtape={handleEditEtape}
        onCreateEtape={handleCreateEtape}
      />

      {/* FAB - create task */}
      <TouchableOpacity
        style={styles.fab}
        onPress={() => router.push(`/task/new?tabloId=${id}`)}
      >
        <Plus size={24} color="#ffffff" />
      </TouchableOpacity>

      {/* Etape sheet */}
      <EtapeSheet
        visible={etapeSheetVisible}
        onClose={handleCloseEtapeSheet}
        tabloId={id}
        etape={editingEtape}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 12,
    paddingVertical: 14,
    borderBottomWidth: StyleSheet.hairlineWidth,
    gap: 10,
  },
  backButton: {
    padding: 4,
  },
  colorIndicator: {
    width: 14,
    height: 14,
    borderRadius: 4,
  },
  tabloName: {
    flex: 1,
    fontSize: 18,
    fontWeight: "700",
  },
  fab: {
    position: "absolute",
    bottom: 24,
    right: 20,
    width: 54,
    height: 54,
    borderRadius: 27,
    backgroundColor: PRIMARY,
    alignItems: "center",
    justifyContent: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 6,
    elevation: 6,
  },
});
