"use client";

import React, { createContext, useContext, useState } from "react";

export type PlatformType =
  | "all"
  | "google"
  | "meta"
  | "tiktok"
  | "microsoft"
  | "linkedin"
  | "x"
  | "snapchat";

interface PlatformConfig {
  id: PlatformType;
  name: string;
  logo: string;
  color: string;
  borderColor: string;
  bgColor: string;
  glowColor: string;
  targetingLabel: string; // "الكلمات المفتاحية" or "الجمهور المستهدف"
}

export const PLATFORMS: Record<PlatformType, PlatformConfig> = {
  all: {
    id: "all",
    name: "كل المنصات",
    logo: "🌐",
    color: "text-emerald-400",
    borderColor: "border-emerald-500/20",
    bgColor: "bg-emerald-500/10",
    glowColor: "shadow-emerald-500/10",
    targetingLabel: "الاستهداف والكلمات",
  },
  google: {
    id: "google",
    name: "إعلانات Google",
    logo: "🎯",
    color: "text-blue-400",
    borderColor: "border-blue-500/20",
    bgColor: "bg-blue-500/10",
    glowColor: "shadow-blue-500/10",
    targetingLabel: "الكلمات المفتاحية",
  },
  meta: {
    id: "meta",
    name: "إعلانات Meta",
    logo: "🔵",
    color: "text-indigo-400",
    borderColor: "border-indigo-500/20",
    bgColor: "bg-indigo-500/10",
    glowColor: "shadow-indigo-500/10",
    targetingLabel: "الجمهور المستهدف",
  },
  tiktok: {
    id: "tiktok",
    name: "إعلانات TikTok",
    logo: "🎵",
    color: "text-pink-400",
    borderColor: "border-pink-500/20",
    bgColor: "bg-pink-500/10",
    glowColor: "shadow-pink-500/10",
    targetingLabel: "الجمهور المستهدف",
  },
  microsoft: {
    id: "microsoft",
    name: "إعلانات Microsoft",
    logo: "💻",
    color: "text-amber-400",
    borderColor: "border-amber-500/20",
    bgColor: "bg-amber-500/10",
    glowColor: "shadow-amber-500/10",
    targetingLabel: "الكلمات المفتاحية",
  },
  linkedin: {
    id: "linkedin",
    name: "إعلانات LinkedIn",
    logo: "👔",
    color: "text-cyan-400",
    borderColor: "border-cyan-500/20",
    bgColor: "bg-cyan-500/10",
    glowColor: "shadow-cyan-500/10",
    targetingLabel: "الجمهور والوظائف",
  },
  x: {
    id: "x",
    name: "إعلانات X (تويتر)",
    logo: "🐦",
    color: "text-gray-300",
    borderColor: "border-gray-700",
    bgColor: "bg-gray-800/20",
    glowColor: "shadow-gray-500/5",
    targetingLabel: "الجمهور والتغريدات",
  },
  snapchat: {
    id: "snapchat",
    name: "إعلانات Snapchat",
    logo: "👻",
    color: "text-yellow-400",
    borderColor: "border-yellow-500/20",
    bgColor: "bg-yellow-500/10",
    glowColor: "shadow-yellow-500/10",
    targetingLabel: "الجمهور المستهدف",
  },
};

interface PlatformContextProps {
  currentPlatform: PlatformType;
  setPlatform: (platform: PlatformType) => void;
  config: PlatformConfig;
}

const PlatformContext = createContext<PlatformContextProps | undefined>(undefined);

export function PlatformProvider({ children }: { children: React.ReactNode }) {
  const [currentPlatform, setCurrentPlatform] = useState<PlatformType>(() => {
    if (typeof window !== "undefined") {
      const saved = localStorage.getItem("current_platform_workspace") as PlatformType;
      if (saved && PLATFORMS[saved]) {
        return saved;
      }
    }
    return "all";
  });

  const setPlatform = (platform: PlatformType) => {
    if (PLATFORMS[platform]) {
      setCurrentPlatform(platform);
      localStorage.setItem("current_platform_workspace", platform);
    }
  };

  const config = PLATFORMS[currentPlatform];

  return (
    <PlatformContext.Provider value={{ currentPlatform, setPlatform, config }}>
      {children}
    </PlatformContext.Provider>
  );
}

export function usePlatform() {
  const context = useContext(PlatformContext);
  if (!context) {
    throw new Error("usePlatform must be used within a PlatformProvider");
  }
  return context;
}