import { ContentPage } from './ContentPage';
import type { DurationStats, FunnelItem } from '../types/data';

interface Funnel3DProps {
  data: FunnelItem[];
}

const Funnel3D = ({ data }: Funnel3DProps) => {
  const maxVal = Math.max(...data.map(d => d.value), 1);

  return (
    <div className="w-full flex flex-col space-y-2 py-4">
      {data.map((item, index) => {
        const ratio = item.value / maxVal;
        const width = 15 + (ratio * 85);
        const lightness = 100 - (ratio * 55);
        const bgColor = `hsl(210, 85%, ${lightness}%)`;
        const textColor = lightness < 65 ? '#ffffff' : '#1e293b';

        return (
          <div key={index} className="flex items-center w-full">
            <div className="w-[150px] text-left text-[13px] font-semibold text-gray-500 truncate">
              {item.label}
            </div>
            <div className="flex-grow h-[1px] bg-gradient-to-r from-gray-100 to-gray-300 mx-4 opacity-40"></div>
            <div className="w-[380px] flex justify-center">
              <div 
                className="relative h-[28px] rounded-[50%/40%] flex justify-center items-center font-bold text-[13px] shadow-sm border border-black/5"
                style={{ 
                  width: `${width}%`, 
                  backgroundColor: bgColor, 
                  color: textColor,
                }}
              >
                <div className="absolute top-0 left-0 right-0 h-[10px] bg-white/20 rounded-[50%/100%]"></div>
                <span>{item.value.toFixed(2)}%</span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

interface Page03DurationProps {
  durationData: DurationStats[];
  funnelData: FunnelItem[];
}

export const Page03Duration = ({ durationData = [], funnelData = [] }: Page03DurationProps) => {
  return (
    <ContentPage pageNumber={3} hidePageNumber={true}>
      <div className="flex flex-col space-y-8 -mx-[20px] px-[20px]">
        {/* Module 1: 重点地区采集时长分布 */}
        <div>
          <div className="title-container mb-4">
            <span className="blue-bar-title h-[22px]"></span>
            <h3 className="text-[22px] font-semibold text-[#333333] tracking-tight">重点地区采集时长分布</h3>
          </div>
          <div className="rounded-xl overflow-hidden border border-gray-100 bg-white shadow-sm break-inside-avoid">
            <table className="w-full text-[14px] border-collapse">
              <thead>
                <tr className="bg-[#ECF5FF] text-gray-700">
                  <th className="py-4 px-6 font-semibold text-left border-r border-white last:border-r-0">地区</th>
                  <th className="py-4 px-6 font-semibold text-center border-r border-white last:border-r-0">0-5分钟</th>
                  <th className="py-4 px-6 font-semibold text-center border-r border-white last:border-r-0">5-10分钟</th>
                  <th className="py-4 px-6 font-semibold text-center border-r border-white last:border-r-0">10-20分钟</th>
                  <th className="py-4 px-6 font-semibold text-center border-r border-white last:border-r-0">20分钟以上</th>
                </tr>
              </thead>
              <tbody>
                {durationData.slice(0, 10).map((row, index) => (
                  <tr key={index} className="border-b border-gray-50 last:border-b-0 hover:bg-gray-50 transition-colors text-gray-600">
                    <td className="py-3 px-6 text-left border-r border-gray-50 last:border-r-0 font-medium text-gray-700">{row.region}</td>
                    <td className="py-3 px-6 text-center border-r border-gray-50 last:border-r-0">{row.p0_5}</td>
                    <td className="py-3 px-6 text-center border-r border-gray-50 last:border-r-0">{row.p5_10}</td>
                    <td className="py-3 px-6 text-center border-r border-gray-50 last:border-r-0">{row.p10_20}</td>
                    <td className="py-3 px-6 text-center border-r border-gray-50 last:border-r-0 font-sans">{row.p20plus}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Module 2: 页面漏损分析 */}
      {funnelData.length > 0 && (
        <div>
          <div className="title-container mb-4">
            <span className="blue-bar-title h-[22px]"></span>
            <h3 className="text-[22px] font-semibold text-[#333333] tracking-tight">页面漏损分析</h3>
          </div>
          <div className="bg-white rounded-xl p-6 border border-gray-50 shadow-sm flex justify-center break-inside-avoid">
            <Funnel3D data={funnelData} />
          </div>
        </div>
        )}
      </div>
    </ContentPage>
  );
};
