"use client"

import * as React from "react"
import { motion } from "framer-motion"
import { fadeUp, staggerContainer } from "@/lib/motion"
import { Bookmark, Users, FileSpreadsheet, Folder, CheckSquare, Square } from "lucide-react"

interface FolderItem {
  name: string
  active: boolean
  icon: string
}

interface SavedStatItem {
  category: string
  title: string
  value: string
  cagr: string
  checked: boolean
}

interface FeatureItem {
  text: string
  icon: string
}

interface WorkspaceData {
  badge: string
  title: string
  description: string
  features: FeatureItem[]
  mock: {
    url?: string
    folders: FolderItem[]
    savedItems: SavedStatItem[]
  }
}

export function WorkspaceMockup({ data }: { data: WorkspaceData }) {
  const [folders, setFolders] = React.useState(data.mock.folders)
  const [stats, setStats] = React.useState(data.mock.savedItems)

  if (!data) return null

  const handleFolderClick = (index: number) => {
    setFolders(prev => prev.map((f, i) => ({
      ...f,
      active: i === index
    })))
  }

  const handleCheckboxClick = (index: number) => {
    setStats(prev => prev.map((s, i) => ({
      ...s,
      checked: i === index ? !s.checked : s.checked
    })))
  }

  const checkedCount = stats.filter(s => s.checked).length

  return (
    <section className="bg-navy relative overflow-hidden py-18 pb-20 border-b border-[#0A0D14]">
      {/* Background pattern */}
      <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.045)_1px,transparent_1px)] bg-[size:28px_28px]" />
      
      <div className="relative max-w-[1240px] mx-auto px-7 z-10">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="grid md:grid-cols-[0.85fr_1.15fr] gap-12 items-center"
        >
          {/* Left Text */}
          <motion.div variants={fadeUp} className="space-y-5.5">
            <div className="inline-flex items-center gap-2.5 text-[11px] font-bold tracking-wider uppercase text-accent-gold">
              <span className="w-5.5 h-[1.5px] bg-accent-gold" />
              {data.badge}
            </div>
            
            <h2 className="font-display text-[34px] md:text-[38px] leading-[1.12] tracking-[-0.3px] text-white">
              {data.title}
            </h2>
            
            <p className="text-[15px] leading-[1.75] font-light text-white/66 mb-6">
              {data.description}
            </p>

            <div className="flex flex-col gap-3.5 pt-2">
              {data.features.map((feature, idx) => {
                const IconComponent =
                  feature.icon === "ti-bookmark" ? Bookmark :
                  feature.icon === "ti-users" ? Users :
                  FileSpreadsheet;
                return (
                  <div key={idx} className="flex items-center gap-3 text-sm text-white/80 font-sans font-light">
                    <IconComponent className="size-4.5 text-accent-gold shrink-0" />
                    <span>{feature.text}</span>
                  </div>
                );
              })}
            </div>
          </motion.div>

          {/* Right Workspace mockup */}
          <motion.div
            variants={fadeUp}
            className="border border-white/14 rounded-[8px] overflow-hidden shadow-[0_30px_70px_rgba(0,0,0,0.35)] bg-[#F7F6F3]"
          >
            {/* Top Bar */}
            <div className="bg-[#0A0D14] p-2.5 px-4 flex items-center gap-2">
              <span className="w-2.5 h-2.5 rounded-full bg-[#ff5f57]" />
              <span className="w-2.5 h-2.5 rounded-full bg-[#febc2e]" />
              <span className="w-2.5 h-2.5 rounded-full bg-[#28c840]" />
              <span className="text-[11.5px] text-white/50 ml-2.5 font-mono">
                {data.mock.url || "app.meticulousresearch.com"}
              </span>
            </div>

            {/* Mock Layout */}
            <div className="grid grid-cols-[150px_1fr] min-h-[300px]">
              {/* Folder list */}
              <div className="bg-white border-r border-[#E2DDD6] p-4 px-3">
                <div className="text-[9.5px] font-bold tracking-wider uppercase text-[#9A968E] mb-3 font-sans">
                  Folders
                </div>
                {folders.map((fold, idx) => (
                  <div
                    key={idx}
                    onClick={() => handleFolderClick(idx)}
                    className={`flex items-center gap-2 text-[12.5px] rounded-[4px] p-2 py-1.8 cursor-pointer select-none transition-colors mb-1 ${
                      fold.active
                        ? "font-semibold text-navy bg-navy/7"
                        : "text-[#6B6760] hover:bg-black/5"
                    }`}
                  >
                    <Folder className="size-3.5" />
                    <span>{fold.name}</span>
                  </div>
                ))}
              </div>

              {/* Stats view */}
              <div className="p-4 flex flex-col">
                <div className="flex items-center justify-between mb-3.5">
                  <div className="text-[13px] font-semibold text-[#0A0D14] font-sans">
                    {folders.find(f => f.active)?.name}{" "}
                    <span className="text-[11px] text-[#9A968E] font-normal">&middot; {checkedCount} selected</span>
                  </div>
                  <span className="text-[11px] md:text-[11.5px] font-semibold text-white bg-[#1A7340] hover:bg-[#1A7340]/90 transition-colors rounded-[3px] p-[6px_12px] flex items-center gap-1 cursor-pointer select-none">
                    <FileSpreadsheet className="size-3" />
                    Export selected
                  </span>
                </div>

                {/* Cards grid */}
                <div className="grid grid-cols-2 gap-2.5">
                  {stats.map((stat, idx) => (
                    <div
                      key={idx}
                      onClick={() => handleCheckboxClick(idx)}
                      className="bg-white border border-[#E2DDD6] rounded-[5px] p-3.5 flex flex-col cursor-pointer hover:border-[#C8C3BA] transition-colors"
                    >
                      <div className="flex justify-between items-start">
                        <span className="text-[9.5px] font-bold text-gold uppercase tracking-wider">
                          {stat.category}
                        </span>
                        {stat.checked ? (
                          <CheckSquare className="size-4 text-navy fill-navy/5 shrink-0" />
                        ) : (
                          <Square className="size-4 text-[#C8C3BA] shrink-0" />
                        )}
                      </div>
                      <div className="text-[12px] font-semibold text-ink leading-[1.35] my-2">
                        {stat.title}
                      </div>
                      <div className="flex items-baseline justify-between mt-auto">
                        <span className="font-display text-[17px] text-navy leading-none">
                          {stat.value}
                        </span>
                        <span className="text-[10px] font-bold text-[#1A7340]">
                          {stat.cagr}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}