import React from "react";
import Image from "next/image";
import Link from "next/link";
import { JoomlaArticle, ServiceReview, PricingConfig } from "@/services/joomlaService";
import { CalculatorConfig } from "@/types/home";
import calculatorConstants from "@/data/calculator-constants.json";
import { PricingCalculator } from "./PricingCalculator";
import { PricingReviewsSlider } from "./PricingReviewsSlider";
import { PricingFaqSection, FaqItem } from "./PricingFaqSection";

interface PricingPageViewProps {
  article: JoomlaArticle;
  pricingConfig: PricingConfig | null;
  calculatorConfig: CalculatorConfig;
  reviews: ServiceReview[];
}

function parseFaqColumns(html: string): { leftFaqs: FaqItem[]; rightFaqs: FaqItem[] } {
  const leftFaqs: FaqItem[] = [];
  const rightFaqs: FaqItem[] = [];

  const faqLists = html.match(/<ul\s+class="all-faq">([\s\S]*?)<\/ul>/gi);
  if (faqLists && faqLists.length >= 2) {
    const parseList = (listHtml: string): FaqItem[] => {
      const items: FaqItem[] = [];
      const liMatches = listHtml.match(/<li>([\s\S]*?)<\/li>/gi) || [];
      for (const li of liMatches) {
        const qMatch = li.match(/<span\s+class="faqtop">([\s\S]*?)<\/span>/i);
        const aMatch = li.match(/<article\s+class="faq-box">([\s\S]*?)<\/article>/i);
        if (qMatch && aMatch) {
          items.push({
            question: qMatch[1].replace(/<[^>]*>/g, "").trim(),
            answer: aMatch[1].replace(/<[^>]*>/g, "").trim(),
          });
        }
      }
      return items;
    };

    leftFaqs.push(...parseList(faqLists[0]));
    rightFaqs.push(...parseList(faqLists[1]));
  }

  if (leftFaqs.length === 0) {
    leftFaqs.push(
      {
        question: "How to Pay for Services I Take?",
        answer:
          "You can follow a simple payment process and pay for the services you avail of. All you need to do is fill in your details, choose a payment mode, and click the 'pay' button.",
      },
      {
        question: "Can I Avail Discounts on Services?",
        answer:
          "Yes, we have numerous discounts on our services to ensure we are affordable for students. So, you can choose the one most suitable for you and go with it.",
      },
      {
        question: "What If My Payment Is Stuck?",
        answer:
          "This is a rare situation, but if it happens, you need not panic as it will be resolved in 2 or 3 working days, or our technicians will look into it.",
      },
      {
        question: "Can My Payment Details Be Leaked?",
        answer:
          "With Global Assignment Help, you need not bother about your details regarding payment or identity; we never share anything with a third party. As a result, you can be assured of complete safety.",
      }
    );
  }

  if (rightFaqs.length === 0) {
    rightFaqs.push(
      {
        question: "What Is Your Pricing Model?",
        answer:
          "We have a simple pricing model. Our services' pricing depends on the number of words or pages required and the deadline for submitting the same.",
      },
      {
        question: "Are Your Payment Modes Safe?",
        answer:
          "We have a completely safe payment gateway to avoid getting into any trouble. We use PayPal mode and accept credit and debit cards too.",
      },
      {
        question: "What If My Amount Is Deducted But Not Shown?",
        answer:
          "If your amount is accidentally deducted, it will be refunded in 2-3 days, and if the order is placed but not shown, it will be updated in a short period.",
      },
      {
        question: "Can I Get Refund If I am Not Satisfied with Your Work?",
        answer:
          "If even after our unlimited free revisions, you are not satisfied with our work, you can ask for refund and we will get that done in a hassle-free manner.",
      }
    );
  }

  return { leftFaqs, rightFaqs };
}

