import { useState } from 'react';
import { CheckCircle2, ChevronDown, Circle, X } from 'lucide-react';
import { __, sprintf } from '../lib/i18n';

type ChecklistItem = {
  id: string;
  label: string;
  done: boolean;
  href?: string;
};

type FirstWeekEmptyStateProps = {
  llmsTxtExists: boolean;
  robotsHasLlmsReference: boolean;
  botVisits30Days: number;
  contentSettingsUrl: string;
  agentReadyUrl: string;
};

const DISMISSED_STORAGE_KEY = 'llmagnet_journey_dismissed';
const COLLAPSED_STORAGE_KEY = 'llmagnet_journey_collapsed';

function readFlag(key: string): boolean {
  try {
    return localStorage.getItem(key) === '1';
  } catch {
    return false;
  }
}

function writeFlag(key: string, value: boolean): void {
  try {
    if (value) {
      localStorage.setItem(key, '1');
    } else {
      localStorage.removeItem(key);
    }
  } catch {
    // localStorage unavailable — state just won't persist across reloads.
  }
}

export function FirstWeekEmptyState({
  llmsTxtExists,
  robotsHasLlmsReference,
  botVisits30Days,
  contentSettingsUrl,
  agentReadyUrl,
}: FirstWeekEmptyStateProps) {
  const [dismissed, setDismissed] = useState(() => readFlag(DISMISSED_STORAGE_KEY));
  const [collapsed, setCollapsed] = useState(() => readFlag(COLLAPSED_STORAGE_KEY));

  const hasBotVisit = botVisits30Days > 0;

  const items: ChecklistItem[] = [
    {
      id: 'llms',
      label: __('Generate your llms.txt file', 'llmagnet-llm-txt-generator'),
      done: llmsTxtExists,
      href: contentSettingsUrl,
    },
    {
      id: 'robots',
      label: __('Add llms.txt to robots.txt', 'llmagnet-llm-txt-generator'),
      done: robotsHasLlmsReference,
      href: agentReadyUrl,
    },
    {
      id: 'wait',
      label: hasBotVisit
        ? __('First AI bot visit detected', 'llmagnet-llm-txt-generator')
        : __('Wait for the first AI bot crawl (usually 24–72 hours)', 'llmagnet-llm-txt-generator'),
      done: hasBotVisit,
    },
  ];

  const doneCount = items.filter((item) => item.done).length;
  const allDone = doneCount === items.length;
  // Once everything is complete the card celebrates in full; collapse only applies mid-journey.
  const isCollapsed = !allDone && collapsed;

  if (dismissed) {
    return null;
  }

  const handleDismiss = () => {
    setDismissed(true);
    writeFlag(DISMISSED_STORAGE_KEY, true);
  };

  const toggleCollapsed = () => {
    setCollapsed((prev) => {
      const next = !prev;
      writeFlag(COLLAPSED_STORAGE_KEY, next);
      return next;
    });
  };

  return (
    <div
      className={`mb-6 rounded-xl border shadow-sm ${
        allDone
          ? 'border-emerald-200 bg-gradient-to-br from-emerald-50 to-white'
          : 'border-purple-200 bg-gradient-to-br from-purple-50 to-white'
      }`}
      role="region"
      aria-label={__('Getting started with AI visibility', 'llmagnet-llm-txt-generator')}
    >
      {/* Header */}
      <div className={`flex items-center gap-3 px-6 ${isCollapsed ? 'py-4' : 'pt-6 pb-1'}`}>
        {allDone && (
          <CheckCircle2 className="w-6 h-6 text-emerald-600 shrink-0" aria-hidden="true" />
        )}
        <h2 className="text-lg font-semibold text-gray-900 m-0 min-w-0 flex-1">
          {__('Your AI visibility journey starts here', 'llmagnet-llm-txt-generator')}
        </h2>
        {isCollapsed && (
          <span className="shrink-0 rounded-full bg-purple-100 px-3 py-1 text-xs font-semibold text-purple-800">
            {sprintf(__('%1$d of %2$d completed', 'llmagnet-llm-txt-generator'), doneCount, items.length)}
          </span>
        )}
        {allDone ? (
          <button
            type="button"
            onClick={handleDismiss}
            className="shrink-0 rounded-md bg-transparent p-1.5 text-gray-400 transition-colors hover:bg-emerald-100 hover:text-gray-700"
            title={__('Dismiss', 'llmagnet-llm-txt-generator')}
            aria-label={__('Dismiss', 'llmagnet-llm-txt-generator')}
          >
            <X className="w-5 h-5" aria-hidden="true" />
          </button>
        ) : (
          <button
            type="button"
            onClick={toggleCollapsed}
            className="shrink-0 rounded-md bg-transparent p-1.5 text-gray-400 transition-colors hover:bg-purple-100 hover:text-gray-700"
            title={
              isCollapsed
                ? __('Expand', 'llmagnet-llm-txt-generator')
                : __('Collapse', 'llmagnet-llm-txt-generator')
            }
            aria-label={
              isCollapsed
                ? __('Expand', 'llmagnet-llm-txt-generator')
                : __('Collapse', 'llmagnet-llm-txt-generator')
            }
            aria-expanded={!isCollapsed}
          >
            <ChevronDown
              className={`w-5 h-5 transition-transform duration-200 ${isCollapsed ? '' : 'rotate-180'}`}
              aria-hidden="true"
            />
          </button>
        )}
      </div>

      {/* Body */}
      {!isCollapsed && (
        <div className="px-6 pb-6">
          <p className="text-sm text-gray-600 mb-4 max-w-2xl">
            {allDone
              ? __(
                  'All steps are complete — AI crawlers have discovered your content. You can close this checklist.',
                  'llmagnet-llm-txt-generator'
                )
              : __(
                  'No AI bot visits yet — that is normal on a fresh install. Complete these steps so crawlers can discover your content.',
                  'llmagnet-llm-txt-generator'
                )}
          </p>
          <ul className="space-y-3">
            {items.map((item) => (
              <li key={item.id} className="flex items-start gap-3 text-sm">
                {item.done ? (
                  <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" aria-hidden="true" />
                ) : (
                  <Circle className="w-5 h-5 text-gray-400 shrink-0 mt-0.5" aria-hidden="true" />
                )}
                <span className="text-gray-800">
                  {item.href && !item.done ? (
                    <a href={item.href} className="font-medium text-purple-800 hover:text-purple-950 underline underline-offset-2">
                      {item.label}
                    </a>
                  ) : (
                    item.label
                  )}
                </span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}