'use client';

import { useEffect, useRef, useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Building2, CheckCircle2, TrendingUp, Users, Target } from 'lucide-react';
import { CASES, COMPANY_INFO } from '@/lib/constants';
import type { StaticImageData } from 'next/image';

interface CaseResult {
  label: string;
  value: string;
}

interface CaseItem {
  id: string;
  title: string;
  client: string;
  industry: string;
  description: string;
  results: readonly CaseResult[];
  tags: readonly string[];
  image?: string | StaticImageData;
}

interface CaseDetailClientProps {
  caseItem: CaseItem;
}

export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
  const [isVisible, setIsVisible] = useState(false);
  const contentRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.1 }
    );

    if (contentRef.current) {
      observer.observe(contentRef.current);
    }

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

  const relatedCases = CASES.filter((c) => c.id !== caseItem.id).slice(0, 2);

  const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
    '业务处理效率': TrendingUp,
    '客户满意度': Users,
    '运营成本': Target,
    '生产效率': TrendingUp,
    '设备利用率': Target,
    '不良品率': CheckCircle2,
    '数据整合效率': TrendingUp,
    '决策响应时间': Target,
    '营销转化率': Users,
  };

  return (
    <main className="min-h-screen bg-white">
      <div className="pt-16">
        <div className="relative h-[40vh] min-h-[300px] bg-gradient-to-br from-[#C41E3A] to-[#8B1429] overflow-hidden">
          <div className="absolute inset-0 bg-black/20" />
          <div className="absolute inset-0 flex items-center justify-center">
            <Building2 className="w-32 h-32 text-white/10" />
          </div>
          
          <div className="absolute top-6 left-6 z-10">
            <Link href="/#cases">
              <Button variant="ghost" className="text-white hover:bg-white/10">
                <ArrowLeft className="w-4 h-4 mr-2" />
                返回案例
              </Button>
            </Link>
          </div>

          <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/60 to-transparent">
            <div className="container-wide">
              <Badge className="mb-4 bg-white/20 text-white hover:bg-white/30">
                {caseItem.industry}
              </Badge>
              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-white mb-2">
                {caseItem.title}
              </h1>
              <p className="text-lg text-white/80">
                {caseItem.client}
              </p>
            </div>
          </div>
        </div>

        <div ref={contentRef} className="container-wide py-12 md:py-16">
          <div
            className={`
              grid lg:grid-cols-3 gap-8 lg:gap-12
              opacity-0 translate-y-4
              ${isVisible ? 'animate-fade-in-up' : ''}
            `}
          >
            <div className="lg:col-span-2 space-y-8">
              <section>
                <h2 className="text-2xl font-semibold text-[#171717] mb-4">项目背景</h2>
                <p className="text-[#525252] leading-relaxed">
                  {caseItem.description}
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-semibold text-[#171717] mb-4">解决方案</h2>
                <div className="space-y-4">
                  {caseItem.tags.map((tag, index) => (
                    <div key={tag} className="flex items-start gap-3">
                      <div className="w-6 h-6 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                        <CheckCircle2 className="w-4 h-4 text-white" />
                      </div>
                      <div>
                        <h3 className="font-medium text-[#171717]">{tag}</h3>
                        <p className="text-sm text-[#737373]">
                          基于 {tag} 技术的专业解决方案，助力企业实现数字化转型目标。
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </section>

              <section>
                <h2 className="text-2xl font-semibold text-[#171717] mb-4">项目成果</h2>
                <div className="grid sm:grid-cols-3 gap-4">
                  {caseItem.results.map((result) => {
                    const Icon = iconMap[result.label] || TrendingUp;
                    return (
                      <div
                        key={result.label}
                        className="p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
                      >
                        <Icon className="w-8 h-8 text-[#C41E3A] mb-3" />
                        <div className="text-2xl font-semibold text-[#C41E3A] mb-1">
                          {result.value}
                        </div>
                        <div className="text-sm text-[#737373]">{result.label}</div>
                      </div>
                    );
                  })}
                </div>
              </section>
            </div>

            <div className="space-y-6">
              <div className="p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5]">
                <h3 className="text-lg font-semibold text-[#171717] mb-4">项目信息</h3>
                <dl className="space-y-3">
                  <div>
                    <dt className="text-sm text-[#737373]">客户名称</dt>
                    <dd className="text-[#171717] font-medium">{caseItem.client}</dd>
                  </div>
                  <div>
                    <dt className="text-sm text-[#737373]">行业领域</dt>
                    <dd className="text-[#171717] font-medium">{caseItem.industry}</dd>
                  </div>
                  <div>
                    <dt className="text-sm text-[#737373]">技术标签</dt>
                    <dd className="flex flex-wrap gap-2 mt-1">
                      {caseItem.tags.map((tag) => (
                        <Badge key={tag} variant="secondary" className="text-xs">
                          {tag}
                        </Badge>
                      ))}
                    </dd>
                  </div>
                </dl>
              </div>

              <div className="p-6 bg-gradient-to-br from-[#C41E3A] to-[#8B1429] rounded-lg text-white">
                <h3 className="text-lg font-semibold mb-2">想要了解更多？</h3>
                <p className="text-sm text-white/80 mb-4">
                  联系我们的专家团队，获取定制化解决方案
                </p>
                <Link href="/#contact">
                  <Button className="w-full bg-white text-[#C41E3A] hover:bg-white/90">
                    联系我们
                  </Button>
                </Link>
              </div>
            </div>
          </div>

          {relatedCases.length > 0 && (
            <section className="mt-16 pt-16 border-t border-[#E5E5E5]">
              <h2 className="text-2xl font-semibold text-[#171717] mb-8">相关案例</h2>
              <div className="grid md:grid-cols-2 gap-6">
                {relatedCases.map((relatedCase) => (
                  <Link
                    key={relatedCase.id}
                    href={`/cases/${relatedCase.id}`}
                    className="group p-6 bg-[#FAFAFA] rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
                  >
                    <Badge variant="secondary" className="mb-2">
                      {relatedCase.industry}
                    </Badge>
                    <h3 className="text-lg font-semibold text-[#171717] group-hover:text-[#C41E3A] transition-colors">
                      {relatedCase.title}
                    </h3>
                    <p className="text-sm text-[#737373] mt-2 line-clamp-2">
                      {relatedCase.description}
                    </p>
                  </Link>
                ))}
              </div>
            </section>
          )}
        </div>
      </div>
    </main>
  );
}
