"use client";

import { AlignLeft, CheckCircle2, Lightbulb } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const PAGE_SECTIONS = [
  { id: "section1", title: "ارزیابی وضعیت فعلی" },
  { id: "section2", title: "طراحی جریان کار جدید" },
  { id: "section3", title: "استقرار و آموزش تیم" },
  { id: "section4", title: "نتایج و دستاوردها" },
];

const OUTCOMES = [
  "داشبورد یکپارچه برای نمایش بلادرنگ شاخص‌های کلیدی عملکرد",
  "سیستم مدیریت ارتباط با مشتری با قابلیت یکپارچه‌سازی با ابزارهای سازمانی",
  "راهکار مقیاس‌پذیر با قابلیت توسعه همزمان با رشد سازمان",
];

interface CaseStudy3Props {
  className?: string;
}

const CaseStudy3 = ({ className }: CaseStudy3Props) => {
  const [activeSection, setActiveSection] = useState<string | null>(null);
  const sectionRefs = useRef<Record<string, HTMLElement>>({});

  useEffect(() => {
    const sections = Object.keys(sectionRefs.current);

    const observerCallback = (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setActiveSection(entry.target.id);
        }
      });
    };

    let observer: IntersectionObserver | null = new IntersectionObserver(
      observerCallback,
      {
        root: null,
        rootMargin: "0px",
        threshold: 1,
      },
    );

    sections.forEach((sectionId) => {
      const element = sectionRefs.current[sectionId];
      if (element) {
        observer?.observe(element);
      }
    });

    return () => {
      observer?.disconnect();
      observer = null;
    };
  }, []);

  const addSectionRef = (id: string, ref: HTMLElement | null) => {
    if (ref) {
      sectionRefs.current[id] = ref;
    }
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-prose flex-col items-center justify-between gap-10 lg:max-w-none lg:flex-row">
          <div className="text-start">
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem>
                  <BreadcrumbLink href="/">خانه</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbLink href="#">گزارش‌های موفقیت</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbPage>جریان کار تیم</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
            <h1 className="mt-10 text-2xll font-semibold text-balance lg:text-2xll">
              چگونه یک پلتفرم یکپارچه بهره‌وری تیم‌ها را افزایش داد
                                      </h1>
            <div className="mt-16">
              <p className="font-medium">مطالعه موردی</p>
              <div className="mt-4 flex items-center gap-4">
                <Avatar className="size-16 rounded-xl border">
                  <AvatarImage
                    src="/block-media/shadcnblocks/block/avatar-1.webp"
                    alt="مهسا نوری"
                  />
                </Avatar>
                <div className="flex flex-col">
                  <p className="font-semibold">مهسا نوری</p>
                  <p className="text-muted-foreground">مدیر ارشد محصول</p>
                </div>
              </div>
            </div>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="داشبورد مدیریت جریان کار تیم"
            className="max-h-[524px] w-full rounded-xl object-cover lg:w-auto"
          />
        </div>
        <div className="relative mt-20 flex flex-col gap-x-6 gap-y-16 lg:flex-row">
          <aside className="mx-auto h-fit max-w-prose text-start lg:sticky lg:top-10 lg:mx-0 lg:w-64 lg:max-w-none">
            <img
              src="/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg"
              alt="لوگوی ری یو آی"
              className="h-6 dark:invert"
            />
            <div className="mt-6 grid grid-cols-2 gap-5 lg:grid-cols-1">
              <div className="col-span-2 lg:col-span-1">
                <h2 className="font-semibold">نمای کلی</h2>
                <p className="mt-1 text-sm text-muted-foreground">
                  این پلتفرم با یکپارچه‌سازی داده‌ها، خودکارسازی فرایندها و ایجاد دیدی جامع از عملکرد سازمان، تصمیم‌گیری سریع‌تر و همکاری مؤثرتر میان تیم‌ها را ممکن کرده است.
                                                  </p>
              </div>
              <div>
                <h2 className="font-semibold">حوزه</h2>
                <p className="mt-1 text-sm text-muted-foreground">
                  فناوری؛ اتوماسیون
                </p>
              </div>
              <div>
                <h2 className="font-semibold">اندازه تیم</h2>
                <p className="mt-1 text-sm text-muted-foreground">۱۰ تا ۱۰۰ نفر</p>
              </div>
              <div>
                <h2 className="font-semibold">موقعیت</h2>
                <p className="mt-1 text-sm text-muted-foreground">
                  سانفرانسیسکو، کالیفرنیا
                </p>
              </div>
              <div>
                <h2 className="font-semibold">تأسیس</h2>
                <p className="mt-1 text-sm text-muted-foreground">۲۲۰</p>
              </div>
              <div>
                <h2 className="font-semibold">سرمایه‌گذاری</h2>
                <p className="mt-1 text-sm text-muted-foreground">
                  ۲۵ میلیون ریال (سری A)
                </p>
              </div>
              <div>
                <h2 className="font-semibold">قابلیت‌های اصلی</h2>
                <p className="mt-1 text-sm text-muted-foreground">
                  داشبوردها، ابزارها، یکپارچگی اتصال هوشمند
                </p>
              </div>
            </div>
            <div className="mt-10 flex flex-col">
              <span className="mb-2 text-sm text-muted-foreground">
                اشتراک‌گذاری این مطلب:
              </span>
              <div className="flex gap-4">
                <a
                  href="#"
                  aria-label="اشتراک در شبکه حرفه‌ای"
                  className="text-muted-foreground hover:text-primary"
                >
                  <FaLinkedin className="size-5" />
                </a>
                <a
                  href="#"
                  aria-label="اشتراک در شبکه اجتماعی"
                  className="text-muted-foreground hover:text-primary"
                >
                  <FaTwitter className="size-5" />
                </a>
                <a
                  href="#"
                  aria-label="اشتراک در شبکه اجتماعی"
                  className="text-muted-foreground hover:text-primary"
                >
                  <FaFacebook className="size-5" />
                </a>
              </div>
            </div>
          </aside>
          <div className="flex">
            <div className="mx-auto max-w-prose lg:max-w-4xl lg:px-20">
              <div className="grid gap-x-10 gap-y-7 rounded-3xl border p-6 text-start lg:grid-cols-2 lg:gap-y-10 lg:border-none lg:p-0">
                <div>
                  <h2 className="text-xl font-semibold">مسئله</h2>
                  <p className="mt-3 text-muted-foreground">
                    پراکندگی داده‌ها، ابزارهای متعدد و نبود یک منبع واحد اطلاعات باعث کاهش سرعت تصمیم‌گیری و ایجاد ناهماهنگی میان تیم‌های فروش، بازاریابی و محصول شده بود.
                                                        </p>
                </div>
                <Separator className="w-full lg:hidden" />
                <div>
                  <h2 className="text-xl font-semibold">رویکرد</h2>
                  <p className="mt-3 text-muted-foreground">
                    یک پلتفرم متمرکز برای مدیریت داده‌ها و خودکارسازی فرایندها پیاده‌سازی شد تا همه تیم‌ها بر پایه اطلاعات یکسان تصمیم‌گیری کنند.
                                                        </p>
                </div>
                <div className="border-t pt-10 lg:col-span-2">
                  <h2 className="text-xl font-semibold">دستاوردها</h2>
                  <ul className="mt-3 grid gap-x-10 gap-y-3 lg:grid-cols-2">
                    {OUTCOMES.map((outcome) => (
                      <li key={outcome} className="flex gap-3">
                        <CheckCircle2 className="mt-0.5 size-5 shrink-0" />
                        <p className="font-semibold">{outcome}</p>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
              <div className="mt-20">
                <section
                  id="section1"
                  ref={(ref) => addSectionRef("section1", ref)}
                  className="prose mb-8 text-start dark:prose-invert"
                >
                  <h2>ارزیابی وضعیت فعلی</h2>
                  <p>
                    تیم پس از بررسی دقیق فرآیندهای داخلی، دریافت که ابزارهای
                    پراکنده و نبود یک منبع واحد حقیقت، بزرگ‌ترین مانع
                    هماهنگی بین بخش‌هاست.{" "}
                    <a href="#">گزارش ارزیابی</a> نشان داد بیش از ۴۰ درصد زمان تیم صرف انتقال اطلاعات و هماهنگی دستی میان ابزارهای مختلف می‌شود.
                                                        </p>
                  <blockquote>
                    «تا وقتی داده‌ها پراکنده باشند، هیچ جریان کاری واقعاً
                    کارآمد نخواهد بود.»
                  </blockquote>
                </section>
                <section
                  id="section2"
                  ref={(ref) => addSectionRef("section2", ref)}
                  className="prose mb-8 text-start dark:prose-invert"
                >
                  <h2>طراحی جریان کار جدید</h2>
                  <p>
                    تیم فنی و محصول با همکاری نزدیک، معماری جدیدی طراحی کردند
                    که همه داده‌های مشتری و محصول را در یک پلتفرم متمرکز
                    می‌کند:
                  </p>
                  <ul>
                    <li>سطح ۱  یکپارچه‌سازی داده: اتصال سامانه ارتباط با مشتری و فروش و ابزارهای تحلیل</li>
                    <li>سطح ۲  خودکارسازی: حذف وظایف تکراری بین تیم‌ها</li>
                    <li>سطح ۳  بینش بلادرنگ: داشبوردهای تصمیم‌گیری برای مدیران</li>
                  </ul>
                  <p>
                    پیاده‌سازی مرحله‌ای باعث شد بدون ایجاد اختلال در فعالیت‌های روزانه، سامانه جدید به‌تدریج در کل سازمان مستقر شود.
                                                        </p>
                </section>
                <section
                  id="section3"
                  ref={(ref) => addSectionRef("section3", ref)}
                  className="prose mb-8 text-start dark:prose-invert"
                >
                  <h2>استقرار و آموزش تیم</h2>
                  <p className="leading-7 not-first:mt-6">
                    استقرار به‌صورت مرحله‌ای انجام شد: ابتدا تیم فروش، سپس
                    پشتیبانی و در نهایت بازاریابی. هر فاز شامل کارگاه آموزشی،
                    مستندسازی و یک هفته پشتیبانی اختصاصی بود.
                  </p>
                  <p className="leading-7 not-first:mt-6">
                    تنها یک ماه پس از استقرار، بیشتر اعضای تیم به‌صورت مستقل از سامانه استفاده می‌کردند و زمان پاسخ‌گویی بین واحدها به میزان قابل توجهی کاهش یافت.
                                                        </p>
                </section>

                <section
                  id="section4"
                  ref={(ref) => addSectionRef("section4", ref)}
                  className="prose mb-8 text-start dark:prose-invert"
                >
                  <h2>نتایج و دستاوردها</h2>
                  <p>
                    شش ماه پس از اجرای پروژه، شاخص‌های بهره‌وری، سرعت تصمیم‌گیری و همکاری میان تیم‌ها رشد محسوسی را تجربه کردند.
                                                        </p>
                  <div>
                    <table>
                      <thead>
                        <tr>
                          <th>کارایی تیم</th>
                          <th>رضایت مشتری</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>پایین</td>
                          <td>متوسط</td>
                        </tr>
                        <tr className="m-0 border-t p-0 even:bg-muted">
                          <td>در حال بهبود</td>
                          <td>خوب</td>
                        </tr>
                        <tr className="m-0 border-t p-0 even:bg-muted">
                          <td>بالا</td>
                          <td>عالی</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <p>
                    مهم‌ترین درس این پروژه آن بود که موفقیت هر تحول دیجیتال، علاوه بر فناوری، به آموزش کاربران و پذیرش تغییر در سازمان وابسته است.
                                                        </p>
                  <Alert>
                    <Lightbulb className="h-4 w-4" />
                    <AlertTitle>نکته کلیدی</AlertTitle>
                    <AlertDescription>
                      پیش از استقرار گسترده، یک پروژه آزمایشی کوچک با یک تیم
                      اجرا کنید و بازخورد واقعی جمع‌آوری کنید.
                    </AlertDescription>
                  </Alert>
                </section>
              </div>
            </div>
            <div className="sticky top-8 hidden h-fit shrink-0 text-start lg:block">
              <span className="flex items-center gap-2 text-sm">
                <AlignLeft className="h-4 w-4" />
                در این صفحه
              </span>
              <nav className="mt-2 text-sm" aria-label="فهرست مطالب صفحه">
                <ul>
                  {PAGE_SECTIONS.map((section) => (
                    <li key={section.id}>
                      <a
                        href={`#${section.id}`}
                        className={cn(
                          "block py-1 transition-colors duration-200",
                          activeSection === section.id
                            ? "font-medium text-primary"
                            : "text-muted-foreground hover:text-primary",
                        )}
                      >
                        {section.title}
                      </a>
                    </li>
                  ))}
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { CaseStudy3 };