import { notFound } from "next/navigation";
import { joomlaService } from "@/services/joomlaService";
import { Breadcrumb } from "@/components/common/Breadcrumb";
import { hireWriterUrl, resolveImageUrl } from "@/lib/pageHelpers";

/**
 * Individual `/writers/{alias}` writer profile page.
 * Replicates the exact DOM structure and styling from Joomla template
 * `templates/GAH/html/com_contact/contact/default.php` and `writers.css`.
 */
export async function WriterProfilePage({ alias }: { alias: string }) {
  const writer = await joomlaService.getWriterDetailByAlias(alias);

  if (!writer) {
    notFound();
  }

  const writerImage = (await resolveImageUrl(writer.imageUrl)) || "/images/writer21.png";
  const ratingRound = Math.round(writer.rating || 5);
  const ratingImage = `/images/${ratingRound}writer-rating.png`;

  return (
    <div className="bg-slate-50 min-h-screen py-6 sm:py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
        <Breadcrumb
          items={[
            { label: "Writers", href: "/writers" },
            { label: writer.name },
          ]}
        />

        <div className="writer-details">
          {/* Card 1: Writer Profile Header */}
          <div className="writer-profile clearfix">
            <figure>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={writerImage} alt={writer.name} />
            </figure>
            <article>
              <h1>{writer.name}</h1>
              <p>{writer.shortBio || writer.degree}</p>
              <div className="rating">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={ratingImage} alt={`${writer.rating} rating`} />
              </div>
              <span>
                <strong>{writer.ordersFinished}</strong> Orders Finished
              </span>
              <span>
                <strong>{writer.ordersInProgress}</strong> Orders in Progress
              </span>
              <a href={hireWriterUrl(writer.name)}>Order Now</a>
            </article>
          </div>

          {/* Card 2: Subjects Covered & About Writer */}
          <div className="subjects">
            {writer.subjects && writer.subjects.length > 0 && (
              <>
                <h3>Subjects Covered</h3>
                <ul>
                  {writer.subjects.map((sub, i) => (
                    <li key={i}>{sub}</li>
                  ))}
                </ul>
              </>
            )}

            <h3>About Writer</h3>
            <p>{writer.bio}</p>
          </div>

          {/* Card 3: Writer Chat / Customer Feedback */}
          {writer.chatReviews && writer.chatReviews.length > 0 && (
            <div className="writer-chat">
              <div className="writer-feedback">
                {writer.chatReviews.map((review) => (
                  <div key={review.id} className="mb-4 last:mb-0">
                    <h4>{review.subject}</h4>
                    <article className="clearfix">
                      <div className="customer-message clearfix">
                        <figure>
                          {/* eslint-disable-next-line @next/next/no-img-element */}
                          <img src="/images/Student-Support.png" alt="Student" />
                        </figure>
                        <div className="right">
                          <small>
                            Customer’s feedback:
                            <span className="inline-flex items-center ml-1.5 gap-0.5 text-amber-400">
                              {Array.from({ length: review.rating || 5 }).map((_, i) => (
                                <span key={i}>★</span>
                              ))}
                            </span>
                          </small>
                          <blockquote className="before:bg-[url('/images/bloquote-icon.png')]">
                            {review.customerFeedback}
                          </blockquote>
                        </div>
                      </div>

                      <div className="writer-message clearfix">
                        <div className="left">
                          <small>writer feedback:</small>
                          <blockquote className="after:bg-[url('/images/blue-bloquote-icon.png')]">
                            {review.writerComment}
                          </blockquote>
                        </div>
                        <figure>
                          {/* eslint-disable-next-line @next/next/no-img-element */}
                          <img src={writerImage} alt={writer.name} />
                        </figure>
                      </div>
                    </article>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}