"use client";

import {
  Globe,
  TrendingUp,
  KeyRound,
  Link as LinkIcon,
  ArrowRight,
  AlertCircle,
  AlertTriangle,
  Clock,
  CheckCircle2,
} from "lucide-react";
import {
  LineChart,
  Line,
  XAxis,
  Tooltip,
  ResponsiveContainer,
  CartesianGrid,
  Area,
  YAxis,
} from "recharts";

const stats = [
  {
    label: "Organic Traffic",
    value: "9,412",
    change: "+12.4%",
    icon: Globe,
    iconBg: "bg-[#E0E7FF]",
    iconColor: "text-[#794AFF]",
  },
  {
    label: "Avg. Position",
    value: "#6.3",
    change: "-2.1",
    icon: TrendingUp,
    iconBg: "bg-[#D0FAE5]",
    iconColor: "text-green-600",
  },
  {
    label: "Keywords in Top 10",
    value: "248",
    change: "+31",
    icon: KeyRound,
    iconBg: "bg-[#FFEDD4]",
    iconColor: "text-orange-600",
  },
  {
    label: "Backlinks",
    value: "4,821",
    change: "+127",
    icon: LinkIcon,
    iconBg: "bg-[#F3E8FF]",
    iconColor: "text-purple-600",
  },
];

const data = [
  { name: "Apr 1", organic: 1200, paid: 400 },
  { name: "Apr 3", organic: 1350, paid: 450 },
  { name: "Apr 5", organic: 1500, paid: 420 },
  { name: "Apr 7", organic: 1450, paid: 480 },
  { name: "Apr 9", organic: 1650, paid: 520 },
  { name: "Apr 11", organic: 1850, paid: 500 },
  { name: "Apr 13", organic: 2100, paid: 550 },
];

