"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";

interface IncludedService {
  name: string;
  description: string | null;
}

interface ActiveOffer {
  id: string;
  public_name: string;       // micro offer public name — NOT shown to client (T-05-10)
  offer_name: string;        // macro public_name — shown as heading
  offer_type: string;        // una_tantum | retainer
  cumulative_price: string;  // sum of service prices
  accepted_total: string | null;
  services: IncludedService[];
}

interface OffersSectionProps {
  offers: ActiveOffer[];
}

function OfferCard({ offer }: { offer: ActiveOffer }) {
  const [open, setOpen] = useState(false);
  const price = parseFloat(offer.cumulative_price);
  const hasPrice = price > 0;
  const hasServices = offer.services.length > 0;

  return (
    <div className="bg-card rounded-xl border border-border-light shadow-card overflow-hidden">
      {/* Main info rows — accento a barra sinistra (mock) */}
      <div className="p-5">
        <div className="border-l-2 border-primary pl-3">
          {/* Heading: macro public name */}
          <p className="text-sm font-bold text-foreground">{offer.offer_name}</p>

          <div className="mt-2 space-y-1.5">
            {/* "Valore incluso" — hidden when 0 */}
            {hasPrice && (
              <div className="flex items-center justify-between text-xs">
                <span className="text-muted-foreground">Valore incluso</span>
                <span className="font-mono text-foreground">€{price.toFixed(2)}</span>
              </div>
            )}

            {/* "Prezzo finale" */}
            {offer.accepted_total && (
              <div className="flex items-center justify-between text-xs">
                <span className="font-semibold text-foreground">Prezzo finale</span>
                <span className="text-sm font-bold text-primary">
                  €{parseFloat(offer.accepted_total).toFixed(2)}
                </span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Accordion "Cosa è compreso" — only when there are services */}
      {hasServices && (
        <div className="border-t border-border-light">
          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            className="w-full flex items-center justify-between px-5 py-2.5 text-xs font-semibold text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
            aria-expanded={open}
          >
            <span>Cosa è compreso</span>
            <ChevronDown
              className={`w-3.5 h-3.5 text-muted-foreground transition-transform duration-200 ${open ? "rotate-180" : ""}`}
            />
          </button>

          {open && (
            <ul className="px-5 pb-3 space-y-2">
              {offer.services.map((svc, i) => (
                <li key={i} className="flex flex-col gap-0.5">
                  <span className="text-xs font-medium text-foreground">{svc.name}</span>
                  {svc.description && (
                    <span className="text-[11px] text-muted-foreground leading-snug">{svc.description}</span>
                  )}
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </div>
  );
}

export function OffersSection({ offers }: OffersSectionProps) {
  if (offers.length === 0) return null;

  return (
    <div className="space-y-3">
      {offers.map((offer) => (
        <OfferCard key={offer.id} offer={offer} />
      ))}
    </div>
  );
}
