"use client";

import { useEffect, useState } from "react";
import type { BrandPulse, MarketingRole } from "@/lib/marketing";
import { formatDate } from "@/lib/marketing/labels";

type BrandPulseCardProps = {
  brandPulse: BrandPulse;
  role: MarketingRole;
  updatedByName: string;
  onUpdate: (nextPulse: BrandPulse) => void;
};

function RatingDots({ value }: { value: number }) {
  return (
    <div className="flex items-center gap-1">
      {Array.from({ length: 5 }).map((_, index) => {
        const active = index + 1 <= value;
        return <span key={index} className={`h-2.5 w-2.5 rounded-full ${active ? "bg-benell-brown" : "bg-benell-stroke"}`} />;
      })}
    </div>
  );
}

export default function BrandPulseCard({ brandPulse, role, updatedByName, onUpdate }: BrandPulseCardProps) {
  const isLead = role === "lead" || role === "owner";
  const [rating, setRating] = useState(brandPulse.rating1to5);
  const [notes, setNotes] = useState(brandPulse.notes);

  useEffect(() => {
    setRating(brandPulse.rating1to5);
    setNotes(brandPulse.notes);
  }, [brandPulse.notes, brandPulse.rating1to5]);

  return (
    <section className="rounded-benell border border-benell-stroke bg-benell-surface p-5 shadow-benell">
      <h2 className="text-h2 font-semibold">Brand Pulse</h2>
      <p className="text-label mt-1 text-benell-text-soft">Rúbrica mensual de 1 a 5.</p>

      <div className="mt-4 rounded-xl border border-benell-stroke bg-white p-4">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <p className="text-body font-semibold">Calificación actual: {brandPulse.rating1to5}/5</p>
          <RatingDots value={brandPulse.rating1to5} />
        </div>
        <p className="text-label mt-2 text-benell-text-soft">
          Última actualización: {formatDate(brandPulse.updatedAt)} · {updatedByName}
        </p>
        <p className="text-body mt-3 text-benell-text-soft">{brandPulse.notes}</p>
      </div>

      {isLead ? (
        <div className="mt-4 rounded-xl border border-benell-stroke bg-white p-4">
          <p className="text-label font-semibold">Actualizar Brand Pulse</p>
          <label className="mt-2 block space-y-1">
            <span className="text-label text-benell-text-soft">Rating 1-5</span>
            <select
              value={rating}
              onChange={(event) => setRating(Number(event.target.value) as 1 | 2 | 3 | 4 | 5)}
              className="text-body w-full rounded-xl border border-benell-stroke bg-white px-3 py-2"
            >
              {[1, 2, 3, 4, 5].map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
          </label>

          <label className="mt-3 block space-y-1">
            <span className="text-label text-benell-text-soft">Notas</span>
            <textarea
              value={notes}
              onChange={(event) => setNotes(event.target.value)}
              rows={3}
              className="text-body w-full rounded-xl border border-benell-stroke bg-white px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-benell-brown"
            />
          </label>

          <button
            type="button"
            onClick={() =>
              onUpdate({
                ...brandPulse,
                rating1to5: rating,
                notes,
                updatedAt: new Date().toISOString(),
              })
            }
            className="mt-3 rounded-pill bg-benell-brown px-3 py-2 text-label font-semibold text-white"
          >
            Guardar
          </button>
        </div>
      ) : null}
    </section>
  );
}