export function PricingPageView({
  article,
  pricingConfig,
  calculatorConfig,
  reviews,
}: PricingPageViewProps) {
  const priceCountry = calculatorConfig.priceCountry || "India";
  const rate = pricingConfig?.currencyRates.find((row) => row.country === priceCountry);

  const currency = rate?.currency || "INR";
  const rateValue = rate?.value || 95.94;
  const usdBase = Number(calculatorConstants.currency["1"]?.price) || 75;
  const selectedPrice = rate ? usdBase / rate.value : 75 / 95.94;
  const staticPrice = pricingConfig?.staticPrice || 512;
  const discountPercent = pricingConfig?.discountPercent || 25;

  const customPrice = Math.round((staticPrice / selectedPrice) * 100) / 100;
  const estimatedPrice =
    Math.round(((100 * customPrice) / (100 - discountPercent)) * 100) / 100;

  // Goodies calculations matching ContentHelper::convertCurrency formula
  const unlimitedRevisionsPrice = Math.round(((31 * 70) / selectedPrice) * 100) / 100;
  const editingProofreadingPrice = Math.round(((42 * 70) / selectedPrice) * 100) / 100;
  const turnitinReportPrice = Math.round(((42 * 70) / selectedPrice) * 100) / 100;
  const totalFreeGoodiesPrice = Math.round(((115 * 70) / selectedPrice) * 100) / 100;

  const orderCtaUrl =
    calculatorConfig.orderCtaUrl || "https://customerpanel.globalassignmenthelp.com/order";

  const rawArticleHtml = [article.introtext, article.fulltext].filter(Boolean).join("\n");
  const { leftFaqs, rightFaqs } = parseFaqColumns(rawArticleHtml);

  return (
    <div className="price_main">
      {/* 1. Hero Section */}
      <div className="price-banner">
        <div className="container">
          <div className="price-left space60">
            <h1 className="price-title">
              Best Paper Writing Help Starting at Only{" "}
              <span>
                {currency} {customPrice.toFixed(2)}
              </span>
            </h1>
            <p className="price-subtitle">
              Professional Academic Help at Pocket-Friendly Prices!
            </p>

            <div className="features">
              <div className="feature-list">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="36.241"
                  height="31.72"
                  viewBox="0 0 44.241 39.72"
                >
                  <g transform="translate(0 0)">
                    <path
                      d="M-133.693,2.047a3.4,3.4,0,0,1,3.568-3.2,3.4,3.4,0,0,1,3.569,3.2,3.4,3.4,0,0,1-3.569,3.2A3.4,3.4,0,0,1-133.693,2.047Zm-37.105,0a3.4,3.4,0,0,1,3.568-3.2,3.4,3.4,0,0,1,3.568,3.2,3.4,3.4,0,0,1-3.568,3.2A3.4,3.4,0,0,1-170.8,2.047ZM-152.246-1.8A3.4,3.4,0,0,1-148.677-5a3.4,3.4,0,0,1,3.568,3.2,3.4,3.4,0,0,1-3.568,3.2A3.4,3.4,0,0,1-152.246-1.8Zm37.248,32.7a2.53,2.53,0,0,0-1.849-2.454l-8.629-2.181a13.315,13.315,0,0,0-2.316-.361v-1.63a7.481,7.481,0,0,0,3.7-6.275V13.821a4.945,4.945,0,0,0-3.324-4.664A9.954,9.954,0,0,0-131.95,3.2a4.8,4.8,0,0,0-4.686,4.686v.44a5.138,5.138,0,0,0-1.077,3.123v6.377a7.487,7.487,0,0,0,3.7,6.276v1.63a13.344,13.344,0,0,0-2.316.361l-8.63,2.181a2.529,2.529,0,0,0-1.849,2.454V35.9h18.258Zm-4.994-6.405a1.947,1.947,0,0,1-1.427,1.8V9.1h2.141V8.128l.2-.187a3.633,3.633,0,0,0,1.224-2.691A4.085,4.085,0,0,0-150.1,1.406a4.084,4.084,0,0,0-4.284,3.844,3.627,3.627,0,0,0,1.226,2.687l.2.188v.969h2.139V7.054a1.946,1.946,0,0,1-1.426-1.8,2.153,2.153,0,0,1,2.14-1.918A2.154,2.154,0,0,1-147.96,5.251Zm-2.139.64a.718.718,0,0,0,.67-.461.717.717,0,0,0-.191-.791.716.716,0,0,0-.806-.1.715.715,0,0,0-.386.715h0A.682.682,0,0,0-150.1,5.891Zm16.83,3.343a1.935,1.935,0,0,1,1.721-2.061,2.044,2.044,0,0,1,2.141,1.922,1.933,1.933,0,0,1-1.864,1.932h-.071A1.934,1.934,0,0,1-133.269,9.233Zm1.148-.185a.644.644,0,0,0,.573.688.681.681,0,0,0,.715-.641.645.645,0,0,0-.622-.644h-.024A.644.644,0,0,0-132.122,9.048ZM-170.5,10.121a1.931,1.931,0,0,1,0-2.054,1.934,1.934,0,0,1,1.849-.9,2.044,2.044,0,0,1,2.141,1.922,2.042,2.042,0,0,1-2.141,1.921,1.939,1.939,0,0,1-.212.012A1.931,1.931,0,0,1-170.5,10.121Zm1.522-1.742a.715.715,0,0,0-.386.715.681.681,0,0,0,.714.641.719.719,0,0,0,.671-.461.72.72,0,0,0-.191-.791.717.717,0,0,0-.48-.184A.717.717,0,0,0-168.981,8.379Zm23.925-8.564L-143.038-2l1.009.905L-144.048.721Zm-13.117-.906L-157.164-2l2.018,1.812-1.009.905Zm7.358-.706V-5h1.427v3.2Z"
                      transform="translate(172.222 5)"
                      fill="#212121"
                    />
                  </g>
                </svg>
                <p className="feature-content">
                  Ph.D. Writers<span> For Best Assistance</span>
                </p>
              </div>

              <div className="feature-list">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  id="review"
                  width="35.847"
                  height="35.822"
                  viewBox="0 0 35.847 35.822"
                >
                  <path
                    id="Path_73926"
                    data-name="Path 73926"
                    d="M27.482,177.821a2.392,2.392,0,0,0-2.39-2.39H20.91v-5.078a2.689,2.689,0,0,0-5.377,0v2.441L12.9,175.431H.6a.6.6,0,0,0-.6.6v14.339a.6.6,0,0,0,.6.6h24.5a2.38,2.38,0,0,0,1.564-4.182,2.358,2.358,0,0,0,0-3.585,2.358,2.358,0,0,0,0-3.585,2.376,2.376,0,0,0,.826-1.792ZM1.194,176.626H4.779V189.77H1.194ZM9.559,189.77H5.974V176.626H9.559Zm15.534-9.559a1.195,1.195,0,0,1,0,2.39H22.105V183.8h2.987a1.195,1.195,0,0,1,0,2.39H22.105v1.195h2.987a1.195,1.195,0,1,1,0,2.39H10.754V176.626h2.39a.6.6,0,0,0,.422-.175l2.987-2.987a.6.6,0,0,0,.175-.422v-2.689a1.494,1.494,0,0,1,2.987,0v5.676a.6.6,0,0,0,.6.6h4.78a1.195,1.195,0,1,1,0,2.39H22.105v1.195Zm0,0"
                    transform="translate(0.001 -155.143)"
                    fill="#434343"
                  />
                  <path
                    id="Path_73927"
                    data-name="Path 73927"
                    d="M154.953,7.653l-.647,3.568a.6.6,0,0,0,.854.642l3.426-1.705,3.426,1.705a.608.608,0,0,0,.267.062.6.6,0,0,0,.588-.7l-.647-3.568,2.746-2.532a.6.6,0,0,0-.324-1.031l-3.822-.526L159.117.3a.622.622,0,0,0-1.059,0l-1.7,3.266-3.822.526a.6.6,0,0,0-.324,1.031Zm1.869-2.948a.6.6,0,0,0,.449-.316l1.316-2.524L159.9,4.39a.6.6,0,0,0,.449.316l2.874.4L161.169,7a.6.6,0,0,0-.183.546l.493,2.719-2.626-1.307a.6.6,0,0,0-.532,0l-2.626,1.307.493-2.719A.6.6,0,0,0,156,7l-2.056-1.9Zm0,0"
                    transform="translate(-140.663 -0.001)"
                    fill="#ffc410"
                  />
                </svg>
                <p className="feature-content">
                  0% Plagiarism <span>In Assignments</span>
                </p>
              </div>

              <div className="feature-list">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="30.363"
                  height="30.349"
                  viewBox="0 0 36.363 36.349"
                >
                  <g transform="translate(0.01)">
                    <path
                      d="M29.316,31.663V22.281H28.144v9.381h-6.45v1.759a1.759,1.759,0,0,1-3.518,0V15.832a2.9,2.9,0,0,0-.6-1.759h8.81a1.761,1.761,0,0,1,1.759,1.759v4.1h1.173v-4.1A2.935,2.935,0,0,0,26.384,12.9H18.412a10.017,10.017,0,0,0-2.6-2.789,1.745,1.745,0,0,0-.9-3.048,6.378,6.378,0,0,0,1.5-4.131V1.76a1.759,1.759,0,1,0-3.518,0,.587.587,0,0,1-1.173,0,1.759,1.759,0,1,0-3.518,0,.586.586,0,1,1-1.173,0,1.759,1.759,0,0,0-3.518,0V2.933a6.378,6.378,0,0,0,1.5,4.131,1.746,1.746,0,0,0-.9,3.048,9.951,9.951,0,0,0,3.5,17.739V29.9a2.935,2.935,0,0,0,2.932,2.932H17v.586a2.935,2.935,0,0,0,2.932,2.932H33.421a2.935,2.935,0,0,0,2.932-2.932V31.663ZM4.691,1.76a.586.586,0,1,1,1.173,0,1.759,1.759,0,1,0,3.518,0,.586.586,0,1,1,1.173,0,1.759,1.759,0,0,0,3.518,0,.587.587,0,1,1,1.173,0V2.933a5.227,5.227,0,0,1-1.971,4.1H6.661a5.227,5.227,0,0,1-1.971-4.1Zm.586,6.45h9.381a.587.587,0,0,1,0,1.173H5.277a.587.587,0,1,1,0-1.173Zm-4.1,9.968a8.8,8.8,0,0,1,4.41-7.622h8.769A8.817,8.817,0,0,1,16.99,12.9H15.244a2.935,2.935,0,0,0-2.932,2.932v.586H5.863v1.173A1.761,1.761,0,0,1,7.622,19.35v7.3a8.8,8.8,0,0,1-6.449-8.473ZM8.8,29.9V19.35a2.9,2.9,0,0,0-.6-1.759h4.119V29.9a1.759,1.759,0,1,1-3.518,0Zm4.089,1.759a2.9,2.9,0,0,0,.6-1.759V15.832a1.759,1.759,0,0,1,3.518,0V31.663Zm22.3,1.759a1.761,1.761,0,0,1-1.759,1.759H22.279a2.916,2.916,0,0,0,.588-1.759v-.586H35.18v.586Z"
                      transform="translate(0 -0.001)"
                      fill="#212121"
                    />
                    <path
                      d="M169.932,93.751a1.761,1.761,0,0,0-1.759,1.759,1.74,1.74,0,0,0,.266.919l-3.213,5.048a1.693,1.693,0,0,0-1.511.174l-1.5-.9a1.741,1.741,0,0,0,.1-.549,1.759,1.759,0,1,0-3.518,0,1.738,1.738,0,0,0,.213.821l-1.874,2.249a1.8,1.8,0,1,0,.862.8l1.874-2.249a1.742,1.742,0,0,0,1.623-.139l1.5.9a1.741,1.741,0,0,0-.1.549,1.759,1.759,0,0,0,3.518,0,1.739,1.739,0,0,0-.266-.919l3.212-5.048a1.757,1.757,0,1,0,.572-3.418Z"
                      transform="translate(-135.339 -82.024)"
                      fill="#ffe066"
                    />
                  </g>
                </svg>
                <p className="feature-content">
                  <span className="free">FREE </span>Turnitin report
                </p>
              </div>
            </div>

            <i className="price-banner-img" />
          </div>

          <div className="price-right-cal">
            <div className="calculator">
              <PricingCalculator
                orderCtaUrl={orderCtaUrl}
                currency={currency}
                initialCustomPrice={customPrice}
                initialEstimatedPrice={estimatedPrice}
                discountPercent={discountPercent}
                rateValue={rateValue}
              />
            </div>
          </div>
        </div>
      </div>

      {/* 2. Trusted Rating Strip */}
      <div className="trusted-rating">
        <div className="container">
          <p className="text">
            We <span>Deliver Satisfactory Results</span> to Students from Across the Globe in Every Subject!
          </p>
          <div className="trust-icon">
            <div className="content">
              <i className="rating-star" />
              <i className="rating-star" />
              <i className="rating-star" />
              <i className="rating-star" />
              <i className="rating-star rating-half" />
              <p className="rating-value">RATING VALUE</p>
              <p className="rate-no">
                <span>4.8</span>/5
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* 3. Free Goodies Section */}
      <div className="free-inclusion">
        <div className="container">
          <p className="tilte-head">Free Goodies</p>
          <span className="subtitle">
            Save Some Extra Bucks While You Score Top Grades
          </span>
          <div className="inclusion-box">
            <div className="inclusion-feature">
              <div className="boxes">
                {/* The live `pricing.php` markup has no width/height on this
                    `<img>` at all — it just renders at the SVG's own
                    intrinsic size (~165x128, not square). A previous forced
                    `90x90` didn't match that real ~1.29:1 ratio, which is
                    what triggered Next's "width or height modified, but not
                    the other" warning (Tailwind's preflight `img{height:
                    auto}` was overriding the mismatched `height` attribute). */}
                <Image
                  src="/images/free-inclusion-3.svg"
                  alt="free-inclusion"
                  width={166}
                  height={128}
                />
                <p>Unlimited Revisions</p>
                <s>
                  {currency} {unlimitedRevisionsPrice.toFixed(2)}
                </s>
              </div>
              <div className="boxes">
                <Image
                  src="/images/free-inclusion-2.svg"
                  alt="free-inclusion"
                  width={165}
                  height={128}
                />
                <p>Editing/Proofreading</p>
                <s>
                  {currency} {editingProofreadingPrice.toFixed(2)}
                </s>
              </div>
              <div className="boxes">
                <Image
                  src="/images/free-inclusion-1.svg"
                  alt="free-inclusion"
                  width={165}
                  height={128}
                />
                <p>Turnitin Report</p>
                <s>
                  {currency} {turnitinReportPrice.toFixed(2)}
                </s>
              </div>
            </div>
            <p className="amnt">
              <s>
                {currency} {totalFreeGoodiesPrice.toFixed(2)}
              </s>
              FREE
            </p>
            <a href={orderCtaUrl} className="order-now-btn">
              ORDER NOW
            </a>
          </div>
        </div>
      </div>

      {/* 4. Secure Payment Process */}
      <div className="secure-pay">
        <div className="container">
          <p className="title">Secure Payment Process</p>
          <p className="subtitle">
            We have an assignment help price system that is compatible and
            comfortable for all. In addition, we respect and follow all security
            measures to ensure a safe payment process for our customers. Thus, we
            accept all cards from credit to debit through the secure PayPal
            platform.
          </p>
          <div className="payment-method">
            <div className="boxes">
              <p>Payment secure</p>
              <ul className="pay-list pay-first">
                <li>
                  <Image
                    src="/images/SSL-Secure-Connection.png"
                    alt="SSL"
                    width={120}
                    height={40}
                    style={{ width: "auto", height: "auto" }}
                  />
                </li>
                <li>
                  <Image
                    src="/images/dmca-pay.png"
                    alt="dmca"
                    width={120}
                    height={40}
                    style={{ width: "auto", height: "auto" }}
                  />
                </li>
              </ul>
            </div>
            <div className="boxes">
              <p>Supported methods</p>
              <ul className="pay-list">
                <li>
                  <Image
                    src="/images/paypal.png"
                    alt="PayPal"
                    width={70}
                    height={30}
                    style={{ width: "auto", height: "auto" }}
                  />
                </li>
                <li>
                  <Image
                    src="/images/visa.png"
                    alt="Visa"
                    width={70}
                    height={30}
                    style={{ width: "auto", height: "auto" }}
                  />
                </li>
                <li>
                  <Image
                    src="/images/bank-transfer.png"
                    alt="Bank Transfer"
                    width={70}
                    height={30}
                    style={{ width: "auto", height: "auto" }}
                  />
                </li>
                <li>
                  <Image
                    src="/images/mastercard.png"
                    alt="Mastercard"
                    width={70}
                    height={30}
                    style={{ width: "auto", height: "auto" }}
                  />
                </li>
                <li>
                  <Image
                    src="/images/american-express.png"
                    alt="American Express"
                    width={70}
                    height={30}
                    style={{ width: "auto", height: "auto" }}
                  />
                </li>
                <li>
                  <Image
                    src="/images/maestro-payment.png"
                    alt="Maestro"
                    width={70}
                    height={30}
                    style={{ width: "auto", height: "auto" }}
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* 5. Reviews Section */}
      <PricingReviewsSlider reviews={reviews} />

      {/* 6. FAQ Section */}
      <PricingFaqSection leftFaqs={leftFaqs} rightFaqs={rightFaqs} />
    </div>
  );
}
