"use client";

import { Search, Download, Plus, TrendingUp, ChevronDown } from "lucide-react";

export default function KeywordResearch() {
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-start">
        <div>
          <h1 className="text-xl font-semibold text-[#0F172A]">
            Keyword Research
          </h1>
          <p className="text-sm text-[#6A7282]">
            Discover high-value keywords with AI-powered suggestions
          </p>
        </div>

        <div className="flex gap-3">
          <button className="flex items-center gap-2 border border-[#E5E7EB] px-4 py-2 rounded-lg text-sm text-[#364153] bg-white hover:bg-gray-50">
            <Download size={16} />
            Export
          </button>

          <button className="flex items-center gap-2 bg-[#794AFF] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90">
            <Plus size={16} />
            Add Keywords
          </button>
        </div>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {[
          { label: "Total Keywords", value: "10" },
          { label: "Avg. KD", value: "51.2" },
          { label: "Total Monthly Volume", value: "70.5K" },
          { label: "Avg. CPC", value: "₹340" },
        ].map((item, i) => (
          <div
            key={i}
            className="bg-white rounded-xl border border-[#F3F4F6] p-5 shadow-sm"
          >
            <p className="text-2xl font-semibold text-[#0F172A]">
              {item.value}
            </p>
            <p className="text-xs text-[#6A7282] mt-1">{item.label}</p>
          </div>
        ))}
      </div>

      <div className="bg-white rounded-xl border border-[#F3F4F6] p-5 shadow-sm">
        <p className="text-sm lg:text-base font-semibold text-[#0F172A] mb-4">
          Top Keyword Volume Trend — "best crm software"
        </p>

        <div className="flex items-end justify-between h-32 gap-4">
          {["Nov", "Dec", "Jan", "Feb", "Mar", "Apr"].map((m, i) => (
            <div key={i} className="flex flex-col items-center gap-2 w-full">
              <div
                className="w-full rounded-md bg-[#794AFF]"
                style={{ height: `${60 + i * 10}px` }}
              />
              <p className="text-xs text-[#6A7282]">{m}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-white rounded-xl border border-[#F3F4F6] p-5 shadow-sm">
        <div className="flex justify-between items-center mb-5">
          <div className="flex items-center border border-[#E5E7EB] rounded-lg px-3 py-2 w-1/2">
            <Search size={16} className="text-[#99A1AF] mr-2" />
            <input
              placeholder="Search keywords..."
              className="w-full text-sm focus:outline-none"
            />
          </div>

          <div className="flex gap-2">
            {["All", "Commercial", "Informational", "Navigational"].map(
              (tab, i) => (
                <button
                  key={i}
                  className={`px-3 py-1.5 rounded-full text-xs font-medium ${
                    i === 0
                      ? "bg-[#794AFF] text-white"
                      : "bg-[#F3F4F6] text-[#6A7282]"
                  }`}
                >
                  {tab}
                </button>
              ),
            )}
          </div>
        </div>

        <div className="grid grid-cols-7 text-xs text-[#99A1AF] pb-3 border-b border-[#F3F4F6]">
          <p>Keyword</p>
          <p>Volume ↑↓</p>
          <p>KD ↑↓</p>
          <p>CPC</p>
          <p>Intent</p>
          <p>Trend</p>
          <p>Suggestions</p>
        </div>

        <div className="divide-y divide-[#F3F4F6]">
          <div className="py-4">
            <div className="grid grid-cols-7 items-center gap-4">
              <p className="text-sm text-[#0F172A] font-medium">
                what is agile methodology
              </p>

              <p className="text-sm text-[#364153]">14,600</p>

              <div className="flex items-center gap-2">
                <div className="w-16 h-2 bg-[#F3F4F6] rounded-full overflow-hidden">
                  <div
                    className="h-full bg-orange-400"
                    style={{ width: "52%" }}
                  />
                </div>
                <span className="text-xs bg-orange-100 text-orange-600 px-2 py-0.5 rounded">
                  52
                </span>
              </div>

              <p className="text-sm text-[#364153]">₹200</p>

              <span className="w-fit text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-600">
                Informational
              </span>

              <TrendingUp size={16} className="text-green-500" />

              <ChevronDown size={16} className="text-[#99A1AF]" />
            </div>

            <div className="mt-3 bg-[#F6F7FB] rounded-lg px-3 py-2 flex items-center gap-2 flex-wrap">
              <span className="text-xs text-[#99A1AF] mr-2">AI Suggested:</span>

              {[
                "agile vs waterfall",
                "agile framework explained",
                "scrum vs kanban",
              ].map((tag, i) => (
                <span
                  key={i}
                  className="text-xs px-2 py-1 rounded-full bg-white border border-[#E5E7EB] text-[#794AFF]"
                >
                  + {tag}
                </span>
              ))}
            </div>
          </div>

          <div className="py-4">
            <div className="grid grid-cols-7 items-center gap-4">
              <p className="text-sm text-[#0F172A] font-medium">
                best crm software
              </p>

              <p className="text-sm text-[#364153]">12,400</p>

              <div className="flex items-center gap-2">
                <div className="w-16 h-2 bg-[#F3F4F6] rounded-full overflow-hidden">
                  <div className="h-full bg-red-500" style={{ width: "72%" }} />
                </div>
                <span className="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded">
                  72
                </span>
              </div>

              <p className="text-sm text-[#364153]">₹200</p>

              <span className="w-fit text-xs px-2 py-1 rounded-full bg-purple-100 text-purple-600">
                Commercial
              </span>

              <TrendingUp size={16} className="text-green-500" />

              <ChevronDown size={16} className="text-[#99A1AF]" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}