"use client";

import React, { useRef } from "react";
import { Input } from "@/src/elements/ui/input";
import { Label } from "@/src/elements/ui/label";
import { Plus, X } from "lucide-react";
import { toast } from "sonner";
import { HeaderSectionProps } from "@/src/types/template";
import CharacterCountWrapper from "@/src/shared/CharacterCountWrapper";
import { useTranslation } from "react-i18next";

export const HeaderSection = ({ templateType, setTemplateType, headerText, setHeaderText, templateTypes, setHeaderFile, headerFile }: HeaderSectionProps) => {
  const { t } = useTranslation();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      if (file.size > 5 * 1024 * 1024) return toast.error(t("templates_library_form_carousel_file_size_error"));
      setHeaderFile(file);
    }
  };

  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 flex-col gap-2">
        <h3 className="text-lg font-bold text-slate-800 dark:text-slate-200 tracking-tight">{t("templates_library_header_title")}</h3>
        <p className="text-xs text-slate-500 font-medium dark:text-gray-400">{t("templates_library_header_subtitle")}</p>
      </div>

      <div
        className="grid grid-cols-1 lg:grid-cols-2 gap-8 [@media(min-width:767)_and_(max-width:1430px)]:grid-cols-1
"
      >
        <div className="space-y-4 flex flex-col">
          <Label className="text-sm font-bold text-slate-700 dark:text-slate-300">{t("templates_library_header_text")}</Label>
          <CharacterCountWrapper current={headerText?.length || 0} max={60}>
            <Input
              placeholder={t("templates_library_header_text_placeholder")}
              value={headerText || ""}
              onChange={(e) => setHeaderText(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:bg-white dark:focus:bg-page-body transition-all font-medium"
            />
          </CharacterCountWrapper>
          <p className="text-[11px] text-slate-400">{t("templates_library_header_max_chars")}</p>
        </div>

        <div className="space-y-4">
          <Label className="text-sm font-bold text-slate-700 dark:text-slate-300">{t("templates_library_media_header")}</Label>
          <div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 gap-2">
            {templateTypes
              .filter((t_opt) => t_opt.value !== "text" && t_opt.value !== "none")
              .map((type) => (
                <button
                  key={type.value}
                  type="button"
                  onClick={() => {
                    if (templateType === type.value) {
                      setTemplateType("none");
                      setHeaderFile(null);
                    } else setTemplateType(type.value);
                  }}
                  className={`flex flex-col items-center justify-center gap-1.5 p-2 sm:p-3 rounded-lg border transition-all font-bold text-[9px] sm:text-[10px] uppercase tracking-wider ${templateType === type.value ? "border-primary bg-emerald-50/50 text-primary dark:bg-(--table-hover)" : "border-slate-150 dark:border-(--table-hover) bg-slate-50/20 dark:bg-(--table-hover) text-slate-400 dark:text-gray-500 hover:border-primary dark:hover:border-(--card-border-color)"}`}
                >
                  <div className={`p-1.5 rounded-lg ${templateType === type.value ? "bg-emerald-100 dark:bg-(--card-color)" : "bg-white dark:bg-transparent shadow-xs"}`}>{type.icon}</div>
                  {type.label}
                </button>
              ))}
          </div>
        </div>
      </div>

      {templateType !== "text" && templateType !== "none" && (
        <div className="pt-6 border-t border-slate-50 dark:border-(--card-border-color)">
          <input type="file" ref={fileInputRef} onChange={handleFileChange} className="hidden" accept={templateType === "image" ? "image/*" : templateType === "video" ? "video/*" : templateType === "document" ? ".pdf,.doc,.docx" : "*"} />
          {headerFile ? (
            <div className="flex items-center justify-between p-4 bg-emerald-50/50 dark:bg-emerald-500/5 border border-emerald-100 dark:border-emerald-500/20 rounded-2xl animate-in fade-in slide-in-from-top-2 duration-300">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-lg bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center shadow-sm">
                  <div className="text-primary dark:text-emerald-400">{templateTypes.find((t_opt) => t_opt.value === templateType)?.icon}</div>
                </div>
                <div className="flex flex-col">
                  <span className="text-sm font-bold text-slate-800 dark:text-slate-200 truncate max-w-50">{headerFile.name}</span>
                  <span className="text-[10px] text-primary dark:text-emerald-400 font-bold uppercase tracking-wider">{(headerFile.size / (1024 * 1024)).toFixed(2)} MB • {t("templates_library_file_ready")}</span>
                </div>
              </div>
              <button
                type="button"
                onClick={() => {
                  setHeaderFile(null);
                  setTemplateType("none");
                }}
                className="p-2.5 text-slate-500 dark:text-gray-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg transition-all"
              >
                <X size={20} />
              </button>
            </div>
          ) : (
            <div onClick={() => fileInputRef.current?.click()} className="border-2 border-dashed border-slate-200 dark:border-(--card-border-color) rounded-lg p-10 flex flex-col items-center justify-center bg-slate-50/30 dark:bg-(--card-color) hover:bg-white dark:hover:bg-(--table-hover) hover:border-primary dark:hover:border-(--card-border-color) transition-all cursor-pointer group">
              <div className="w-14 h-14 rounded-lg bg-white dark:bg-(--dark-body) shadow-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                <Plus className="text-primary" size={24} />
              </div>
              <p className="text-sm font-bold text-slate-500 dark:text-gray-500">{t("templates_library_upload_header", { type: templateType })}</p>
              <p className="text-[11px] text-slate-500 dark:text-gray-400 mt-1.5 font-medium">{t("templates_library_upload_hint_formats")}</p>
            </div>
          )}
        </div>
      )}
    </div>
  );
};
