import React from "react";
import { ImageIcon } from "lucide-react";
import { useTranslation } from "react-i18next";
import { MessageItem } from "../types/messageTypes";
import { useLocalizedName } from "@/shared/common/localizedName";
import { useMessage } from "../hooks/useMessage";
import { useParams } from "react-router-dom";

export const ViewMessage = () => {
  const { i18n, t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const { singleItem: item } = useMessage(undefined, id);
  const locale = i18n.language;
  const localizedName = useLocalizedName();
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-4 md:p-8">
      <div className="max-w-6xl w-full">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
            {t("Leadership Message")}
          </h1>
          <div className="w-24 h-1 bg-primary-600 mx-auto"></div>
        </div>

        {/* Card */}
        <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
          <div className="flex flex-col md:flex-row">
            {/* Image Section */}
            <div className="md:w-2/5 relative">
              {item?.presigned ? (
                <img
                  src={item.presigned}
                  alt={localizedName(item.messageTitle)}
                  className="w-full h-64 md:h-full object-cover"
                />
              ) : (
                <div className="w-full h-64 md:h-full flex items-center justify-center bg-gray-100 text-gray-400">
                  <ImageIcon className="h-10 w-10" />
                  <span className="ml-2">{t("No image available")}</span>
                </div>
              )}

              {/* Overlay with title */}
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6 md:p-8">
                <div>
                  <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">
                    {localizedName(item?.messageTitle)}
                  </h2>
                  <p className="text-gray-200 text-lg">
                    {t("Office Leadership")}
                  </p>
                </div>
              </div>

              {/* Checkmark */}
              <div className="absolute top-6 right-6 bg-white text-primary-600 rounded-full p-2 shadow-lg">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M5 13l4 4L19 7"
                  />
                </svg>
              </div>
            </div>

            {/* Message Section */}
            <div className="md:w-3/5 p-6 md:p-8 flex flex-col justify-center">
              <div className="mb-6">
                <div className="flex items-center mb-6">
                  <div className="w-10 h-1 bg-primary-600 mr-3"></div>
                  <h3 className="text-lg font-semibold text-primary-600 uppercase tracking-wide">
                    {t("Message Content")}
                  </h3>
                </div>

                <div className="max-h-96 overflow-y-auto pr-4 custom-scrollbar">
                  <p className="text-gray-700 text-lg leading-relaxed whitespace-pre-line">
                    {localizedName(item?.messageContent)}
                  </p>
                </div>
              </div>

              {/* Footer Section */}
              <div className="mt-8 pt-6 border-t border-gray-200 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                {/* Status Toggle */}
                <div className="flex items-center gap-3">
                  <span className="text-sm font-medium text-gray-700">
                    {t("Status")}
                  </span>
                  <div
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                      item?.isActive ? "bg-primary-500" : "bg-gray-300"
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        item?.isActive ? "translate-x-6" : "translate-x-1"
                      }`}
                    />
                  </div>
                  <span
                    className={`text-sm font-medium ${
                      item?.isActive ? "text-primary-600" : "text-gray-500"
                    }`}
                  >
                    {item?.isActive ? t("Active") : t("Inactive")}
                  </span>
                </div>

                {/* Date */}
                {item?.createdAt && (
                  <span className="text-sm text-gray-500">
                    {locale === "en"
                      ? new Date(item.createdAt).toLocaleString(locale, {
                          dateStyle: "medium",
                          timeStyle: "short",
                        })
                      : item.amharicCreatedAt}
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};