import { useState } from "react";
import { type KeywordSection as KeywordSectionType } from "../assets/keyword-data";
import { KeywordRow } from "./KeywordRow";
import MetricCard from "./shared/MetricCard";
import MetricTooltip from "./shared/MetricTooltip";

interface KeywordSectionProps {
  section: KeywordSectionType;
}

export function KeywordSection({ section }: KeywordSectionProps) {
  const [isExpanded, setIsExpanded] = useState(section.expanded);

  return (
    <div className="flex flex-col border border-grey-300 bg-white">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="flex items-start gap-3 p-4 border-b border-grey-300 w-full text-left hover:bg-grey-50 transition-colors"
      >
        <div className="w-6 h-6 flex items-center justify-center shrink-0">
          {isExpanded ? (
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" fill="none">
              <path d="M1 1L7 7L13 0.999999" stroke="#65677D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          ) : (
            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none">
              <path d="M1 1L7 7L1 13" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          )}
        </div>
        <div className="flex flex-col flex-1">
          <h2 className="text-base font-semibold text-grey-950 leading-[22px]">{section.title}</h2>
          <p className="text-sm text-grey-700 leading-5">{section.subtitle}</p>
        </div>
      </button>

      {isExpanded && section.keywords.length > 0 && (
        <>
          <div className="grid grid-cols-12 gap-4 items-center px-6 pr-[52px] py-1.5 bg-grey-100 border-b border-grey-300">
            <div className="col-span-2">
              <span className="text-xs font-semibold text-grey-800 leading-[18px] ">Keyword</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">G Search Vol</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">G Pos #</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">Maps</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">AI Overview</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">Chat GPT</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">Gemini</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">Perplexity</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">Competition</span>
            </div>
            <div>
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">Prompt Explorer</span>
            </div>
            <div className="flex items-center gap-0.5">
              <span className="text-xs font-semibold text-grey-800 leading-[18px]">Beacons</span>

              <MetricTooltip extraTooltipText="Save to projects" tooltipText="first to enable monitoring and signal for Keywords" />
            </div>
          </div>

          <div className="bg-grey-50">
            {section.keywords.map((keyword) => (
              <KeywordRow key={keyword.id} keyword={keyword} />
            ))}
          </div>

          <div className="flex items-center justify-center gap-2 py-3.5 px-2 bg-[#FAFAFC]">
            <button className="text-sm font-medium text-[#4C60E5] underline leading-[17px] hover:text-primary/80 transition-colors">
              Load 10 More Keywords
            </button>
          </div>
        </>
      )}
    </div>
  );
}
