import React, { useState } from 'react';

import type { ManualCompetitor } from '../../service/visibility/visibility.interface';

import AddCompetitorModal from './AddCompetitorModal';
import ConfirmRemoveCompetitorModal from './ConfirmRemoveCompetitorModal';

interface TrackedCompetitorsPanelProps {
  competitors: ManualCompetitor[];
  onChange: (competitors: ManualCompetitor[]) => void;
  clientId: string;
  token: string;
  brandId: string;
}

/**
 * "Tracked competitors" section that sits above the full leaderboard.
 * Contains add / remove affordances.
 */
const TrackedCompetitorsPanel = ({
  competitors,
  onChange,
  clientId,
  token,
  brandId,
}: TrackedCompetitorsPanelProps): JSX.Element => {
  const [addOpen, setAddOpen] = useState(false);
  const [removeTarget, setRemoveTarget] = useState<ManualCompetitor | null>(
    null
  );

  return (
    <>
      <div className="bg-white rounded-xl border border-gray-200 p-4">
        <div className="flex flex-col gap-3">
          <div className="flex items-center justify-between">
            <h2 className="text-base font-semibold text-gray-900">
              Tracked competitors
            </h2>
            <button
              type="button"
              onClick={() => setAddOpen(true)}
              className="inline-flex items-center gap-1.5 rounded-md bg-black px-3 py-1.5 text-sm font-medium text-white hover:bg-gray-800"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <line x1="12" y1="5" x2="12" y2="19" />
                <line x1="5" y1="12" x2="19" y2="12" />
              </svg>
              Add competitor
            </button>
          </div>

          {competitors.length === 0 ? (
            <p className="text-xs text-gray-500">
              You haven&apos;t added any competitors yet. Adding one forces it
              into the weekly leaderboard even when it scored zero mentions.
            </p>
          ) : (
            <div className="flex flex-col gap-2">
              {competitors.map(competitor => (
                <div
                  key={competitor.domain}
                  className="flex items-center justify-between"
                >
                  <div className="flex flex-col">
                    <span className="text-sm font-semibold text-gray-900">
                      {competitor.name || competitor.domain}
                    </span>
                    {competitor.name && (
                      <span className="text-xs text-gray-500">
                        {competitor.domain}
                      </span>
                    )}
                  </div>
                  <button
                    type="button"
                    onClick={() => setRemoveTarget(competitor)}
                    aria-label={`Stop tracking ${competitor.domain}`}
                    className="inline-flex items-center gap-1.5 text-sm font-medium text-red-600 hover:text-red-700"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polyline points="3 6 5 6 21 6" />
                      <path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6" />
                      <path d="M10 11v6" />
                      <path d="M14 11v6" />
                    </svg>
                    Stop tracking
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <AddCompetitorModal
        open={addOpen}
        onClose={() => setAddOpen(false)}
        onAdded={onChange}
        clientId={clientId}
        token={token}
        brandId={brandId}
      />

      <ConfirmRemoveCompetitorModal
        open={removeTarget !== null}
        competitor={removeTarget}
        onClose={() => setRemoveTarget(null)}
        onRemoved={onChange}
        clientId={clientId}
        token={token}
        brandId={brandId}
      />
    </>
  );
};

export default TrackedCompetitorsPanel;