import { createSlice, createAsyncThunk, type PayloadAction } from "@reduxjs/toolkit"

// Define a type for the supported vehicle model
export interface SupportedVehicleModel {
  id: number
  name: string
  makeName: string
}

// Define a type for the add-on
export interface AddOn {
  id: number
  name: string
  description: string
  supportedVehicleModels: SupportedVehicleModel[]
}

// Define the state type
interface AddOnsState {
  items: AddOn[]
  status: "idle" | "loading" | "succeeded" | "failed"
  error: string | null
  filters: {
    search: string
    vehicleModels: number[]
  }
}

// Initial state
const initialState: AddOnsState = {
  items: [],
  status: "idle",
  error: null,
  filters: {
    search: "",
    vehicleModels: [],
  },
}

// Sample data for initial development
const sampleAddOns: AddOn[] = [
  {
    id: 1,
    name: "Wheelchair Access",
    description: "Wheelchair accessibility ramp and securing system",
    supportedVehicleModels: [
      { id: 3, name: "RAV4", makeName: "Toyota" },
      { id: 5, name: "CR-V", makeName: "Honda" },
      { id: 9, name: "GLE", makeName: "Mercedes-Benz" },
    ],
  },
  {
    id: 2,
    name: "Baby Seat",
    description: "Child safety seat for infants and toddlers",
    supportedVehicleModels: [
      { id: 1, name: "Camry", makeName: "Toyota" },
      { id: 2, name: "Corolla", makeName: "Toyota" },
      { id: 4, name: "Civic", makeName: "Honda" },
      { id: 6, name: "3 Series", makeName: "BMW" },
      { id: 8, name: "C-Class", makeName: "Mercedes-Benz" },
    ],
  },
  {
    id: 3,
    name: "Roof Rack",
    description: "Roof-mounted cargo carrier system",
    supportedVehicleModels: [
      { id: 3, name: "RAV4", makeName: "Toyota" },
      { id: 5, name: "CR-V", makeName: "Honda" },
      { id: 7, name: "X5", makeName: "BMW" },
      { id: 9, name: "GLE", makeName: "Mercedes-Benz" },
      { id: 11, name: "Q5", makeName: "Audi" },
    ],
  },
  {
    id: 4,
    name: "Bike Rack",
    description: "Bicycle carrier attachment",
    supportedVehicleModels: [
      { id: 3, name: "RAV4", makeName: "Toyota" },
      { id: 5, name: "CR-V", makeName: "Honda" },
      { id: 7, name: "X5", makeName: "BMW" },
      { id: 9, name: "GLE", makeName: "Mercedes-Benz" },
      { id: 11, name: "Q5", makeName: "Audi" },
    ],
  },
  {
    id: 5,
    name: "GPS Navigation System",
    description: "Advanced GPS navigation with real-time traffic updates",
    supportedVehicleModels: [
      { id: 1, name: "Camry", makeName: "Toyota" },
      { id: 2, name: "Corolla", makeName: "Toyota" },
      { id: 3, name: "RAV4", makeName: "Toyota" },
      { id: 4, name: "Civic", makeName: "Honda" },
      { id: 5, name: "CR-V", makeName: "Honda" },
      { id: 6, name: "3 Series", makeName: "BMW" },
      { id: 7, name: "X5", makeName: "BMW" },
      { id: 8, name: "C-Class", makeName: "Mercedes-Benz" },
      { id: 9, name: "GLE", makeName: "Mercedes-Benz" },
      { id: 10, name: "A4", makeName: "Audi" },
      { id: 11, name: "Q5", makeName: "Audi" },
      { id: 12, name: "Mustang", makeName: "Ford" },
    ],
  },
  {
    id: 6,
    name: "Pet Barrier",
    description: "Safety barrier to keep pets in the cargo area",
    supportedVehicleModels: [
      { id: 3, name: "RAV4", makeName: "Toyota" },
      { id: 5, name: "CR-V", makeName: "Honda" },
      { id: 7, name: "X5", makeName: "BMW" },
      { id: 9, name: "GLE", makeName: "Mercedes-Benz" },
      { id: 11, name: "Q5", makeName: "Audi" },
    ],
  },
  {
    id: 7,
    name: "Cargo Organizer",
    description: "Trunk/cargo area organization system",
    supportedVehicleModels: [
      { id: 1, name: "Camry", makeName: "Toyota" },
      { id: 2, name: "Corolla", makeName: "Toyota" },
      { id: 3, name: "RAV4", makeName: "Toyota" },
      { id: 4, name: "Civic", makeName: "Honda" },
      { id: 5, name: "CR-V", makeName: "Honda" },
    ],
  },
  {
    id: 8,
    name: "Premium Sound System",
    description: "Enhanced audio system with subwoofer",
    supportedVehicleModels: [
      { id: 1, name: "Camry", makeName: "Toyota" },
      { id: 6, name: "3 Series", makeName: "BMW" },
      { id: 7, name: "X5", makeName: "BMW" },
      { id: 8, name: "C-Class", makeName: "Mercedes-Benz" },
      { id: 9, name: "GLE", makeName: "Mercedes-Benz" },
      { id: 10, name: "A4", makeName: "Audi" },
      { id: 11, name: "Q5", makeName: "Audi" },
      { id: 12, name: "Mustang", makeName: "Ford" },
    ],
  },
]

