import {
  Bell,
  BriefcaseBusiness,
  Building2,
  CalendarCheck2,
  ChevronDown,
  CircleDollarSign,
  ClipboardList,
  FileBarChart,
  Home,
  LayoutDashboard,
  MessageCircleWarning,
  MoreHorizontal,
  Plus,
  Search,
  Settings,
  Sparkles,
  UsersRound,
} from "lucide-react";
import { LogoMark } from "@/components/home/Brand";
import DemoButton from "@/components/demo/DemoButton";
import { trustPills } from "@/data/home.data";
import type { Dictionary } from "@/lib/i18n";
import type { Locale } from "@/lib/locales";

export default function HeroSection({
  dictionary,
  locale,
}: {
  dictionary: Dictionary;
  locale: Locale;
}) {
  return (
    <section className="relative overflow-hidden pb-14 pt-12 lg:pb-16 lg:pt-14">
      <div className="pointer-events-none absolute -left-24 top-2 h-72 w-72 rounded-full bg-[#eef0ff] blur-3xl" />
      <div className="pointer-events-none absolute right-0 top-32 h-72 w-72 rounded-full bg-[#edfbff] blur-3xl" />

      <div className="relative mx-auto grid max-w-340 items-center gap-10 px-6 xl:grid-cols-[0.86fr_1.14fr] xl:gap-16 xl:px-8">
        <div>
          <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-[#e5e8fb] bg-white/85 px-3.5 py-2 text-md font-semibold text-[#5865ed] shadow-[0_4px_16px_rgba(65,75,135,0.06)]">
            <Sparkles size={15} className="text-[#6670ff]" />
            {dictionary.home.badge}
          </div>

          <h1 className="max-w-150 text-[45px] font-extrabold leading-[1.09] tracking-[-0.020em] text-[#101a3c] sm:text-[56px] xl:text-5xl">
            {dictionary.home.heroStart}{" "}
            <span className="bg-linear-to-r from-[#5267ed] to-[#8557f2] bg-clip-text text-transparent">
              {dictionary.home.heroGradient}
            </span>
          </h1>

          <p className="mt-5 max-w-147.5 text-[16px] leading-7 text-[#697693]">
            {dictionary.home.heroDescription}
          </p>

          <div className="mt-6 flex flex-wrap items-center gap-3">
            <DemoButton
              locale={locale}
              label={dictionary.common.bookDemo}
              className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-[#5264ed] to-[#6755e9] px-6 py-3.5 text-[13px] font-bold text-white shadow-[0_10px_22px_rgba(94,85,235,0.25)] transition-transform hover:-translate-y-0.5"
            />
          </div>

          <div className="mt-7 flex flex-wrap gap-3">
            {trustPills.map((pill, index) => {
              const Icon = pill.icon;
              return (
                <div key={pill.label} className="inline-flex items-center gap-2 text-[10px] font-semibold text-[#68738f]">
                  <span className={`grid h-7 w-7 place-items-center rounded-lg ${pillTone[pill.tone]}`}>
                    <Icon size={14} />
                  </span>
                  {dictionary.trust[index]?.[0] ?? pill.label}
                </div>
              );
            })}
          </div>
        </div>

        <DashboardMockup />
      </div>
    </section>
  );
}

const pillTone = {
  violet: "bg-[#f0efff] text-[#6c61f2]",
  blue: "bg-[#edf7ff] text-[#4b8ce9]",
  green: "bg-[#ebfaf4] text-[#32b77d]",
  orange: "bg-[#fff3e5] text-[#f49b3f]",
  rose: "bg-[#fff0ef] text-[#ef796e]",
};

const sidebarItems = [
  [LayoutDashboard, "Dashboard"],
  [UsersRound, "Leads"],
  [BriefcaseBusiness, "Projects"],
  [Building2, "Properties"],
  [CalendarCheck2, "Bookings"],
  [Home, "Residents"],
  [ClipboardList, "Tasks & Activities"],
  [MessageCircleWarning, "Complaints"],
  [CircleDollarSign, "Billing"],
  [FileBarChart, "Reports"],
  [Settings, "Settings"],
] as const;

const stats = [
  ["Total Leads", "2,458", "+18.2%"],
  ["Total Bookings", "326", "+12.5%"],
  ["Total Revenue", "Rs 4.52 Cr", "+15.3%"],
  ["Active Projects", "24", "+8.1%"],
];

function DashboardMockup() {
  return (
    <div className="min-w-0 rounded-[18px] border border-[#e5e9f4] bg-white p-2.5 shadow-[0_18px_45px_rgba(57,67,123,0.11)] sm:p-3">
      <div className="flex h-11 items-center justify-between border-b border-[#eef1f7] px-1 pb-2">
        <div className="flex items-center gap-1.5">
          <LogoMark className="h-6 w-6" />
          <span className="text-[13px] font-extrabold tracking-[-0.05em] text-[#242e5e]">
            Pure<span className="text-[#5967ff]">SaaS</span>
          </span>
        </div>
        <div className="mx-3 hidden h-7 max-w-[335px] flex-1 items-center gap-2 rounded-lg border border-[#edf0f6] bg-[#fbfcfe] px-3 sm:flex">
          <Search size={11} className="text-[#a3aec2]" />
          <span className="text-[8px] text-[#a3aec2]">Search anything...</span>
        </div>
        <div className="flex items-center gap-2 text-[#687490]">
          <span className="grid h-6 w-6 place-items-center rounded-full bg-[#f8f9fd]"><Plus size={12} /></span>
          <span className="relative grid h-6 w-6 place-items-center rounded-full bg-[#f8f9fd]">
            <Bell size={12} />
            <span className="absolute right-0.5 top-0.5 h-1.5 w-1.5 rounded-full bg-[#fb6474] ring-1 ring-white" />
          </span>
          <span className="hidden h-6 w-6 rounded-full bg-gradient-to-br from-[#f7d4b5] to-[#9b6b4a] sm:block" />
          <span className="hidden text-[8px] font-bold text-[#273253] sm:block">John Doe</span>
          <ChevronDown size={10} className="hidden sm:block" />
        </div>
      </div>

      <div className="grid gap-2 pt-2.5 md:grid-cols-[115px_1fr]">
        <aside className="hidden md:block">
          {sidebarItems.map(([Icon, item], index) => (
            <div
              key={item}
              className={`mb-0.5 flex items-center gap-2 rounded-md px-2 py-[6px] text-[8px] font-semibold ${
                index === 0 ? "bg-gradient-to-r from-[#5967f5] to-[#7657ee] text-white shadow-md" : "text-[#53617c]"
              }`}
            >
              <Icon size={11} strokeWidth={2} />
              {item}
            </div>
          ))}
        </aside>

        <div className="min-w-0">
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
            {stats.map(([label, value, growth]) => (
              <div key={label} className="rounded-md border border-[#edf0f6] bg-white px-2.5 py-2 shadow-[0_2px_6px_rgba(44,54,96,0.025)]">
                <p className="text-[7px] font-semibold text-[#8490a6]">{label}</p>
                <div className="mt-1 flex flex-wrap items-center gap-1">
                  <strong className="text-[13px] tracking-[-0.04em] text-[#263151]">{value}</strong>
                  <span className="text-[7px] font-bold text-[#45b883]">{growth}</span>
                </div>
                <p className="mt-1 text-[7px] text-[#a9b1c1]">vs last month</p>
              </div>
            ))}
          </div>

          <div className="mt-2 grid gap-2 sm:grid-cols-[1.55fr_0.95fr]">
            <SalesChart />
            <TopProjects />
          </div>

          <div className="mt-2 grid gap-2 sm:grid-cols-[1.18fr_0.8fr_1fr]">
            <RecentActivities />
            <LeadSource />
            <RevenueChart />
          </div>
        </div>
      </div>
    </div>
  );
}

function CardTitle({ children }: { children: React.ReactNode }) {
  return <h3 className="text-[8px] font-extrabold text-[#2e3959]">{children}</h3>;
}

function SalesChart() {
  return (
    <div className="rounded-md border border-[#edf0f6] bg-white p-2.5">
      <div className="flex items-center justify-between">
        <CardTitle>Sales Overview</CardTitle>
        <span className="inline-flex items-center gap-1 text-[7px] text-[#7e8aa2]">This Year <ChevronDown size={8} /></span>
      </div>
      <svg aria-label="Sales overview chart" viewBox="0 0 320 126" className="mt-1 h-[112px] w-full">
        {[20, 48, 76, 104].map((y) => <path key={y} d={`M24 ${y}H315`} stroke="#EEF1F7" strokeWidth="1" />)}
        <path
          d="M30 96 C45 88 50 66 67 73 C84 81 91 54 109 48 C129 41 140 59 157 54 C176 49 178 28 196 23 C216 17 222 55 243 51 C264 47 266 26 284 20 C294 18 301 10 310 5"
          fill="none"
          stroke="#5B67F2"
          strokeWidth="2.5"
          strokeLinecap="round"
        />
        <path
          d="M30 96 C45 88 50 66 67 73 C84 81 91 54 109 48 C129 41 140 59 157 54 C176 49 178 28 196 23 C216 17 222 55 243 51 C264 47 266 26 284 20 C294 18 301 10 310 5 L310 108 L30 108Z"
          fill="url(#chart-fill)"
          opacity=".34"
        />
        <defs>
          <linearGradient id="chart-fill" x1="0" x2="0" y1="0" y2="1">
            <stop stopColor="#7A84FF" />
            <stop offset="1" stopColor="#FFFFFF" />
          </linearGradient>
        </defs>
        {["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"].map((month, index) => (
          <text key={month} x={27 + index * 40} y="123" fontSize="7" fill="#99A3B7">{month}</text>
        ))}
      </svg>
    </div>
  );
}

function TopProjects() {
  const projects = [
    ["Sunrise Residency", "Rs 2.4 Cr", "bg-[#6673f2]"],
    ["Green View Heights", "Rs 1.8 Cr", "bg-[#44b8e9]"],
    ["Prime Enclave", "Rs 1.6 Cr", "bg-[#45c486]"],
    ["Skyline Towers", "Rs 1.3 Cr", "bg-[#f3a43e]"],
    ["Maple Meadows", "Rs 0.9 Cr", "bg-[#ef805f]"],
  ];
  return (
    <div className="rounded-md border border-[#edf0f6] bg-white p-2.5">
      <CardTitle>Top Projects</CardTitle>
      <div className="mt-2 space-y-1.5">
        {projects.map(([name, price, color], index) => (
          <div key={name} className="flex items-center justify-between gap-1">
            <span className="flex min-w-0 items-center gap-1.5">
              <span className={`grid h-[15px] w-[15px] shrink-0 place-items-center rounded-[4px] text-[7px] font-bold text-white ${color}`}>{index + 1}</span>
              <span className="truncate text-[7px] font-semibold text-[#56627c]">{name}</span>
            </span>
            <span className="shrink-0 text-[7px] font-extrabold text-[#303a58]">{price}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function RecentActivities() {
  return (
    <div className="rounded-md border border-[#edf0f6] bg-white p-2.5">
      <CardTitle>Recent Activities</CardTitle>
      <div className="mt-2 space-y-2">
        {[
          ["New lead received from Priya Sharma", "bg-[#58baf5]"],
          ["Booking confirmed for Unit 2B", "bg-[#4fc887]"],
          ["Maintenance request #1526 raised", "bg-[#f2ad43]"],
          ["Payment received from Flat 2A", "bg-[#8c71f1]"],
        ].map(([label, color]) => (
          <div key={label} className="flex items-center gap-1.5">
            <span className={`h-1.5 w-1.5 rounded-full ${color}`} />
            <span className="truncate text-[8px] text-[#78849a]">{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function LeadSource() {
  return (
    <div className="rounded-md border border-[#edf0f6] bg-white p-2.5">
      <CardTitle>Lead Source</CardTitle>
      <div className="mt-2 flex items-center justify-center gap-2">
        <div className="grid h-[58px] w-[58px] place-items-center rounded-full bg-[conic-gradient(#5a68ef_0_30%,#4db9e5_30%_55%,#53c58a_55%_77%,#f2ad43_77%_100%)]">
          <div className="grid h-10 w-10 place-items-center rounded-full bg-white text-center">
            <span className="text-[8px] font-extrabold text-[#33405c]">2,458<small className="block text-[5px] font-medium text-[#9ba4b6]">Total Leads</small></span>
          </div>
        </div>
        <div className="space-y-1 text-[5px] text-[#778397]">
          {["Website", "Referral", "Walk-ins", "Others"].map((item, index) => (
            <div key={item} className="flex items-center gap-1">
              <span className={`h-1.5 w-1.5 rounded-full text-[7px] ${["bg-[#5a68ef]", "bg-[#4db9e5]", "bg-[#53c58a]", "bg-[#f2ad43]"][index]}`} />
              {item}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function RevenueChart() {
  return (
    <div className="rounded-md border border-[#edf0f6] bg-white p-2.5">
      <div className="flex items-center justify-between">
        <CardTitle>Revenue Overview</CardTitle>
        <MoreHorizontal size={11} className="text-[#a8b0bf]" />
      </div>
      <div className="mt-4 flex h-[57px] items-end justify-around gap-2 border-b border-[#edf0f6] px-1">
        {[29, 47, 31, 40, 52, 45, 62].map((height, index) => (
          <span
            key={index}
            className="w-2 rounded-t-[2px] bg-gradient-to-t from-[#5364ee] to-[#7e84f7]"
            style={{ height }}
          />
        ))}
      </div>
      <div className="mt-1 flex justify-around text-[5px] text-[#9aa4b7]">
        {["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"].map((month) => <span key={month}>{month}</span>)}
      </div>
    </div>
  );
}