/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { Input } from "@/src/elements/ui/input";
import { Label } from "@/src/elements/ui/label";
import { ButtonSectionProps } from "@/src/types/template";
import { Copy, FileText, Link, Plus, Smartphone, Trash2 } from "lucide-react";
import CharacterCountWrapper from "@/src/shared/CharacterCountWrapper";
import { useTranslation } from "react-i18next";

export const ButtonSection = ({ interactiveType, setInteractiveType, buttons, addButton, removeButton, updateButton, interactiveActions, isLimitedTimeOffer, isCouponCode }: ButtonSectionProps) => {
  const { t } = useTranslation();
  const isRestricted = isLimitedTimeOffer || isCouponCode;

  return (
    <div className="bg-white dark:bg-(--card-color) p-4 sm:p-6 rounded-lg border border-slate-200 dark:border-(--card-border-color) shadow-sm space-y-6 sm:space-y-8">
      <div className="flex items-center justify-between">
        <div className="flex flex-col gap-2">
          <h3 className="text-lg font-bold text-slate-800 dark:text-slate-200 tracking-tight">{t("templates_library_buttons_title")}</h3>
          <p className="text-xs text-slate-500 font-medium dark:text-gray-400">{t("templates_library_buttons_subtitle")}</p>
        </div>
      </div>

      <div className="flex flex-wrap gap-2 sm:gap-3">
        {interactiveActions
          .filter((action) => (isRestricted ? action.value === "cta" : true))
          .map((action) => (
            <button key={action.value} type="button" onClick={() => setInteractiveType(action.value)} className={`px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg border transition-all text-[10px] sm:text-xs font-bold uppercase tracking-wider ${interactiveType === action.value ? "border-primary bg-emerald-50/50 text-emerald-700 dark:bg-(--card-color) dark:text-primary shadow-sm" : "border-slate-50 dark:border-(--card-border-color) bg-slate-50/20 dark:bg-(--dark-sidebar) dark:hover:border-(--card-border-color) text-slate-400 hover:border-slate-200"}`}>
              {t(action.label)}
            </button>
          ))}
      </div>

      <div className="space-y-4">
        {buttons?.map((btn, idx) => (
          <div key={btn.id} className="p-4 sm:p-6 bg-slate-50/50 dark:bg-(--dark-body) dark:border-none border border-slate-100 dark:border-(--card-border-color) rounded-lg space-y-4 sm:space-y-6 relative group animate-in zoom-in-95 duration-200">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-lg bg-white dark:bg-page-body flex items-center justify-center text-primary shadow-sm">{btn.type === "quick_reply" ? <FileText size={16} /> : btn.type === "url" || btn.type === "website" ? <Link size={16} /> : btn.type === "copy_code" ? <Copy size={16} /> : <Smartphone size={16} />}</div>
                <span className="text-xs font-bold text-slate-700 dark:text-slate-300 uppercase tracking-widest leading-none">
                  {t("templates_library_button_label", { index: idx + 1, type: btn.type === "url" ? "URL" : btn.type.replace("_", " ") })}
                </span>
              </div>
              <button type="button" onClick={() => removeButton(btn.id)} className="p-2 text-slate-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-lg transition-all opacity-0 group-hover:opacity-100">
                <Trash2 size={18} />
              </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
              <div className="space-y-2 flex flex-col">
                <Label className="text-xs font-bold text-slate-600 dark:text-gray-400">{t("templates_library_button_title_label")}</Label>
                <CharacterCountWrapper current={btn.text?.length || 0} max={60}>
                  <Input
                    placeholder={t("templates_library_button_text_placeholder")}
                    value={btn.text || ""}
                    onChange={(e) => updateButton(btn.id, { text: e.target.value.slice(0, 60) })}
                    className="h-11 border-(--input-border-color) p-3 dark:border-(--card-border-color) rounded-lg bg-(--input-color) dark:bg-page-body focus:border-emerald-500/50 transition-all font-medium"
                  />
                </CharacterCountWrapper>
              </div>
              {(btn.type === "url" || btn.type === "website") && (
                <div className="space-y-2 flex flex-col">
                  <Label className="text-xs font-bold text-slate-600 dark:text-gray-400">{t("templates_library_button_url_label")}</Label>
                  <Input placeholder="https://example.com" value={btn.url || btn.website_url || ""} onChange={(e) => updateButton(btn.id, { url: e.target.value, website_url: e.target.value })} className="h-11 border-(--input-border-color) p-3 dark:border-(--card-border-color) rounded-lg bg-(--input-color) dark:bg-page-body focus:border-emerald-500/50 transition-all font-medium" />
                </div>
              )}
              {btn.type === "phone_call" && (
                <div className="space-y-2 flex flex-col">
                  <Label className="text-xs font-bold text-slate-600 dark:text-gray-400">{t("templates_library_button_phone_label")}</Label>
                  <Input type="number" placeholder="+1 234 567 890" value={btn.phone_number || ""} onChange={(e) => updateButton(btn.id, { phone_number: e.target.value })} className="h-11 border-(--input-border-color) p-3 dark:border-(--card-border-color) rounded-lg bg-(--input-color) dark:bg-page-body focus:border-emerald-500/50 transition-all font-medium" />
                </div>
              )}
            </div>
          </div>
        ))}

        {interactiveType === "cta" && (
          <div className="flex flex-col sm:flex-row gap-3">
            <button type="button" onClick={() => addButton("website")} className="flex-1 h-11 sm:h-12 flex items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-200 dark:hover:border-(--card-border-color) dark:text-amber-50 dark:border-(--card-border-color) text-slate-500 font-bold hover:border-emerald-500/50 hover:bg-emerald-50/30 dark:hover:bg-(--table-hover) transition-all text-xs sm:text-sm p-3">
              <Link size={16} /> {t("templates_library_button_add_url", { current: buttons?.filter((b: any) => b.type === "url").length || 0, max: 2 })}
            </button>
            {!isRestricted && (
              <button type="button" onClick={() => addButton("phone_call")} className="flex-1 h-11 sm:h-12 flex items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-200 dark:hover:border-(--card-border-color) dark:text-amber-50 dark:border-(--card-border-color) text-slate-500 font-bold hover:border-emerald-500/50 hover:bg-emerald-50/30 dark:hover:bg-(--table-hover) transition-all text-xs sm:text-sm p-3">
                <Smartphone size={16} /> {t("templates_library_button_add_phone", { current: buttons?.filter((b: any) => b.type === "phone_call").length || 0, max: 1 })}
              </button>
            )}
            {isRestricted && (
              <button type="button" onClick={() => addButton("copy_code")} className="flex-1 h-11 sm:h-12 flex items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-200 dark:hover:border-(--card-border-color) dark:text-amber-50 dark:border-(--card-border-color) text-slate-500 font-bold hover:border-emerald-500/50 hover:bg-emerald-50/30 dark:hover:bg-(--table-hover) transition-all text-xs sm:text-sm">
                <Copy size={16} /> {t("templates_library_button_add_copy_code", { current: buttons?.filter((b: any) => b.type === "copy_code").length || 0, max: 1 })}
              </button>
            )}
          </div>
        )}
        {interactiveType === "quick_reply" && !isRestricted && (
          <button type="button" onClick={() => addButton("quick_reply")} className="w-full h-12 flex items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-200 dark:hover:border-(--card-border-color) dark:text-amber-50 dark:border-(--card-border-color) text-slate-500 font-bold hover:border-emerald-500/50 hover:bg-emerald-50/30 dark:hover:bg-(--table-hover) transition-all text-sm">
            <Plus size={18} /> {t("templates_library_button_add_quick_reply", { current: buttons?.filter((b: any) => b.type === "quick_reply").length || 0, max: 10 })}
          </button>
        )}
        {interactiveType === "all" && !isRestricted && (
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
            <button type="button" onClick={() => addButton("quick_reply")} className="flex flex-col items-center gap-2 p-3 sm:p-4 rounded-lg dark:bg-(--table-hover) dark:hover:border-(--card-border-color) border border-slate-100 dark:border-(--card-border-color) bg-slate-50/30 dark:text-amber-50 hover:border-emerald-200 transition-all font-bold text-xs text-slate-600">
              <FileText size={18} className="text-slate-400" /> {t("templates_library_button_quick_reply_type")} ({buttons?.filter((b: any) => b.type === "quick_reply").length || 0}/10)
            </button>
            <button type="button" onClick={() => addButton("website")} className="flex flex-col items-center gap-2 p-3 sm:p-4 rounded-lg dark:bg-(--table-hover) dark:hover:border-(--card-border-color) border border-slate-100 dark:border-(--card-border-color) bg-slate-50/30 dark:text-amber-50 hover:border-emerald-200 transition-all font-bold text-xs text-slate-600">
              <Link size={18} className="text-slate-400" /> {t("templates_library_button_url_label")} ({buttons?.filter((b: any) => b.type === "url").length || 0}/2)
            </button>
            <button type="button" onClick={() => addButton("phone_call")} className="flex flex-col items-center gap-2 p-3 sm:p-4 rounded-lg dark:bg-(--table-hover) dark:hover:border-(--card-border-color) border border-slate-100 dark:border-(--card-border-color) bg-slate-50/30 dark:text-amber-50 hover:border-emerald-200 transition-all font-bold text-xs text-slate-600">
              <Smartphone size={18} className="text-slate-400" /> {t("templates_library_button_phone_label").split(" ")[0]} ({buttons?.filter((b: any) => b.type === "phone_call").length || 0}/1)
            </button>
          </div>
        )}
      </div>
    </div>
  );
};
