"use client";

import {
  BookOpenCheck,
  Building2,
  CalendarCheck2,
  CircleDollarSign,
  ClipboardCheck,
  Construction,
  FileBarChart,
  Home,
  ShieldCheck,
  Target,
  UsersRound,
  type LucideIcon,
} from "lucide-react";
import { useState } from "react";

import type { Locale } from "@/lib/locales";
import type { ProductSlug } from "@/lib/routes";

type LocalText = Record<Locale, string>;

type FlowCard = {
  icon: LucideIcon;
  summary: LocalText;
  title: LocalText;
};

type FlowConfig = {
  accent: string;
  eyebrow: LocalText;
  intro: LocalText;
  cards: readonly FlowCard[];
  soft: string;
  title: LocalText;
};

const text = (en: string, hi: string, gu: string): LocalText => ({ en, hi, gu });

const flows: Record<ProductSlug, FlowConfig> = {
  pureestate: {
    accent: "#3678DC",
    soft: "#EAF3FF",
    eyebrow: text("Role-led CRM", "भूमिका-आधारित CRM", "ભૂમિકા આધારિત CRM"),
    title: text(
      "Give every sales role a clearer operating flow.",
      "हर सेल्स भूमिका को साफ ऑपरेटिंग फ्लो दें।",
      "દરેક સેલ્સ ભૂમિકાને સ્પષ્ટ ઓપરેટિંગ ફ્લો આપો.",
    ),
    intro: text(
      "Move from enquiry to booking with focused CRM steps, visible ownership, and finance-ready reporting.",
      "इंक्वायरी से बुकिंग तक साफ CRM स्टेप, जिम्मेदारी और फाइनेंस-रेडी रिपोर्टिंग के साथ काम बढ़ाएं।",
      "ઇન્ક્વાયરીથી બુકિંગ સુધી સ્પષ્ટ CRM સ્ટેપ, જવાબદારી અને ફાઇનાન્સ-રેડી રિપોર્ટિંગ સાથે કામ આગળ વધારો.",
    ),
    cards: [
      {
        icon: UsersRound,
        title: text("Lead Capture", "लीड कैप्चर", "લીડ કૅપ્ચર"),
        summary: text("Collect enquiries from website, walk-ins, brokers, and campaigns in one queue.", "वेबसाइट, वॉक-इन, ब्रोकर और कैंपेन की इंक्वायरी एक क्यू में रखें।", "વેબસાઇટ, વોક-ઇન, બ્રોકર અને કેમ્પેઇનની ઇન્ક્વાયરી એક ક્યુમાં રાખો."),
      },
      {
        icon: CalendarCheck2,
        title: text("Follow-up Planning", "फॉलो-अप प्लानिंग", "ફોલો-અપ પ્લાનિંગ"),
        summary: text("Prioritize hot calls, visits, reminders, and missed follow-ups for the sales team.", "हॉट कॉल, विजिट, रिमाइंडर और मिस्ड फॉलो-अप को प्राथमिकता दें।", "હોટ કોલ, વિઝિટ, રિમાઇન્ડર અને મિસ્ડ ફોલો-અપને પ્રાથમિકતા આપો."),
      },
      {
        icon: Home,
        title: text("Property Matching", "प्रॉपर्टी मैचिंग", "પ્રોપર્ટી મેચિંગ"),
        summary: text("Match buyer budgets, locations, and unit needs with available inventory faster.", "बायर बजट, लोकेशन और यूनिट जरूरत को उपलब्ध इन्वेंटरी से जल्दी मिलाएं।", "ખરીદદારનું બજેટ, લોકેશન અને યુનિટ જરૂરિયાત ઉપલબ્ધ ઇન્વેન્ટરી સાથે ઝડપથી મેળવો."),
      },
      {
        icon: Target,
        title: text("Sales Pipeline", "सेल्स पाइपलाइन", "સેલ્સ પાઇપલાઇન"),
        summary: text("Track every deal stage from enquiry, site visit, negotiation, booking, and closure.", "हर डील स्टेज को इंक्वायरी, साइट विजिट, नेगोशिएशन, बुकिंग और क्लोजर तक ट्रैक करें।", "દરેક ડીલ સ્ટેજને ઇન્ક્વાયરી, સાઇટ વિઝિટ, નેગોશિએશન, બુકિંગ અને ક્લોઝર સુધી ટ્રેક કરો."),
      },
      {
        icon: CircleDollarSign,
        title: text("Finance Overview", "फाइनेंस ओवरव्यू", "ફાઇનાન્સ ઓવરવ્યુ"),
        summary: text("See booking value, pending receipts, broker payouts, and collection health together.", "बुकिंग वैल्यू, पेंडिंग रसीद, ब्रोकर पेआउट और कलेक्शन हेल्थ साथ देखें।", "બુકિંગ મૂલ્ય, પેન્ડિંગ રસીદ, બ્રોકર પેઆઉટ અને કલેક્શન હેલ્થ સાથે જુઓ."),
      },
      {
        icon: FileBarChart,
        title: text("Reports & Team Summary", "रिपोर्ट और टीम सारांश", "રિપોર્ટ અને ટીમ સારાંશ"),
        summary: text("Review lead sources, salesperson performance, conversion, and manager summaries.", "लीड सोर्स, सेल्सपर्सन परफॉर्मेंस, कन्वर्जन और मैनेजर सारांश देखें।", "લીડ સોર્સ, સેલ્સપર્સન પરફોર્મન્સ, કન્વર્ઝન અને મેનેજર સારાંશ જુઓ."),
      },
    ],
  },
  buildpro: {
    accent: "#14B88A",
    soft: "#E7F0FF",
    eyebrow: text("Project lifecycle", "प्रोजेक्ट लाइफसाइकिल", "પ્રોજેક્ટ લાઇફસાઇકલ"),
    title: text(
      "Connect site work, inventory, bookings, and collections.",
      "साइट काम, इन्वेंटरी, बुकिंग और कलेक्शन को जोड़ें।",
      "સાઇટ કામ, ઇન્વેન્ટરી, બુકિંગ અને કલેક્શનને જોડો.",
    ),
    intro: text(
      "Keep project managers, sales teams, finance, and leadership aligned without asking for backend data.",
      "बैकेंड डेटा के बिना प्रोजेक्ट मैनेजर, सेल्स, फाइनेंस और लीडरशिप को एक साथ रखें।",
      "બેકએન્ડ ડેટા વિના પ્રોજેક્ટ મેનેજર, સેલ્સ, ફાઇનાન્સ અને લીડરશિપને એક સાથે રાખો.",
    ),
    cards: [
      {
        icon: Construction,
        title: text("Project Planning", "प्रोजेक्ट प्लानिंग", "પ્રોજેક્ટ પ્લાનિંગ"),
        summary: text("Plan project phases, milestones, dependencies, and responsible teams from one board.", "प्रोजेक्ट फेज, माइलस्टोन, डिपेंडेंसी और जिम्मेदार टीम एक बोर्ड से प्लान करें।", "પ્રોજેક્ટ ફેઝ, માઇલસ્ટોન, ડિપેન્ડન્સી અને જવાબદાર ટીમ એક બોર્ડથી પ્લાન કરો."),
      },
      {
        icon: Building2,
        title: text("Unit Inventory", "यूनिट इन्वेंटरी", "યુનિટ ઇન્વેન્ટરી"),
        summary: text("View available, booked, sold, blocked, and handover units by project and tower.", "प्रोजेक्ट और टावर के हिसाब से उपलब्ध, बुक्ड, सोल्ड, ब्लॉक्ड और हैंडओवर यूनिट देखें।", "પ્રોજેક્ટ અને ટાવર પ્રમાણે ઉપલબ્ધ, બુક થયેલ, વેચાયેલ, બ્લોક અને હેન્ડઓવર યુનિટ જુઓ."),
      },
      {
        icon: BookOpenCheck,
        title: text("Booking Management", "बुकिंग मैनेजमेंट", "બુકિંગ મેનેજમેન્ટ"),
        summary: text("Handle token receipts, agreement drafts, buyer records, and booking approvals.", "टोकन रसीद, एग्रीमेंट ड्राफ्ट, बायर रिकॉर्ड और बुकिंग अप्रूवल संभालें।", "ટોકન રસીદ, એગ્રીમેન્ટ ડ્રાફ્ટ, ખરીદદાર રેકોર્ડ અને બુકિંગ અપ્રુવલ સંભાળો."),
      },
      {
        icon: Target,
        title: text("Site Progress", "साइट प्रगति", "સાઇટ પ્રગતિ"),
        summary: text("Track slab, masonry, finishing, quality checks, and photo-based site updates.", "स्लैब, मेसनरी, फिनिशिंग, क्वालिटी चेक और फोटो-बेस्ड साइट अपडेट ट्रैक करें।", "સ્લેબ, મેસનરી, ફિનિશિંગ, ક્વોલિટી ચેક અને ફોટો આધારિત સાઇટ અપડેટ ટ્રેક કરો."),
      },
      {
        icon: ClipboardCheck,
        title: text("Team Tasks", "टीम टास्क", "ટીમ ટાસ્ક"),
        summary: text("Assign sales, engineering, finance, approval, and customer support work clearly.", "सेल्स, इंजीनियरिंग, फाइनेंस, अप्रूवल और कस्टमर सपोर्ट काम साफ असाइन करें।", "સેલ્સ, એન્જિનિયરિંગ, ફાઇનાન્સ, અપ્રુવલ અને કસ્ટમર સપોર્ટ કામ સ્પષ્ટ સોંપો."),
      },
      {
        icon: FileBarChart,
        title: text("Reports & Collection Summary", "रिपोर्ट और कलेक्शन सारांश", "રિપોર્ટ અને કલેક્શન સારાંશ"),
        summary: text("Review project performance, sales summary, collection trend, and management exports.", "प्रोजेक्ट परफॉर्मेंस, सेल्स सारांश, कलेक्शन ट्रेंड और मैनेजमेंट एक्सपोर्ट देखें।", "પ્રોજેક્ટ પરફોર્મન્સ, સેલ્સ સારાંશ, કલેક્શન ટ્રેન્ડ અને મેનેજમેન્ટ એક્સપોર્ટ જુઓ."),
      },
    ],
  },
  societypro: {
    accent: "#278D61",
    soft: "#E8F8EF",
    eyebrow: text("Resident service flow", "रेजिडेंट सेवा फ्लो", "રહેવાસી સેવા ફ્લો"),
    title: text(
      "Make daily society operations visible and service-led.",
      "रोज की सोसायटी ऑपरेशन को साफ और सेवा-केंद्रित बनाएं।",
      "રોજિંદી સોસાયટી કામગીરીને સ્પષ્ટ અને સેવા કેન્દ્રિત બનાવો.",
    ),
    intro: text(
      "Give admins one flow for resident records, complaints, visitors, payments, notices, and amenities.",
      "रेजिडेंट रिकॉर्ड, शिकायत, विजिटर, पेमेंट, नोटिस और सुविधा के लिए एडमिन को एक फ्लो दें।",
      "રહેવાસી રેકોર્ડ, ફરિયાદ, વિઝિટર, પેમેન્ટ, નોટિસ અને સુવિધા માટે એડમિનને એક ફ્લો આપો.",
    ),
    cards: [
      {
        icon: UsersRound,
        title: text("Resident Records", "रेजिडेंट रिकॉर्ड", "રહેવાસી રેકોર્ડ"),
        summary: text("Maintain owners, tenants, family members, staff, KYC, and contact records.", "ओनर, किरायेदार, परिवार, स्टाफ, KYC और संपर्क रिकॉर्ड संभालें।", "માલિક, ભાડૂત, પરિવાર, સ્ટાફ, KYC અને સંપર્ક રેકોર્ડ સંભાળો."),
      },
      {
        icon: ClipboardCheck,
        title: text("Complaint Tracking", "शिकायत ट्रैकिंग", "ફરિયાદ ટ્રેકિંગ"),
        summary: text("Record complaints, assign staff, track SLA, and notify residents after resolution.", "शिकायत दर्ज करें, स्टाफ असाइन करें, SLA ट्रैक करें और समाधान के बाद सूचना दें।", "ફરિયાદ નોંધો, સ્ટાફ સોંપો, SLA ટ્રેક કરો અને ઉકેલ પછી જાણ કરો."),
      },
      {
        icon: ShieldCheck,
        title: text("Visitor/Security", "विजिटर/सिक्योरिटी", "વિઝિટર/સિક્યુરિટી"),
        summary: text("Manage guest approvals, delivery logs, gate entries, and security handovers.", "गेस्ट अप्रूवल, डिलीवरी लॉग, गेट एंट्री और सिक्योरिटी हैंडओवर संभालें।", "ગેસ્ટ અપ્રુવલ, ડિલિવરી લોગ, ગેટ એન્ટ્રી અને સિક્યુરિટી હેન્ડઓવર સંભાળો."),
      },
      {
        icon: Home,
        title: text("Parking & Vehicles", "पार्किंग और वाहन", "પાર્કિંગ અને વાહન"),
        summary: text("Map vehicles to flats, parking slots, stickers, and rule-based access.", "वाहन को फ्लैट, पार्किंग स्लॉट, स्टिकर और नियम आधारित एक्सेस से मैप करें।", "વાહનને ફ્લેટ, પાર્કિંગ સ્લોટ, સ્ટિકર અને નિયમ આધારિત ઍક્સેસ સાથે મેપ કરો."),
      },
      {
        icon: CircleDollarSign,
        title: text("Maintenance Collection", "मेंटेनेंस कलेक्शन", "મેન્ટેનન્સ કલેક્શન"),
        summary: text("Track bills, receipts, dues, reminders, defaulters, and collection reports.", "बिल, रसीद, बकाया, रिमाइंडर, डिफॉल्टर और कलेक्शन रिपोर्ट ट्रैक करें।", "બિલ, રસીદ, બાકી, રિમાઇન્ડર, ડિફોલ્ટર અને કલેક્શન રિપોર્ટ ટ્રેક કરો."),
      },
      {
        icon: CalendarCheck2,
        title: text("Facility Booking", "फैसिलिटी बुकिंग", "સુવિધા બુકિંગ"),
        summary: text("Approve clubhouse, hall, sports area, guest room, and event bookings.", "क्लबहाउस, हॉल, स्पोर्ट्स एरिया, गेस्ट रूम और इवेंट बुकिंग अप्रूव करें।", "ક્લબહાઉસ, હોલ, સ્પોર્ટ્સ એરિયા, ગેસ્ટ રૂમ અને ઇવેન્ટ બુકિંગ અપ્રુવ કરો."),
      },
    ],
  },
};

