"use client";

import {
  Search,
  AlertCircle,
  AlertTriangle,
  Info,
  ChevronDown,
  Zap,
  ArrowRight,
  Shield,
  TrendingUp,
} from "lucide-react";

export default function SEOAudit() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-semibold text-[#0F172A]">SEO Audit</h1>
        <p className="text-sm text-[#6A7282]">
          Get a comprehensive health score and actionable fixes list for any URL
        </p>
      </div>

      <div className="flex gap-3">
        <div className="flex-1 flex items-center border border-[#E5E7EB] hover:border-[#794AFF] rounded-lg px-3 py-2 bg-white">
          <Search size={16} className="text-[#99A1AF] mr-2" />
          <input
            type="text"
            placeholder="acme-corp.com"
            className="w-full text-sm focus:outline-none"
          />
        </div>

        <button className="bg-[#794AFF] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90">
          Run Audit
        </button>
      </div>

      <div className="bg-white rounded-xl border border-[#F3F4F6] p-5">
        <p className="text-sm text-[#0F172A] mb-4 font-semibold">
          Overall SEO Score – acme-corp.com
        </p>

        <div className="flex items-center gap-8 flex-wrap">
          <div className="flex flex-col items-center">
            <div className="w-20 h-20 rounded-full border-[6px] border-[#F97316] flex items-center justify-center text-[#F97316] font-semibold">
              78
            </div>
            <p className="text-xs text-[#6A7282] mt-2">Overall Score</p>
            <span className="text-xs mt-1 px-2 py-1 rounded-full bg-orange-100 text-orange-600">
              Needs Improvement
            </span>
          </div>

          {[
            { label: "Performance", value: 82, color: "#10B981" },
            { label: "On-Page SEO", value: 74, color: "#F97316" },
            { label: "Technical", value: 69, color: "#F97316" },
            { label: "Links", value: 88, color: "#10B981" },
          ].map((item, i) => (
            <div key={i} className="flex flex-col items-center">
              <div
                className="w-14 h-14 rounded-full border-4 flex items-center justify-center font-medium"
                style={{ borderColor: item.color, color: item.color }}
              >
                {item.value}
              </div>
              <p className="text-xs text-[#6A7282] mt-2">{item.label}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-3 gap-4">
        <div className="border-2 border-[#F3F4F6] hover:border-[#794AFF] bg-white rounded-xl p-4 flex items-center gap-3 shadow-sm">
          <AlertCircle className="text-red-500" size={18} />
          <div>
            <p className="text-base lg:text-lg font-bold text-[#0F172A]">3</p>
            <p className="text-xs text-[#6A7282]">Errors</p>
          </div>
        </div>

        <div className="border-2 border-[#F3F4F6] hover:border-[#794AFF] bg-white rounded-xl p-4 flex items-center gap-3 shadow-sm">
          <AlertTriangle className="text-yellow-500" size={18} />
          <div>
            <p className="text-base lg:text-lg font-bold text-[#0F172A]">4</p>
            <p className="text-xs text-[#6A7282]">Warnings</p>
          </div>
        </div>

        <div className="border-2 border-[#F3F4F6] hover:border-[#794AFF] bg-white rounded-xl p-4 flex items-center gap-3 shadow-sm">
          <Info className="text-blue-500" size={18} />
          <div>
            <p className="text-base lg:text-lg font-bold text-[#0F172A]">3</p>
            <p className="text-xs text-[#6A7282]">Notices</p>
          </div>
        </div>
      </div>

      <div className="flex gap-6 text-sm font-medium border-b border-[#E5E7EB] mb-4">
        <button className="text-[#794AFF] border-b-2 border-[#794AFF] pb-2">
          Errors (3)
        </button>
        <button className="text-[#6A7282] pb-2">Warnings (4)</button>
        <button className="text-[#6A7282] pb-2">Notices (3)</button>
      </div>

      <div className="bg-white rounded-xl border border-[#F3F4F6] p-5 space-y-4">
        {[
          {
            title: "Broken internal links detected",
            desc: "4 pages have broken links that affect crawlability and user experience.",
            pages: "4 pages",
          },
          {
            title: "Missing meta descriptions",
            desc: "8 pages are missing meta descriptions which reduces CTR in search results.",
            pages: "8 pages",
          },
          {
            title: "Duplicate title tags",
            desc: "3 page pairs share identical title tags causing keyword cannibalization.",
            pages: "6 pages",
          },
        ].map((item, i) => (
          <div
            key={i}
            className="border border-red-200 rounded-xl overflow-hidden"
          >
            <div className="flex justify-between items-center bg-red-50 px-4 py-3">
              <div className="flex items-center gap-2">
                <AlertCircle size={16} className="text-red-500" />
                <p className="text-sm font-medium text-[#0F172A]">
                  {item.title}
                </p>
              </div>

              <div className="flex items-center gap-3">
                <span className="text-xs px-2 py-1 rounded-full bg-red-100 text-red-600 font-medium">
                  High
                </span>
                <span className="text-xs text-[#6A7282]">{item.pages}</span>
                <ChevronDown size={16} className="text-[#99A1AF]" />
              </div>
            </div>

            <div className="px-4 py-3">
              <p className="text-xs text-[#6A7282] mb-2">{item.desc}</p>

              <button className="group flex items-center gap-1 text-xs text-[#794AFF] font-medium">
                View affected pages
                <ArrowRight
                  size={14}
                  className="transition-transform duration-200 group-hover:translate-x-1"
                />
              </button>
            </div>
          </div>
        ))}
      </div>

      <div className="bg-linear-to-r from-[#EEF2FF] to-[#FAF5FF] border border-[#E0E7FF] rounded-xl p-5 mt-6">
        <div className="flex items-center gap-2 mb-4">
          <Zap size={16} className="text-[#794AFF]" />
          <p className="text-sm font-semibold text-[#0F172A]">AI Quick Wins</p>
        </div>

        <div className="grid grid-cols-3 gap-4">
          <div className="bg-white rounded-xl p-4 border border-[#F3F4F6]">
            <TrendingUp size={16} className="text-[#794AFF] mb-2" />
            <p className="text-xs lg:text-sm text-[#364153]">
              Fix broken links → potential +12% crawl coverage
            </p>
            <span className="text-xs mt-3 inline-block px-2 py-1 rounded-full bg-red-100 text-red-600">
              High
            </span>
          </div>

          <div className="bg-white rounded-xl p-4 border border-[#F3F4F6]">
            <Shield size={16} className="text-[#794AFF] mb-2" />
            <p className="text-xs lg:text-sm text-[#364153]">
              Add missing meta descriptions → +8% estimated CTR lift
            </p>
            <span className="text-xs mt-3 inline-block px-2 py-1 rounded-full bg-red-100 text-red-600">
              High
            </span>
          </div>

          <div className="bg-white rounded-xl p-4 border border-[#F3F4F6]">
            <Zap size={16} className="text-[#794AFF] mb-2" />
            <p className="text-xs lg:text-sm text-[#364153]">
              Compress images → reduce LCP by ~0.8 seconds
            </p>
            <span className="text-xs mt-3 inline-block px-2 py-1 rounded-full bg-yellow-100 text-yellow-600">
              Medium
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}