import { BarChart3, BellRing, CheckCircle2, ClipboardList, Clock3, UsersRound } from "lucide-react";

import { productThemes } from "@/components/products/product-theme";
import type { Product } from "@/data/products.data";

const productMetrics = {
  pureestate: ["2,458", "326", "84", "42"],
  buildpro: ["24", "186", "68%", "92%"],
  societypro: ["1,286", "94%", "184", "18.6L"],
} as const;

const productActivity = {
  pureestate: ["New enquiry assigned", "Site visit scheduled", "Follow-up completed"],
  buildpro: ["Milestone updated", "Booking task approved", "Collection follow-up sent"],
  societypro: ["Visitor pre-approved", "Amenity booking approved", "Vehicle record updated"],
} as const;

export default function ProductWorkflowPreview({ product }: { product: Product }) {
  const Icon = product.icon;
  const metrics = productMetrics[product.slug];
  const activity = productActivity[product.slug];
  const theme = productThemes[product.tone];

  return (
    <div className="h-full rounded-[20px] border border-[#e8edf6] bg-white p-4 shadow-[0_18px_50px_rgba(31,48,94,0.10)]">
      <div className="flex items-center justify-between border-b border-[#eef1f7] pb-3">
        <div className="flex items-center gap-2">
          <span className={`grid h-9 w-9 place-items-center rounded-xl ${theme.icon}`}><Icon size={18} /></span>
          <span>
            <strong className="block text-[12px] text-[#273454]">{product.name} workflow</strong>
            <small className="text-[9px] text-[#98a3b6]">Daily operations workspace</small>
          </span>
        </div>
        <BellRing size={15} className="text-[#8591a7]" />
      </div>
      <div className="mt-4 grid grid-cols-2 gap-2">
        {product.features.slice(0, 4).map((feature, index) => (
          <div key={feature} className="rounded-xl border border-[#edf1f6] bg-[#fbfcff] p-3">
            <p className="truncate text-[9px] font-bold text-[#8490a6]">{feature}</p>
            <strong className={`mt-1 block text-xl tracking-[-0.04em] ${theme.accentText}`}>{metrics[index]}</strong>
          </div>
        ))}
      </div>
      <div className="mt-3 rounded-xl border border-[#edf1f6] p-3">
        <h3 className="flex items-center gap-2 text-[10px] font-extrabold text-[#35415e]"><ClipboardList size={13} className={theme.accentText} />Recent activity</h3>
        <div className="mt-3 space-y-2.5">
          {activity.map((item, index) => (
            <p key={item} className="flex items-center gap-2 text-[9px] text-[#748198]">
              {index === 2 ? <CheckCircle2 size={13} className={theme.accentText} /> : <Clock3 size={13} className={theme.accentText} />}
              {item}
            </p>
          ))}
        </div>
      </div>
      <div className="mt-3 grid grid-cols-2 gap-2">
        <div className={`rounded-xl p-3 ${theme.icon}`}><UsersRound size={17} /><p className="mt-2 text-[10px] font-extrabold">{product.who[0]}</p></div>
        <div className={`rounded-xl p-3 ${theme.icon}`}><BarChart3 size={17} /><p className="mt-2 text-[10px] font-extrabold">{product.benefits[0]}</p></div>
      </div>
    </div>
  );
}