const detailCopy = {
  en: {
    connected: "Connected data",
    outcome: "Practical outcome",
    team: "Team view",
  },
  hi: {
    connected: "जुड़ा डेटा",
    outcome: "व्यावहारिक फायदा",
    team: "टीम व्यू",
  },
  gu: {
    connected: "જોડાયેલ ડેટા",
    outcome: "વ્યવહારુ ફાયદો",
    team: "ટીમ વ્યૂ",
  },
} satisfies Record<Locale, Record<string, string>>;

function getListItem(items: string[], index: number, fallback: string) {
  if (!items.length) return fallback;
  return items[index % items.length] ?? fallback;
}

export default function ProductInteractiveStory({
  benefits,
  features,
  locale,
  productName,
  productSlug,
  sales,
}: {
  benefits: string[];
  features: string[];
  locale: Locale;
  productName: string;
  productSlug: ProductSlug;
  sales: string[];
}) {
  const flow = flows[productSlug];
  const copy = detailCopy[locale];
  const [selectedIndex, setSelectedIndex] = useState(0);
  const selectedCard = flow.cards[selectedIndex] ?? flow.cards[0];

  if (!selectedCard) {
    throw new Error("A product flow section requires at least one card.");
  }

  const SelectedIcon = selectedCard.icon;

  return (
    <section className="relative overflow-hidden bg-white py-16">
      <div className="pointer-events-none absolute inset-x-0 top-0 h-40 opacity-70" style={{ background: `linear-gradient(180deg, ${flow.soft}, transparent)` }} />
      <div className="relative mx-auto max-w-[1360px] px-6 xl:px-8">
        <div className="mx-auto max-w-3xl text-center">
          <p className="text-[11px] font-extrabold uppercase tracking-[0.18em]" style={{ color: flow.accent }}>{flow.eyebrow[locale]}</p>
          <h2 className="mt-3 text-3xl font-extrabold tracking-[-0.055em] text-[#111a35] sm:text-4xl">{flow.title[locale]}</h2>
          <p className="mt-3 text-[15px] leading-7 text-[#657694]">{flow.intro[locale]}</p>
        </div>

        <div className="mt-9 grid gap-5 lg:grid-cols-[1.25fr_0.75fr]">
          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
            {flow.cards.map((card, index) => {
              const Icon = card.icon;
              const active = index === selectedIndex;
              return (
                <button
                  key={card.title.en}
                  type="button"
                  aria-pressed={active}
                  onClick={() => setSelectedIndex(index)}
                  className="group flex min-h-[190px] flex-col rounded-2xl border bg-white p-5 text-left shadow-[0_10px_24px_rgba(45,61,108,0.06)] transition duration-300 hover:-translate-y-1 hover:shadow-[0_18px_38px_rgba(45,61,108,0.1)] focus:outline-none focus-visible:ring-4"
                  style={{
                    borderColor: active ? flow.accent : "#e5eaf3",
                    boxShadow: active ? `0 18px 38px ${flow.soft}` : undefined,
                  }}
                >
                  <span className="grid h-11 w-11 place-items-center rounded-2xl transition group-hover:scale-105" style={{ backgroundColor: flow.soft, color: flow.accent }}>
                    <Icon size={20} />
                  </span>
                  <span className="mt-4 text-lg font-extrabold tracking-[-0.035em] text-[#263253]">{card.title[locale]}</span>
                  <span className="mt-2 text-[13px] font-semibold leading-6 text-[#68758e]">{card.summary[locale]}</span>
                </button>
              );
            })}
          </div>

          <aside className="self-start rounded-[24px] border border-[#e5eaf3] bg-[#fbfcff] p-5 shadow-[0_18px_42px_rgba(45,61,108,0.08)] lg:sticky lg:top-24">
            <div className="flex items-center gap-3">
              <span className="grid h-12 w-12 place-items-center rounded-2xl text-white" style={{ backgroundColor: flow.accent }}>
                <SelectedIcon size={21} />
              </span>
              <div className="min-w-0">
                <p className="truncate text-[10px] font-extrabold uppercase tracking-[0.16em]" style={{ color: flow.accent }}>{productName}</p>
                <h3 className="mt-1 text-xl font-extrabold tracking-[-0.04em] text-[#263253]">{selectedCard.title[locale]}</h3>
              </div>
            </div>
            <p className="mt-4 text-[14px] font-semibold leading-7 text-[#657694]">{selectedCard.summary[locale]}</p>
            <div className="mt-5 space-y-3">
              {[
                [copy.connected, getListItem(features, selectedIndex, productName)],
                [copy.outcome, getListItem(benefits, selectedIndex, productName)],
                [copy.team, getListItem(sales, selectedIndex, productName)],
              ].map(([label, value]) => (
                <div key={label} className="rounded-2xl border border-[#edf0f5] bg-white p-4">
                  <p className="text-[10px] font-extrabold uppercase tracking-[0.12em]" style={{ color: flow.accent }}>{label}</p>
                  <p className="mt-2 text-[12px] font-bold leading-6 text-[#68758e]">{value}</p>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}