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";
import { useGoal } from "../hooks/useGoal";

export const ViewGoal = () => {
  const { i18n, t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const { singleItem: item } = useGoal(undefined, id);
  const locale = i18n.language;
  const localizedName = useLocalizedName();
  return (
    <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl mb-12">
      <div className="flex flex-col md:flex-row">
        {/* Goal Content Section */}
        <div className="md:w-2/3 p-6 md:p-8 flex flex-col justify-center">
          <div className="mb-6">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 rounded-lg bg-gradient-to-r from-primary-500 to-primary-600 flex items-center justify-center text-white text-2xl mr-4">
                <ImageIcon className="w-6 h-6" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-600 uppercase tracking-wide">
                  {t("Leadership Message")}
                </h3>
                <h2 className="text-2xl md:text-3xl font-bold text-gray-800 mt-1">
                  {localizedName(item?.goalTitle)}
                </h2>
              </div>
            </div>

            <div className="min-h-[120px] flex items-center">
              <p className="text-gray-700 text-lg leading-relaxed whitespace-pre-line">
                {localizedName(item?.goalDescription)}
              </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">
            <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>

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

        {/* Visual Section */}
        <div className="md:w-1/3 bg-gradient-to-br from-primary-50 to-primary-100 p-6 md:p-8 flex flex-col justify-center items-center">
          <div className="text-center">
            <div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg flex items-center justify-center overflow-hidden">
              {item?.presigned ? (
                <img
                  src={item.presigned}
                  alt={localizedName(item.goalTitle)}
                  className="w-full h-full object-cover rounded-2xl"
                />
              ) : (
                <div className="flex flex-col items-center justify-center text-gray-400">
                  <ImageIcon className="h-10 w-10" />
                  <span className="text-sm mt-2">{t("No image available")}</span>
                </div>
              )}
            </div>

            <h3 className="text-xl font-bold text-gray-800 mb-2">
              {t("Office Leadership")}
            </h3>
            <p className="text-gray-600 text-sm">
              {t("Leading with vision and dedication to serve.")}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};
