"use client";

import React, { useState, useEffect } from "react";
import ContactHero from "../Contact/ContactHero";
import Link from "next/link";
import Image from "next/image";
import { t } from "@/lib/i18n";
import { API_BASE_URL } from "@/lib/apiConfig";
import Loading from "@/src/app/loading";
import axios from "axios";

export default function CommitteesPage() {
  const [lang, setLang] = useState("ar");
  const [committees, setCommittees] = useState([]);
  const [section, setSection] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (typeof window !== "undefined") {
      setLang(localStorage.getItem("lang") || "ar");
    }
  }, []);

  useEffect(() => {
    const fetchCommittees = async () => {
      try {
        const res = await axios.get(`${API_BASE_URL}/client/committees`, {
          headers: {
            lang,
            secretKey: "6a72f384a1d3bcb40c0129e810ce4d7b9e83d7aaf208b3ecfd0488d6a1e5c67a",
          },
        });
        if (res.data?.data?.committees) {
          setCommittees(res.data.data.committees);
        }
        if (res.data?.data?.section) {
          setSection(res.data.data.section);
        }
      } catch (error) {
        console.error("Error fetching committees:", error);
      } finally {
        setLoading(false);
      }
    };
    fetchCommittees();
  }, [lang]);

  if (loading) return <Loading />;

  const pageTitle = section?.title || t(lang, "committees_page_title");
  const pageDescription = section?.description || t(lang, "committees_page_description");

  return (
    <div
      className="home-page-content"
      style={{ direction: lang === "ar" ? "rtl" : "ltr" }}
    >
      <ContactHero
        lang={lang}
        title={pageTitle}
        subtitle={pageDescription}
      />
      <div style={{ paddingTop: 40, paddingBottom: 60 }}>
        <div className="container">
          <div className="section-header" style={{ marginBottom: 30 }}>
            <div className="r-side">
              <h2>{pageTitle}</h2>
              <p>{pageDescription}</p>
            </div>
          </div>

          {committees.length === 0 ? (
            <div
              style={{ textAlign: "center", padding: "60px 0", color: "#94a3b8" }}
            >
              <p style={{ fontSize: 18 }}>
                {lang === "ar"
                  ? "لا توجد لجان حالياً"
                  : "No committees available"}
              </p>
            </div>
          ) : (
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                gap: 24,
              }}
            >
              {committees.map((committee) => (
                <div
                  key={committee.id}
                  style={{
                    background: "#fff",
                    borderRadius: 16,
                    boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
                    overflow: "hidden",
                    transition: "transform 0.3s, box-shadow 0.3s",
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = "translateY(-4px)";
                    e.currentTarget.style.boxShadow =
                      "0 8px 32px rgba(0,0,0,0.14)";
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = "translateY(0)";
                    e.currentTarget.style.boxShadow =
                      "0 4px 24px rgba(0,0,0,0.08)";
                  }}
                >
                  {committee.image ? (
                    <div
                      style={{
                        position: "relative",
                        width: "100%",
                        height: 200,
                        overflow: "hidden",
                      }}
                    >
                      <Image
                        src={committee.image}
                        alt={committee.name}
                        fill
                        style={{ objectFit: "cover" }}
                      />
                    </div>
                  ) : (
                    <div
                      style={{
                        width: "100%",
                        height: 200,
                        background: "linear-gradient(135deg, #1a5c2e, #2e7d32)",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                        <circle cx="9" cy="7" r="4" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </div>
                  )}
                  <div style={{ padding: "24px" }}>
                    <h3
                      style={{
                        fontSize: 20,
                        fontWeight: 700,
                        color: "#1a1a2e",
                        marginBottom: 12,
                      }}
                    >
                      {committee.name}
                    </h3>
                    {committee.description && (
                      <p
                        style={{
                          fontSize: 14,
                          color: "#64748b",
                          marginBottom: 20,
                          lineHeight: 1.6,
                        }}
                      >
                        {committee.description}
                      </p>
                    )}
                    <Link
                      href={`/committees/${committee.id}`}
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        gap: 8,
                        padding: "10px 24px",
                        background: "linear-gradient(135deg, #1a5c2e, #2e7d32)",
                        color: "#fff",
                        borderRadius: 8,
                        textDecoration: "none",
                        fontSize: 14,
                        fontWeight: 600,
                        transition: "opacity 0.3s",
                      }}
                      onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.9")}
                      onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
                    >
                      {t(lang, "learn_more")}
                      <svg
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        style={{
                          transform:
                            lang === "ar" ? "rotate(180deg)" : "none",
                        }}
                      >
                        <path
                          d="M9 18L15 12L9 6"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    </Link>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}