// Define the payload type for adding a new add-on
export interface AddAddOnPayload {
  name: string
  description: string
  supportedVehicleModelIds: number[]
}

// Async thunks for API calls
export const fetchAddOns = createAsyncThunk("addOns/fetchAddOns", async (_, { rejectWithValue }) => {
  try {
    // In a real app, this would be an API call
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return sampleAddOns
  } catch (error) {
    return rejectWithValue("Failed to fetch add-ons")
  }
})

export const addAddOn = createAsyncThunk(
  "addOns/addAddOn",
  async (payload: AddAddOnPayload, { rejectWithValue, getState }) => {
    try {
      // In a real app, this would be an API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

      // Get the vehicle models from the state
      const state = getState() as any
      const vehicleModels = state.vehicleModels.items

      // Find the vehicle models that match the IDs
      const supportedVehicleModels = payload.supportedVehicleModelIds.map((id) => {
        const model = vehicleModels.find((model: any) => model.id === id)
        if (!model) {
          throw new Error(`Vehicle model with ID ${id} not found`)
        }
        return {
          id: model.id,
          name: model.name,
          makeName: model.makeName,
        }
      })

      // Generate a new ID (in a real app, the server would do this)
      return {
        id: Date.now(),
        name: payload.name,
        description: payload.description,
        supportedVehicleModels,
      }
    } catch (error) {
      return rejectWithValue("Failed to add add-on")
    }
  },
)

export const deleteAddOn = createAsyncThunk("addOns/deleteAddOn", async (id: number, { rejectWithValue }) => {
  try {
    // In a real app, this would be an API call
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return id
  } catch (error) {
    return rejectWithValue("Failed to delete add-on")
  }
})

// Create the slice
const addOnsSlice = createSlice({
  name: "addOns",
  initialState,
  reducers: {
    updateFilters: (state, action: PayloadAction<Partial<AddOnsState["filters"]>>) => {
      state.filters = { ...state.filters, ...action.payload }
    },
    resetFilters: (state) => {
      state.filters = initialState.filters
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchAddOns.pending, (state) => {
        state.status = "loading"
      })
      .addCase(fetchAddOns.fulfilled, (state, action) => {
        state.status = "succeeded"
        state.items = action.payload
      })
      .addCase(fetchAddOns.rejected, (state, action) => {
        state.status = "failed"
        state.error = action.payload as string
      })
      .addCase(addAddOn.fulfilled, (state, action) => {
        state.items.push(action.payload)
      })
      .addCase(deleteAddOn.fulfilled, (state, action) => {
        state.items = state.items.filter((item) => item.id !== action.payload)
      })
  },
})

export const { updateFilters, resetFilters } = addOnsSlice.actions

export default addOnsSlice.reducer