export default function DashboardHome() {
  return (
    <div className="space-y-6">
      <div
        style={{
          background:
            "linear-gradient(90deg, #4F46E5 0%, #5545E6 12.5%, #5B44E7 25%, #6142E8 37.5%, #6741E9 50%, #6C40EA 62.5%, #723EEB 75%, #773CEC 87.5%, #7C3AED 100%)",
        }}
        className="rounded-2xl p-6 text-white flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 lg:gap-0"
      >
        <div>
          <h2 className="text-lg lg:text-xl font-semibold mb-1">
            Good morning, John! 👋
          </h2>
          <p className="text-sm lg:text-base text-[#C6D2FF]">
            You’re ranked for 12 new keywords this week. Keep it up!
          </p>
        </div>

        <button className="group bg-white/20 hover:bg-white/30 px-4 py-2 rounded-full text-sm flex items-center gap-2 transition">
          Run New Audit
          <ArrowRight
            size={16}
            className="transition-transform duration-200 group-hover:translate-x-1"
          />
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {stats.map((item, i) => {
          const Icon = item.icon;

          return (
            <div
              key={i}
              className="bg-white border border-[#DDDDDD] rounded-2xl p-5 shadow-sm hover:shadow-md transition"
            >
              <div className="flex items-center justify-between mb-4">
                <div
                  className={`w-10 h-10 rounded-lg flex items-center justify-center ${item.iconBg}`}
                >
                  <Icon className={item.iconColor} size={18} />
                </div>

                <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">
                  {item.change}
                </span>
              </div>

              <h3 className="text-2xl font-semibold text-[#0F172A] mb-1">
                {item.value}
              </h3>

              <p className="text-xs text-[#6A7282]">{item.label}</p>
            </div>
          );
        })}
      </div>

      <div className="bg-white border border-[#DDDDDD] rounded-2xl p-6 shadow-sm">
        <div className="flex justify-between items-center mb-4">
          <div>
            <h3 className="font-semibold text-[#0F172A]">Traffic Overview</h3>
            <p className="text-xs text-[#676767]">Last 14 days</p>
          </div>

          <div className="flex items-center gap-4 text-xs">
            <div className="flex items-center gap-1">
              <span className="w-2 h-2 rounded-full bg-[#794AFF]" />
              <span className="text-[#676767]">Organic</span>
            </div>
            <div className="flex items-center gap-1">
              <span className="w-2 h-2 rounded-full bg-orange-500" />
              <span className="text-[#676767]">Paid</span>
            </div>
          </div>
        </div>

        <div className="w-full h-60">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={data}>
              <CartesianGrid
                strokeDasharray="3 3"
                stroke="#EEEEEE"
                vertical={false}
              />

              <YAxis
                tick={{ fontSize: 12, fill: "#676767" }}
                axisLine={false}
                tickLine={false}
              />

              <XAxis
                dataKey="name"
                tick={{ fontSize: 12, fill: "#676767" }}
                axisLine={false}
                tickLine={false}
              />

              <Tooltip
                contentStyle={{
                  borderRadius: "10px",
                  border: "1px solid #DDDDDD",
                }}
              />

              <Area
                type="monotone"
                dataKey="organic"
                stroke="none"
                fill="#794AFF20"
                tooltipType="none"
              />

              <Line
                type="monotone"
                dataKey="organic"
                stroke="#794AFF"
                strokeWidth={2}
                dot={false}
              />

              <Line
                type="monotone"
                dataKey="paid"
                stroke="#FF8904"
                strokeWidth={2}
                dot={false}
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="space-y-6">
        <div>
          <div className="bg-white border border-[#DDDDDD] rounded-2xl p-6 shadow-sm">
            <div className="flex justify-between items-center mb-6">
              <h3 className="font-semibold text-[#3B3B3B]">
                Keyword Positions
              </h3>

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

            <div className="space-y-4">
              {[
                { label: "CRM software", value: 40 },
                { label: "project management", value: 75 },
                { label: "team collaboration", value: 20 },
                { label: "task manager", value: 95 },
                { label: "workflow tool", value: 50 },
                { label: "productivity app", value: 80 },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-4">
                  <p className="text-xs text-[#676767] w-32">{item.label}</p>

                  <div className="flex-1 h-3 bg-gray-100 rounded-full overflow-hidden">
                    <div
                      className="h-full rounded-full bg-[#794AFF]"
                      style={{ width: `${item.value}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>

            <div className="flex items-center justify-between mt-6 pl-32 text-xs text-[#676767]">
              <span>0</span>
              <span>4</span>
              <span>8</span>
              <span>12</span>
              <span>15</span>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white border border-[#DDDDDD] rounded-2xl p-6 shadow-sm">
          <div className="flex justify-between items-center mb-6">
            <h3 className="font-semibold text-[#3B3B3B]">Top Keywords</h3>

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

          <div className="text-sm">
            <div className="grid grid-cols-4 text-xs text-[#9CA3AF] pb-3 border-b border-[#F1F1F1]">
              <span>Keyword</span>
              <span className="text-center">Vol</span>
              <span className="text-center">Pos</span>
              <span className="text-right">Chg</span>
            </div>

            {[
              { k: "best crm software", vol: "12,400", pos: "#4", chg: "+2" },
              {
                k: "project management tool",
                vol: "8,200",
                pos: "#7",
                chg: "-1",
              },
              {
                k: "team collaboration software",
                vol: "6,800",
                pos: "#2",
                chg: "+5",
              },
              { k: "online task manager", vol: "4,300", pos: "#11", chg: "-" },
              { k: "workflow automation", vol: "9,100", pos: "#5", chg: "+3" },
            ].map((item, i) => {
              const isPositive = item.chg.includes("+");
              const isNegative = item.chg.includes("-");

              return (
                <div
                  key={i}
                  className="grid grid-cols-4 items-center py-4 border-b border-[#F7F7F7]"
                >
                  <span className="text-[#3B3B3B] font-medium">{item.k}</span>

                  <span className="text-center text-[#676767]">{item.vol}</span>

                  <div className="flex justify-center">
                    <span
                      className={`text-xs px-2.5 py-1 rounded-full font-medium ${
                        item.pos === "#2"
                          ? "bg-green-100 text-green-600"
                          : item.pos === "#4" ||
                              item.pos === "#5" ||
                              item.pos === "#7"
                            ? "bg-[#F3F0FF] text-[#794AFF]"
                            : "bg-gray-100 text-gray-600"
                      }`}
                    >
                      {item.pos}
                    </span>
                  </div>

                  <div className="flex justify-end items-center gap-1">
                    {isPositive && (
                      <span className="text-green-500 text-xs">↗</span>
                    )}
                    {isNegative && (
                      <span className="text-red-500 text-xs">↘</span>
                    )}
                    <span
                      className={`text-xs font-medium ${
                        isPositive
                          ? "text-green-500"
                          : isNegative
                            ? "text-red-500"
                            : "text-[#676767]"
                      }`}
                    >
                      {item.chg}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="bg-white border border-[#DDDDDD] rounded-2xl p-6 shadow-sm">
          <div className="flex justify-between items-center mb-6">
            <h3 className="font-semibold text-[#3B3B3B]">Recent SEO Issues</h3>

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

          <div className="space-y-4">
            {[
              {
                icon: AlertCircle,
                text: "4 pages with broken internal links",
                sub: "acme-corp.com/blog",
                color: "text-red-500",
                bg: "bg-red-100",
              },
              {
                icon: AlertTriangle,
                text: "12 images missing alt attributes",
                sub: "acme-corp.com/products",
                color: "text-yellow-500",
                bg: "bg-yellow-100",
              },
              {
                icon: Clock,
                text: "3 pages with thin content (<300 words)",
                sub: "acme-corp.com/about",
                color: "text-blue-500",
                bg: "bg-blue-100",
              },
              {
                icon: CheckCircle2,
                text: "Core Web Vitals passing on 94% of pages",
                sub: "All pages",
                color: "text-green-500",
                bg: "bg-green-100",
              },
            ].map((item, i) => {
              const Icon = item.icon;

              return (
                <div
                  key={i}
                  className="flex items-start gap-3 p-4 rounded-2xl bg-[#F9FAFB] border border-[#F1F1F1] hover:shadow-sm transition"
                >
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center ${item.bg}`}
                  >
                    <Icon size={16} className={item.color} />
                  </div>

                  <div>
                    <p className="text-sm font-medium text-[#3B3B3B]">
                      {item.text}
                    </p>
                    <p className="text-xs text-[#676767] mt-1">{item.sub}</p>
                  </div>
                </div>
              );
            })}
          </div>

          <button className="group mt-6 w-full border border-[#DDDDDD] py-3 rounded-full text-sm font-medium text-[#3B3B3B] flex items-center justify-center gap-2 hover:bg-[#FBFBFB] transition">
            Run Full SEO Audit
            <ArrowRight
              size={14}
              className="transition-transform duration-200 group-hover:translate-x-1"
            />
          </button>
        </div>
      </div>
    </div>
  );
}