"use client";

import { useState } from "react";

import Button from "../../../components/ui/Button";
import Input from "../../../components/ui/CustomInput";
import Toggle from "../../../components/ui/Toggle";

interface SocialPlatform {
  id: string;
  label: string;
  placeholder: string;
  enabled: boolean;
}

export default function SocialMediaManagement() {
  const [platforms, setPlatforms] = useState<SocialPlatform[]>([
    {
      id: "facebook",
      label: "Facebook",
      placeholder: "https://facebook.com/...",
      enabled: true,
    },
    {
      id: "instagram",
      label: "Instagram",
      placeholder: "https://instagram.com/...",
      enabled: true,
    },
    {
      id: "twitter",
      label: "Twitter (X)",
      placeholder: "https://x.com/...",
      enabled: true,
    },
    {
      id: "linkedin",
      label: "LinkedIn",
      placeholder: "https://linkedin.com/in/...",
      enabled: false,
    },
    {
      id: "youtube",
      label: "YouTube",
      placeholder: "https://youtube.com/...",
      enabled: true,
    },
    {
      id: "custom",
      label: "Custom Link",
      placeholder: "https://",
      enabled: true,
    },
  ]);

  const handleToggle = (id: string) => {
    setPlatforms((prev) =>
      prev.map((item) =>
        item.id === id
          ? { ...item, enabled: !item.enabled }
          : item
      )
    );
  };

  return (
    <div>
      <div className="glass-card-v2 rounded-xl p-4 xl:p-6">
        {/* Header */}
        <div className="mb-6 flex items-center gap-4 justify-between">
          <h2 className="font-body text-lg md:text-xl font-semibold text-table-text">
            Social Media Management
          </h2>

          <Button
            variant="white"
            BtnInnerclassName="px-4.5! py-3.5! text-link! text-base! md:text-lg!"
            buttonClassName="shadow-none!"
          >
            Save
          </Button>
        </div>

        {/* Social Links */}
        <div className="space-y-5">
          {platforms.map((platform) => (
            <div
              key={platform.id}
              className="flex items-end gap-4"
            >
              <div className="flex-1">
                <Input
                  label={platform.label}
                  placeholder={platform.placeholder}
                />
              </div>

              <div className="pb-3">
                <Toggle
                  checked={platform.enabled}
                  onChange={() =>
                    handleToggle(platform.id)
                  }
                  size="md"
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}