"use client";

import {
  Bell,
  BookOpenCheck,
  Building2,
  CalendarCheck2,
  CircleDollarSign,
  ClipboardCheck,
  FileBarChart,
  Home,
  LayoutDashboard,
  Megaphone,
  Plus,
  Search,
  ShieldCheck,
  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 DashboardConfig = {
  accent: string;
  activityTitle: LocalText;
  activities: readonly [string, string][];
  bars: readonly number[];
  chartPath: string;
  chartTitle: LocalText;
  metrics: readonly [LocalText, string, string][];
  nav: readonly [string, LucideIcon, LocalText][];
  ranking: readonly [string, string][];
  rankingTitle: LocalText;
  revenueTitle: LocalText;
  soft: string;
  source: readonly [string, string][];
  sourceTitle: LocalText;
};

type ModuleData = {
  activities: readonly [string, string][];
  bars: readonly number[];
  chartPath: string;
  ranking: readonly [string, string][];
  stats: readonly [
    [string, string],
    [string, string],
    [string, string],
    [string, string],
  ];
};

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

const dashboards: Record<ProductSlug, DashboardConfig> = {
  pureestate: {
    accent: "#3C83DF",
    soft: "#EEEAFE",
    nav: [
      ["dashboard", LayoutDashboard, text("Dashboard", "डैशबोर्ड", "ડેશબોર્ડ")],
      ["leads", UsersRound, text("Leads", "लीड", "લીડ")],
      ["properties", Building2, text("Properties", "प्रॉपर्टी", "પ્રોપર્ટી")],
      ["bookings", BookOpenCheck, text("Bookings", "बुकिंग", "બુકિંગ")],
      ["followups", CalendarCheck2, text("Follow-ups", "फॉलो-अप", "ફોલો-અપ")],
      ["reports", FileBarChart, text("Reports", "रिपोर्ट", "રિપોર્ટ")],
    ],
    metrics: [
      [text("Total Leads", "कुल लीड", "કુલ લીડ"), "2,458", "+18.2%"],
      [text("Total Bookings", "कुल बुकिंग", "કુલ બુકિંગ"), "326", "+12.5%"],
      [text("Revenue", "रेवेन्यू", "રેવેન્યુ"), "Rs 4.52 Cr", "+15.3%"],
      [text("Active Properties", "एक्टिव प्रॉपर्टी", "એક્ટિવ પ્રોપર્ટી"), "24", "+8.1%"],
    ],
    chartTitle: text("Sales Overview", "सेल्स ओवरव्यू", "સેલ્સ ઓવરવ્યુ"),
    chartPath:
      "M8 102 C34 94 39 62 67 70 C95 79 105 47 137 52 C168 57 174 78 205 42 C235 8 250 77 282 54 C310 32 327 24 352 8",
    rankingTitle: text("Top Properties", "टॉप प्रॉपर्टी", "ટોપ પ્રોપર્ટી"),
    ranking: [
      ["Sunrise Residency", "Rs 2.4 Cr"],
      ["Green View Heights", "Rs 1.8 Cr"],
      ["Prime Enclave", "Rs 1.6 Cr"],
      ["Skyline Towers", "Rs 1.3 Cr"],
    ],
    activityTitle: text("Recent Activities", "हाल की गतिविधि", "તાજેતરની પ્રવૃત્તિ"),
    activities: [
      ["New lead received from Priya Sharma", "#55B8F6"],
      ["Booking confirmed for Unit 2B", "#45C488"],
      ["Site visit scheduled for Tower A", "#F2AC3E"],
    ],
    sourceTitle: text("Lead Source", "लीड सोर्स", "લીડ સોર્સ"),
    source: [
      ["Website", "#6254EA"],
      ["Referral", "#55B8F6"],
      ["Walk-ins", "#45C488"],
      ["Others", "#F2AC3E"],
    ],
    revenueTitle: text("Revenue Overview", "रेवेन्यू ओवरव्यू", "રેવેન્યુ ઓવરવ્યુ"),
    bars: [42, 72, 51, 63, 84, 68, 92],
  },
  buildpro: {
    accent: "#14B88A",
    soft: "#EAF3FF",
    nav: [
      ["dashboard", LayoutDashboard, text("Dashboard", "डैशबोर्ड", "ડેશબોર્ડ")],
      ["projects", Building2, text("Projects", "प्रोजेक्ट", "પ્રોજેક્ટ")],
      ["units", Home, text("Units", "यूनिट", "યુનિટ")],
      ["bookings", BookOpenCheck, text("Bookings", "बुकिंग", "બુકિંગ")],
      ["collections", CircleDollarSign, text("Collections", "कलेक्शन", "કલેક્શન")],
      ["tasks", ClipboardCheck, text("Tasks", "टास्क", "ટાસ્ક")],
      ["reports", FileBarChart, text("Reports", "रिपोर्ट", "રિપોર્ટ")],
    ],
    metrics: [
      [text("Total Projects", "कुल प्रोजेक्ट", "કુલ પ્રોજેક્ટ"), "120", "+12"],
      [text("Active Projects", "एक्टिव प्रोजेक्ट", "એક્ટિવ પ્રોજેક્ટ"), "95", "+8.1%"],
      [text("Delayed Sites", "डिले साइट", "વિલંબિત સાઇટ"), "25", "-4"],
      [text("Total Revenue", "कुल रेवेन्यू", "કુલ રેવન્યુ"), "Rs 5 Cr", "+18.5%"],
    ],
    chartTitle: text("Monthly Collection", "मंथली कलेक्शन", "મન્થલી કલેક્શન"),
    chartPath:
      "M8 106 C36 96 45 72 69 78 C100 86 112 58 139 62 C171 67 182 38 211 44 C239 50 252 26 281 31 C314 37 329 18 352 10",
    rankingTitle: text("New Project Registrations", "नई प्रोजेक्ट रजिस्ट्रेशन", "નવી પ્રોજેક્ટ રજિસ્ટ્રેશન"),
    ranking: [
      ["Skyline Phase 2", "38 units"],
      ["Riverfront Towers", "32 units"],
      ["Metro Square", "24 units"],
      ["Green Orbit", "18 units"],
    ],
    activityTitle: text("Recent Activities", "हाल की गतिविधि", "તાજેતરની પ્રવૃત્તિ"),
    activities: [
      ["New booking added for Unit B-1204", "#55B8F6"],
      ["Collection reminder sent to 42 buyers", "#45C488"],
      ["Site milestone updated for Tower A", "#F2AC3E"],
    ],
    sourceTitle: text("Project Source", "प्रोजेक्ट सोर्स", "પ્રોજેક્ટ સોર્સ"),
    source: [
      ["Direct Sales", "#2563EB"],
      ["Channel Partner", "#55B8F6"],
      ["Walk-ins", "#45C488"],
      ["Campaigns", "#F2AC3E"],
    ],
    revenueTitle: text("Revenue Overview", "रेवेन्यू ओवरव्यू", "રેવન્યુ ઓવરવ્યુ"),
    bars: [44, 52, 64, 58, 72, 80, 94],
  },
  societypro: {
    accent: "#278D61",
    soft: "#E8F8EF",
    nav: [
      ["dashboard", LayoutDashboard, text("Dashboard", "डैशबोर्ड", "ડેશબોર્ડ")],
      ["residents", UsersRound, text("Residents", "रेजिडेंट", "રહેવાસી")],
      ["maintenance", CircleDollarSign, text("Maintenance", "मेंटेनेंस", "મેન્ટેનન્સ")],
      ["complaints", ClipboardCheck, text("Complaints", "शिकायत", "ફરિયાદ")],
      ["security", ShieldCheck, text("Security", "सिक्योरिटी", "સિક્યુરિટી")],
      ["bookings", CalendarCheck2, text("Bookings", "बुकिंग", "બુકિંગ")],
      ["notices", Megaphone, text("Notices", "नोटिस", "નોટિસ")],
    ],
    metrics: [
      [text("Total Residents", "कुल रेजिडेंट", "કુલ રહેવાસી"), "1,286", "+8.1%"],
      [text("Maintenance", "मेंटेनेंस", "મેન્ટેનન્સ"), "Rs 18.6 L", "+14.8%"],
      [text("Complaints Open", "खुली शिकायत", "ઓપન ફરિયાદ"), "28", "-12%"],
      [text("Visitors Today", "आज के विजिटर", "આજના વિઝિટર"), "184", "+14"],
    ],
    chartTitle: text("Maintenance Collection", "मेंटेनेंस कलेक्शन", "મેન્ટેનન્સ કલેક્શન"),
    chartPath:
      "M8 104 C36 92 43 78 69 81 C100 85 107 61 137 64 C170 66 183 43 210 48 C239 54 247 29 281 35 C313 40 327 16 352 11",
    rankingTitle: text("Service Status", "सर्विस स्टेटस", "સર્વિસ સ્ટેટસ"),
    ranking: [
      ["Lift inspection", "Resolved"],
      ["Clubhouse booking", "Approved"],
      ["Visitor approval", "Live"],
      ["Water supply", "Assigned"],
    ],
    activityTitle: text("Recent Activities", "हाल की गतिविधि", "તાજેતરની પ્રવૃત્તિ"),
    activities: [
      ["Complaint resolved for Flat 4A", "#45C488"],
      ["Guest approved for Flat 12B", "#55B8F6"],
      ["AGM notice shared with residents", "#F2AC3E"],
    ],
    sourceTitle: text("Visitor Traffic", "विजिटर ट्रैफिक", "વિઝિટર ટ્રાફિક"),
    source: [
      ["Guests", "#278D61"],
      ["Deliveries", "#55B8F6"],
      ["Staff", "#F2AC3E"],
      ["Others", "#6254EA"],
    ],
    revenueTitle: text("Collection Overview", "कलेक्शन ओवरव्यू", "કલેક્શન ઓવરવ્યુ"),
    bars: [48, 58, 70, 62, 78, 74, 91],
  },
};

const moduleData: Record<
  ProductSlug,
  Record<string, ModuleData>
> = {
  pureestate: {
    leads: {
      stats: [
        ["2,458", "+18.2%"],
        ["184", "+12.4%"],
        ["84", "+9.4%"],
        ["32", "-6.3%"],
      ],
      chartPath:
        "M8 106 C39 96 43 72 70 76 C101 80 114 54 142 58 C173 62 182 34 211 39 C241 44 251 20 282 26 C316 32 331 12 352 8",
      ranking: [
        ["Website enquiries", "842"],
        ["Broker referrals", "628"],
        ["Walk-in leads", "486"],
        ["Campaign leads", "312"],
      ],
      activities: [
        ["New website enquiry assigned", "#55B8F6"],
        ["Broker follow-up completed", "#45C488"],
        ["Hot lead moved to site visit", "#F2AC3E"],
      ],
      bars: [38, 52, 61, 72, 68, 84, 94],
    },
    properties: {
      stats: [
        ["326", "+12.5%"],
        ["244", "+8.4%"],
        ["82", "-5.2%"],
        ["118", "+14"],
      ],
      chartPath:
        "M8 92 C38 82 44 66 70 72 C102 79 113 59 142 60 C173 61 181 46 210 50 C242 54 254 32 283 34 C314 36 329 21 352 18",
      ranking: [
        ["Sunrise Residency", "84 units"],
        ["Green View Heights", "72 units"],
        ["Prime Enclave", "64 units"],
        ["Skyline Towers", "58 units"],
      ],
      activities: [
        ["Tower A inventory refreshed", "#55B8F6"],
        ["Unit 8B marked available", "#45C488"],
        ["Property brochure updated", "#F2AC3E"],
      ],
      bars: [74, 68, 64, 58, 55, 48, 42],
    },
    bookings: {
      stats: [
        ["326", "+12.5%"],
        ["42", "+15.3%"],
        ["Rs 1.8 Cr", "+18%"],
        ["18", "-4"],
      ],
      chartPath:
        "M8 105 C36 92 44 80 70 82 C98 84 111 61 140 65 C171 69 180 42 209 47 C239 52 251 35 281 38 C313 41 329 18 352 12",
      ranking: [
        ["Unit 2B booking", "Rs 42 L"],
        ["Tower A - 804", "Rs 38 L"],
        ["Prime Enclave - 12", "Rs 34 L"],
        ["Skyline - 402", "Rs 29 L"],
      ],
      activities: [
        ["Booking confirmed for Unit 2B", "#45C488"],
        ["Payment schedule shared", "#55B8F6"],
        ["Agreement draft approved", "#F2AC3E"],
      ],
      bars: [44, 59, 52, 68, 74, 82, 92],
    },
    followups: {
      stats: [
        ["84", "+9.4%"],
        ["62", "+11%"],
        ["18", "-8%"],
        ["12", "-5"],
      ],
      chartPath:
        "M8 98 C36 91 42 69 69 73 C99 77 111 49 140 55 C171 61 181 38 210 42 C241 46 253 24 282 29 C313 34 329 16 352 10",
      ranking: [
        ["Priya Sharma", "Today"],
        ["Ajay Patel", "2:30 PM"],
        ["Rohan Shah", "Tomorrow"],
        ["Nisha Mehta", "Site visit"],
      ],
      activities: [
        ["Site visit reminder sent", "#55B8F6"],
        ["Broker callback completed", "#45C488"],
        ["Priority follow-up assigned", "#F2AC3E"],
      ],
      bars: [48, 63, 57, 72, 66, 81, 89],
    },
    reports: {
      stats: [
        ["18.4%", "+4.2%"],
        ["684", "+21%"],
        ["16", "+4"],
        ["8", "+2"],
      ],
      chartPath:
        "M8 103 C35 95 46 79 70 82 C101 85 111 64 140 67 C170 70 182 51 210 52 C239 53 253 33 282 34 C312 35 329 15 352 11",
      ranking: [
        ["Sales MIS", "Ready"],
        ["Lead source report", "Ready"],
        ["Collections report", "Ready"],
        ["Team performance", "Ready"],
      ],
      activities: [
        ["Weekly sales report exported", "#55B8F6"],
        ["Lead source report generated", "#45C488"],
        ["Team dashboard refreshed", "#F2AC3E"],
      ],
      bars: [46, 55, 62, 67, 75, 83, 91],
    },
  },
  buildpro: {
    projects: {
      stats: [
        ["120", "+12"],
        ["95", "+8.1%"],
        ["82", "+6.4%"],
        ["25", "-4"],
      ],
      chartPath:
        "M8 104 C36 92 44 78 70 80 C100 83 112 62 141 64 C171 66 181 44 210 48 C241 52 252 31 282 34 C314 37 329 18 352 12",
      ranking: [
        ["Skyline Phase 2", "74%"],
        ["Riverfront Towers", "61%"],
        ["Metro Square", "Ready"],
        ["Green Orbit", "42%"],
      ],
      activities: [
        ["Project milestone approved", "#55B8F6"],
        ["Tower B site update received", "#45C488"],
        ["Delay risk flagged for civil work", "#F2AC3E"],
      ],
      bars: [42, 48, 58, 64, 70, 78, 86],
    },
    units: {
      stats: [
        ["1,028", "+38"],
        ["428", "+24"],
        ["386", "+16"],
        ["32", "-3"],
      ],
      chartPath:
        "M8 92 C38 82 44 66 70 72 C102 79 113 59 142 60 C173 61 181 46 210 50 C242 54 254 32 283 34 C314 36 329 21 352 18",
      ranking: [
        ["2 BHK inventory", "184 available"],
        ["3 BHK inventory", "162 available"],
        ["Commercial units", "76 available"],
        ["Penthouse units", "18 available"],
      ],
      activities: [
        ["Unit A-804 marked booked", "#45C488"],
        ["Tower C inventory synced", "#55B8F6"],
        ["Price sheet updated", "#F2AC3E"],
      ],
      bars: [78, 72, 68, 58, 52, 44, 36],
    },
    bookings: {
      stats: [
        ["214", "+18"],
        ["58", "+16"],
        ["Rs 3.2 Cr", "+21%"],
        ["12", "-2"],
      ],
      chartPath:
        "M8 105 C36 92 44 80 70 82 C98 84 111 61 140 65 C171 69 180 42 209 47 C239 52 251 35 281 38 C313 41 329 18 352 12",
      ranking: [
        ["Unit B-1204", "Rs 72 L"],
        ["Tower A - 804", "Rs 58 L"],
        ["Metro Square - 210", "Rs 46 L"],
        ["Green Orbit - 602", "Rs 41 L"],
      ],
      activities: [
        ["Booking agreement queued", "#55B8F6"],
        ["Token receipt generated", "#45C488"],
        ["Buyer KYC verified", "#F2AC3E"],
      ],
      bars: [44, 59, 52, 68, 74, 82, 92],
    },
    collections: {
      stats: [
        ["Rs 5 Cr", "+18.5%"],
        ["76%", "+9.2%"],
        ["Rs 68 L", "-8.4%"],
        ["150", "+12"],
      ],
      chartPath:
        "M8 106 C36 95 44 77 70 80 C100 83 112 59 141 63 C171 67 181 45 210 48 C239 51 252 27 282 32 C314 37 329 16 352 11",
      ranking: [
        ["Skyline collection", "84%"],
        ["Riverfront collection", "78%"],
        ["Metro Square collection", "76%"],
        ["Green Orbit collection", "68%"],
      ],
      activities: [
        ["Payment reminder sent", "#55B8F6"],
        ["Receipt batch generated", "#45C488"],
        ["Collection report exported", "#F2AC3E"],
      ],
      bars: [52, 58, 65, 60, 72, 80, 91],
    },
    tasks: {
      stats: [
        ["96", "-8"],
        ["38", "+4"],
        ["28", "+12"],
        ["22", "-5"],
      ],
      chartPath:
        "M8 78 C36 64 44 89 70 74 C100 57 111 83 140 68 C171 52 181 78 210 60 C241 42 252 69 282 52 C314 35 329 54 352 43",
      ranking: [
        ["Slab inspection", "Assigned"],
        ["Buyer payment call", "Open"],
        ["Material invoice review", "Pending"],
        ["Safety checklist", "Due"],
      ],
      activities: [
        ["Task assigned to site engineer", "#55B8F6"],
        ["Finance approval completed", "#45C488"],
        ["Customer portal reply pending", "#F2AC3E"],
      ],
      bars: [62, 74, 51, 68, 84, 70, 91],
    },
    reports: {
      stats: [
        ["14", "+3"],
        ["88", "+6%"],
        ["76%", "+9%"],
        ["3", "-1"],
      ],
      chartPath:
        "M8 98 C36 88 43 72 70 75 C100 78 112 58 141 60 C171 62 181 44 210 46 C241 48 252 30 282 31 C314 32 329 18 352 14",
      ranking: [
        ["Monthly revenue", "Ready"],
        ["New project registrations", "Ready"],
        ["Project performance", "Updated"],
        ["Delay risk report", "3 alerts"],
      ],
      activities: [
        ["Management dashboard exported", "#55B8F6"],
        ["Monthly revenue report generated", "#45C488"],
        ["New registrations chart refreshed", "#F2AC3E"],
      ],
      bars: [58, 64, 70, 76, 82, 87, 92],
    },
  },
  societypro: {
    residents: {
      stats: [
        ["1,286", "+8.1%"],
        ["512", "+9"],
        ["684", "+18"],
        ["42", "+6"],
      ],
      chartPath:
        "M8 104 C36 94 43 79 70 82 C101 85 112 66 141 68 C171 70 183 51 211 53 C241 55 253 36 282 38 C314 40 329 20 352 16",
      ranking: [
        ["Tower A", "324"],
        ["Tower B", "298"],
        ["Tower C", "286"],
        ["Tower D", "264"],
      ],
      activities: [
        ["New resident added to Tower C", "#45C488"],
        ["Vehicle mapped for Flat 4A", "#55B8F6"],
        ["Resident directory exported", "#F2AC3E"],
      ],
      bars: [54, 61, 66, 72, 78, 84, 90],
    },
    maintenance: {
      stats: [
        ["Rs 18.6 L", "+14.8%"],
        ["86%", "+8.2%"],
        ["Rs 2.8 L", "-12.4%"],
        ["512", "+18"],
      ],
      chartPath:
        "M8 106 C36 95 44 77 70 80 C100 83 112 59 141 63 C171 67 181 45 210 48 C239 51 252 27 282 32 C314 37 329 16 352 11",
      ranking: [
        ["Tower A collection", "94%"],
        ["Tower C collection", "89%"],
        ["Tower B collection", "86%"],
        ["Tower D collection", "78%"],
      ],
      activities: [
        ["Maintenance receipts generated", "#45C488"],
        ["Payment reminder sent", "#55B8F6"],
        ["Collection report exported", "#F2AC3E"],
      ],
      bars: [52, 58, 65, 60, 72, 80, 91],
    },
    complaints: {
      stats: [
        ["28", "-12%"],
        ["94%", "+6.2%"],
        ["18", "-8"],
        ["6", "-3"],
      ],
      chartPath:
        "M8 40 C36 48 44 53 70 56 C100 59 111 66 140 69 C171 72 181 78 210 81 C241 84 252 90 282 93 C314 96 329 100 352 104",
      ranking: [
        ["Lift service", "Assigned"],
        ["Parking access", "Open"],
        ["Water supply", "Resolved"],
        ["Housekeeping", "Assigned"],
      ],
      activities: [
        ["Lift request assigned to staff", "#F2AC3E"],
        ["Water complaint resolved", "#45C488"],
        ["Resident notified automatically", "#55B8F6"],
      ],
      bars: [88, 76, 68, 54, 46, 36, 28],
    },
    security: {
      stats: [
        ["184", "+14"],
        ["62", "+11"],
        ["18", "Live"],
        ["8", "+2"],
      ],
      chartPath:
        "M8 78 C36 64 44 89 70 74 C100 57 111 83 140 68 C171 52 181 78 210 60 C241 42 252 69 282 52 C314 35 329 54 352 43",
      ranking: [
        ["Gate 1", "Active"],
        ["Gate 2", "Active"],
        ["Deliveries", "42"],
        ["Pre-approvals", "62"],
      ],
      activities: [
        ["Guest approved for Flat 12B", "#45C488"],
        ["Delivery logged at Gate 2", "#55B8F6"],
        ["Shift handover completed", "#F2AC3E"],
      ],
      bars: [62, 74, 51, 68, 84, 70, 91],
    },
    bookings: {
      stats: [
        ["36", "+8"],
        ["18", "+4"],
        ["12", "+3"],
        ["4", "+1"],
      ],
      chartPath:
        "M8 102 C36 92 44 75 70 78 C100 81 112 62 141 64 C171 66 181 46 210 49 C241 52 252 31 282 34 C314 37 329 18 352 14",
      ranking: [
        ["Clubhouse", "18"],
        ["Sports area", "8"],
        ["Community hall", "6"],
        ["Guest rooms", "4"],
      ],
      activities: [
        ["Clubhouse booking approved", "#45C488"],
        ["Sports area slot reserved", "#55B8F6"],
        ["Booking reminder sent", "#F2AC3E"],
      ],
      bars: [42, 54, 61, 58, 72, 78, 88],
    },
    notices: {
      stats: [
        ["12", "+3"],
        ["1,286", "+8.1%"],
        ["94%", "+6%"],
        ["4", "+1"],
      ],
      chartPath:
        "M8 98 C36 88 43 72 70 75 C100 78 112 58 141 60 C171 62 181 44 210 46 C241 48 252 30 282 31 C314 32 329 18 352 14",
      ranking: [
        ["AGM reminder", "Shared"],
        ["Water cleaning", "Shared"],
        ["Festival event", "Open"],
        ["Parking update", "Shared"],
      ],
      activities: [
        ["AGM notice shared", "#45C488"],
        ["Event registration opened", "#55B8F6"],
        ["Parking notice acknowledged", "#F2AC3E"],
      ],
      bars: [58, 64, 70, 76, 82, 87, 92],
    },
  },
};

const uiCopy = {
  en: {
    active: "Active",
    completed: "Completed",
    mix: "Mix",
    month: "vs last month",
    noResults: "No matching items",
    notifications: "Toggle notifications",
    openQuickActions: "Toggle quick actions",
    overview: "Overview",
    pending: "Pending",
    period: "This year",
    profile: "Admin",
    search: "Search anything...",
    top: "Top",
    total: "Total",
    trend: "Trend",
  },
  hi: {
    active: "एक्टिव",
    completed: "पूरे हुए",
    mix: "मिक्स",
    month: "पिछले महीने से",
    noResults: "कोई मैच नहीं",
    notifications: "नोटिफिकेशन टॉगल करें",
    openQuickActions: "क्विक एक्शन टॉगल करें",
    overview: "ओवरव्यू",
    pending: "पेंडिंग",
    period: "इस साल",
    profile: "एडमिन",
    search: "कुछ भी खोजें...",
    top: "टॉप",
    total: "कुल",
    trend: "ट्रेंड",
  },
  gu: {
    active: "એક્ટિવ",
    completed: "પૂર્ણ",
    mix: "મિક્સ",
    month: "પાછલા મહિનાથી",
    noResults: "કોઈ મેચ નથી",
    notifications: "નોટિફિકેશન ટૉગલ કરો",
    openQuickActions: "ક્વિક એક્શન ટૉગલ કરો",
    overview: "ઓવરવ્યુ",
    pending: "પેન્ડિંગ",
    period: "આ વર્ષે",
    profile: "એડમિન",
    search: "કંઈપણ શોધો...",
    top: "ટોપ",
    total: "કુલ",
    trend: "ટ્રેન્ડ",
  },
} satisfies Record<Locale, Record<string, string>>;

function rotateItems<T>(items: readonly T[], offset: number) {
  if (!items.length) return [];
  const normalizedOffset = offset % items.length;
  return [
    ...items.slice(normalizedOffset),
    ...items.slice(0, normalizedOffset),
  ];
}

export default function ProductDashboardVisual({
  locale,
  productName,
  productSlug,
}: {
  locale: Locale;
  productName: string;
  productSlug: ProductSlug;
}) {
  const productKey = productSlug;
  const dashboard = dashboards[productKey];
  const copy = uiCopy[locale];
  const gradientId = `${productSlug}-hero-chart`;
  const [activeModule, setActiveModule] = useState("dashboard");
  const [hasUnreadNotifications, setHasUnreadNotifications] = useState(true);
  const [quickActionsActive, setQuickActionsActive] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const activeNavIndex = Math.max(
    0,
    dashboard.nav.findIndex(([id]) => id === activeModule),
  );
  const activeNav = dashboard.nav[activeNavIndex] ?? dashboard.nav[0];
  if (!activeNav)
    throw new Error(
      "A dashboard preview requires at least one navigation item.",
    );
  const activeModuleData = moduleData[productKey][activeNav[0]];
  const activeLabel = activeNav[2][locale];
  const metrics = activeModuleData
    ? [
        [`${copy.total} ${activeLabel}`, ...activeModuleData.stats[0]],
        [`${copy.active} ${activeLabel}`, ...activeModuleData.stats[1]],
        [`${copy.completed} ${activeLabel}`, ...activeModuleData.stats[2]],
        [`${copy.pending} ${activeLabel}`, ...activeModuleData.stats[3]],
      ]
    : dashboard.metrics.map(([label, value, change]) => [
        label[locale],
        value,
        change,
      ]);
  const chartPath = activeModuleData?.chartPath ?? dashboard.chartPath;
  const chartTitle = activeModuleData
    ? `${activeLabel} ${copy.overview}`
    : dashboard.chartTitle[locale];
  const rankingTitle = activeModuleData
    ? `${copy.top} ${activeLabel}`
    : dashboard.rankingTitle[locale];
  const activityTitle = dashboard.activityTitle[locale];
  const sourceTitle = activeModuleData
    ? `${activeLabel} ${copy.mix}`
    : dashboard.sourceTitle[locale];
  const revenueTitle = activeModuleData
    ? `${activeLabel} ${copy.trend}`
    : dashboard.revenueTitle[locale];
  const bars = activeModuleData?.bars ?? dashboard.bars;
  const ranking = activeModuleData?.ranking ?? dashboard.ranking;
  const activities = activeModuleData?.activities ?? dashboard.activities;
  const source = activeModuleData
    ? rotateItems(dashboard.source, activeNavIndex)
    : dashboard.source;
  const normalizedQuery = searchQuery.trim().toLowerCase();
  const visibleRanking = ranking.filter(([item, value]) =>
    `${item} ${value}`.toLowerCase().includes(normalizedQuery),
  );
  const visibleActivities = activities.filter(([item]) =>
    item.toLowerCase().includes(normalizedQuery),
  );

  return (
    <div className="overflow-hidden rounded-[20px] border border-[#e3e9f3] bg-[#fbfcff] shadow-[0_18px_50px_rgba(31,48,94,0.12)]">
      <header className="flex items-center flex-r gap-2 border-b border-[#edf1f6] bg-white px-3 py-2.5">
        <div className="flex min-w-24 items-center gap-2">
          <div className="mb-2 flex items-center gap-1.5 rounded-lg px-1.5 py-2">
            <span
              className="grid h-6 w-6 shrink-0 place-items-center rounded-lg text-white"
              style={{ backgroundColor: dashboard.accent }}
            >
              {productSlug === "societypro" ? (
                <Home size={13} />
              ) : (
                <Building2 size={13} />
              )}
            </span>
            <span className="truncate text-[8px] font-extrabold text-[#3b4761]">
              {productName}
            </span>
          </div>
        </div>
        <label className="hidden h-8 flex-1 items-center gap-2 rounded-lg border border-[#e7ebf3] bg-[#fbfcff] px-3 text-[8px] text-[#a3adbf] sm:flex">
          <Search size={12} />
          <input
            value={searchQuery}
            onChange={(event) => setSearchQuery(event.target.value)}
            placeholder={copy.search}
            className="min-w-0 flex-1 bg-transparent text-[8px] text-[#66738d] outline-none placeholder:text-[#a3adbf]"
          />
        </label>
        <div className="ml-auto flex items-center gap-1.5 text-[#7d89a0]">
          <button
            type="button"
            aria-label={copy.openQuickActions}
            aria-pressed={quickActionsActive}
            onClick={() => setQuickActionsActive((active) => !active)}
            className="grid h-7 w-7 place-items-center rounded-full bg-[#f7f8fc] transition"
            style={
              quickActionsActive
                ? { backgroundColor: dashboard.soft, color: dashboard.accent }
                : undefined
            }
          >
            <Plus size={13} />
          </button>
          <button
            type="button"
            aria-label={copy.notifications}
            aria-pressed={hasUnreadNotifications}
            onClick={() => setHasUnreadNotifications((active) => !active)}
            className="relative grid h-7 w-7 place-items-center rounded-full bg-[#f7f8fc] transition"
          >
            <Bell size={13} />
            {hasUnreadNotifications ? (
              <span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-rose-500" />
            ) : null}
          </button>
          <span
            className="grid h-7 w-7 place-items-center rounded-full text-[8px] font-extrabold text-white"
            style={{ backgroundColor: dashboard.accent }}
          >
            PS
          </span>
        </div>
      </header>

      <div className="sm:grid sm:grid-cols-[112px_1fr]">
        <aside className="hidden border-r border-[#edf1f6] bg-white p-2 sm:block">
          <nav
            className="space-y-0.5"
            aria-label={`${productName} dashboard preview`}
          >
            {dashboard.nav.map(([id, Icon, label]) => (
              <button
                key={id}
                type="button"
                aria-pressed={id === activeNav[0]}
                onClick={() => setActiveModule(id)}
                className="flex items-center gap-2 rounded-md px-2 py-2 text-[8px] font-bold"
                style={
                  id === activeNav[0]
                    ? { backgroundColor: dashboard.accent, color: "white" }
                    : { color: "#66738d" }
                }
              >
                <Icon size={12} />
                <span className="truncate">{label[locale]}</span>
              </button>
            ))}
          </nav>
        </aside>

        <div className="min-w-0 p-2 sm:p-3">
          <nav
            aria-label={`${productName} mobile dashboard preview`}
            className="mb-2 flex gap-1 overflow-x-auto pb-1 sm:hidden"
          >
            {dashboard.nav.map(([id, Icon, label]) => (
              <button
                key={id}
                type="button"
                aria-label={label[locale]}
                aria-pressed={id === activeNav[0]}
                onClick={() => setActiveModule(id)}
                className="grid h-7 w-7 shrink-0 place-items-center rounded-md transition"
                style={
                  id === activeNav[0]
                    ? { backgroundColor: dashboard.accent, color: "white" }
                    : { backgroundColor: "#f7f8fc", color: "#66738d" }
                }
              >
                <Icon size={12} />
              </button>
            ))}
          </nav>
          <div className="grid grid-cols-2 gap-1.5 xl:grid-cols-4">
            {metrics.map(([label, value, change]) => (
              <article
                key={label}
                className="rounded-lg border border-[#e8edf4] bg-white p-2.5"
              >
                <p className="truncate text-[7px] font-bold text-[#8692a8]">
                  {label}
                </p>
                <div className="mt-1 flex flex-wrap items-end gap-1">
                  <strong className="text-[14px] tracking-[-0.04em] text-[#202d4e]">
                    {value}
                  </strong>
                  <span className="pb-0.5 text-[7px] font-extrabold text-emerald-600">
                    {change}
                  </span>
                </div>
                <p className="mt-1 text-[6px] text-[#afb7c5]">{copy.month}</p>
              </article>
            ))}
          </div>

          <div className="mt-2 grid gap-2 md:grid-cols-[1.5fr_0.9fr]">
            <DashboardCard title={chartTitle} endLabel={copy.period}>
              <svg
                aria-label={`${chartTitle} chart`}
                viewBox="0 0 360 126"
                className="mt-2 h-[112px] w-full"
              >
                <defs>
                  <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
                    <stop
                      offset="0%"
                      stopColor={dashboard.accent}
                      stopOpacity=".22"
                    />
                    <stop
                      offset="100%"
                      stopColor={dashboard.accent}
                      stopOpacity=".02"
                    />
                  </linearGradient>
                </defs>
                {[22, 52, 82, 112].map((y) => (
                  <path
                    key={y}
                    d={`M8 ${y}H352`}
                    stroke="#EEF2F7"
                    strokeWidth="1"
                  />
                ))}
                <path
                  d={`${chartPath} L352 116 L8 116Z`}
                  fill={`url(#${gradientId})`}
                />
                <path
                  d={chartPath}
                  fill="none"
                  stroke={dashboard.accent}
                  strokeLinecap="round"
                  strokeWidth="3"
                />
              </svg>
              <MonthLabels />
            </DashboardCard>
            <DashboardCard title={rankingTitle}>
              <div className="mt-2 space-y-1.5">
                {visibleRanking.map(([item, value], index) => (
                  <ListItem
                    key={item}
                    accent={dashboard.accent}
                    index={index + 1}
                    label={item}
                    value={value}
                  />
                ))}
                {!visibleRanking.length ? (
                  <NoResults label={copy.noResults} />
                ) : null}
              </div>
            </DashboardCard>
          </div>

          <div className="mt-2 grid gap-2 md:grid-cols-[1.2fr_0.85fr_0.9fr]">
            <DashboardCard title={activityTitle}>
              <div className="mt-2 space-y-2">
                {visibleActivities.map(([item, color]) => (
                  <p
                    key={item}
                    className="flex items-center gap-2 text-[7px] leading-3 text-[#748198]"
                  >
                    <span
                      className="h-1.5 w-1.5 shrink-0 rounded-full"
                      style={{ backgroundColor: color }}
                    />
                    {item}
                  </p>
                ))}
                {!visibleActivities.length ? (
                  <NoResults label={copy.noResults} />
                ) : null}
              </div>
            </DashboardCard>
            <DashboardCard title={sourceTitle}>
              <div className="mt-2 flex items-center gap-2">
                <span
                  aria-label={`${sourceTitle} distribution`}
                  className="grid h-12 w-12 shrink-0 place-items-center rounded-full"
                  style={{
                    background: `conic-gradient(${source[0]?.[1]} 0 35%, ${source[1]?.[1]} 35% 62%, ${source[2]?.[1]} 62% 84%, ${source[3]?.[1]} 84% 100%)`,
                  }}
                >
                  <span className="grid h-7 w-7 place-items-center rounded-full bg-white text-[6px] font-extrabold text-[#40506a]">
                    100%
                  </span>
                </span>
                <div className="min-w-0 space-y-1">
                  {source.map(([item, color]) => (
                    <p
                      key={item}
                      className="flex items-center gap-1 text-[6px] text-[#748198]"
                    >
                      <span
                        className="h-1.5 w-1.5 rounded-full"
                        style={{ backgroundColor: color }}
                      />
                      {item}
                    </p>
                  ))}
                </div>
              </div>
            </DashboardCard>
            <DashboardCard title={revenueTitle}>
              <div className="mt-3 flex h-12 items-end gap-1.5">
                {bars.map((height, index) => (
                  <span
                    key={index}
                    className="flex-1 rounded-t-sm transition-all duration-300"
                    style={{
                      backgroundColor: dashboard.accent,
                      height: `${height}%`,
                      opacity: 0.9,
                    }}
                  />
                ))}
              </div>
              <MonthLabels compact />
            </DashboardCard>
          </div>
        </div>
      </div>
    </div>
  );
}

function DashboardCard({
  children,
  endLabel,
  title,
}: {
  children: React.ReactNode;
  endLabel?: string;
  title: string;
}) {
  return (
    <article className="min-w-0 rounded-lg border border-[#e8edf4] bg-white p-2.5">
      <div className="flex items-center justify-between gap-2">
        <h3 className="truncate text-[8px] font-extrabold text-[#35415e]">
          {title}
        </h3>
        {endLabel ? (
          <span className="shrink-0 text-[6px] text-[#8995a9]">{endLabel}</span>
        ) : null}
      </div>
      {children}
    </article>
  );
}

function ListItem({
  accent,
  index,
  label,
  value,
}: {
  accent: string;
  index: number;
  label: string;
  value: string;
}) {
  return (
    <p className="flex items-center gap-1.5 text-[7px] font-bold text-[#69768d]">
      <span
        className="grid h-4 w-4 shrink-0 place-items-center rounded text-[7px] text-white"
        style={{ backgroundColor: accent }}
      >
        {index}
      </span>
      <span className="min-w-0 flex-1 truncate">{label}</span>
      <span className="shrink-0 text-[6px] text-[#34415e]">{value}</span>
    </p>
  );
}

function NoResults({ label }: { label: string }) {
  return <p className="py-2 text-center text-[7px] text-[#9aa5b7]">{label}</p>;
}

function MonthLabels({ compact = false }: { compact?: boolean }) {
  return (
    <div
      className={`flex justify-between text-[#a8b1c1] ${compact ? "mt-1 text-[5px]" : "-mt-1 text-[6px]"}`}
    >
      {["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"].map((month) => (
        <span key={month}>{month}</span>
      ))}
    </div>
  );
}