"use client";
import React, { useEffect, useState } from "react";
import axios from "axios";

export default function Process() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const res = await axios.get("/api/get-component-data", {
          params: { component_name: "Process" },
        });
        setData(res.data.data);
      } catch (err) {
        setError("获取Process数据失败");
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <div className="text-center py-20">Loading...</div>;
  if (error) return null;
  if (!data) return null;

  const items = data.items || [];
  const title = data.title || "";
  const subtitle = data.subtitle || "";
  const buttonText = data.button_text || "";
  const buttonLink = data.button_link || "#";
  const paragraphs = [data.p1, data.p2, data.p3].filter(Boolean);
  const icon = data.icon || "/files/icon.svg";
  const htmlCode = data.html_code || "";

  return (
    <>
      <div className="flex flex-wrap mx-[-15px] !mb-5">
        <div className="md:w-10/12 lg:w-10/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
          {htmlCode ? (
            <div
              style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem"  }}
              dangerouslySetInnerHTML={{ __html: htmlCode }}
            />
          ) : (
            <img
              src={icon}
              alt="icon"
              style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem" }}
            />
          )}
          <h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-4 xl:!px-[4.5rem] lg:!px-[4.5rem]">
            {title}
          </h2>
        </div>
        {/* /column */}
      </div>
      {/* /.row */}
      <div className="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
        {/* 左侧：文本区 */}
        <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
          <h2 className="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-3">
            {subtitle}
          </h2>
          {paragraphs.map((txt, idx) => (
            <p
              key={idx}
              className={
                idx === 0
                  ? "lead !text-[1.05rem] !leading-[1.6] font-medium xl:!pr-5 lg:!pr-5"
                  : idx === paragraphs.length - 1
                  ? "!mb-6"
                  : undefined
              }
            >
              {txt}
            </p>
          ))}
          {buttonText && (
            <a
              href={buttonLink}
              className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
              target="_blank"
              rel="noopener noreferrer"
            >
              {buttonText}
            </a>
          )}
        </div>
        {/* 右侧：卡片区 */}
        <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
          {items.map((item, idx) => {
            let cardClass = "card";
            if (idx === 1) cardClass += " !mt-6 xl:!ml-16 lg:!ml-16";
            else if (idx === 2) cardClass += " !mt-6 xl:mx-6 lg:mx-6";
            else if (idx > 0) cardClass += " !mt-6";
            return (
              <div className={cardClass} key={item.no || idx}>
                <div className="card-body p-6">
                  <div className="flex flex-row">
                    <div>
                      <span className="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]">
                        <span className="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">
                          {(item.no || idx + 1).toString().padStart(2, "0")}
                        </span>
                      </span>
                    </div>
                    <div>
                      <h4 className="!mb-1">{item.item_title}</h4>
                      <p className="!mb-0">{item.item_description}</p>
                    </div>
                  </div>
                </div>
                {/*/.card-body */}
              </div>
            );
          })}
        </div>
        {/*/column */}
      </div>
    </>
  );
}