import { ChevronRightIcon } from 'lucide-react';

import {
  choiceOf,
  matchingPreset,
  presetPolicy,
  withChoice,
  type RobotsChoice,
  type RobotsPreset,
} from '../../lib/seo/robots-policy';
import { classNames } from '../../lib/utils';
import type {
  ISeoCrawlerStatus,
  ISeoRobotsPolicy,
} from '../../service/seo/seo.interface';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../ui/select';

export const ROBOTS_PRESETS: {
  value: RobotsPreset;
  label: string;
  hint: string;
}[] = [
  {
    value: 'open',
    label: 'Open to AI',
    hint: 'Every AI crawler may read the site: it can be cited in AI answers and the next models learn about it.',
  },
  {
    value: 'answers',
    label: 'Answers, not training',
    hint: 'The answer engines may read and cite the site; the crawlers that train models are kept out, Google-Extended included, so Gemini apps no longer answer from the pages. Google Search, AI Overviews and AI Mode are unaffected.',
  },
  {
    value: 'closed',
    label: 'Closed to AI',
    hint: 'Every AI crawler is kept out. The site cannot be quoted or linked in ChatGPT, Perplexity, Claude, Alexa or Gemini app answers.',
  },
  {
    value: 'text',
    label: 'As the text says',
    hint: 'No AI crawler is named by the settings; each follows the rules of the text below.',
  },
];

const CHOICES: { value: RobotsChoice; label: string }[] = [
  { value: 'allow', label: 'Allow' },
  { value: 'block', label: 'Block' },
  { value: 'default', label: 'As the text says' },
];

const GROUPS: {
  kind: ISeoCrawlerStatus['kind'];
  title: string;
  description: string;
}[] = [
  {
    kind: 'answers',
    title: 'Answer engines',
    description:
      'Fetch pages to answer questions and cite them now. Kept out, the site is never quoted or linked in these answers.',
  },
  {
    kind: 'mixed',
    title: 'Answers + training',
    description:
      'One name decides both. Google-Extended covers Gemini’s training and the pages Gemini apps answer from: kept out, Google no longer trains on the site and Gemini apps stop citing it. Google Search, AI Overviews and AI Mode read the site through Googlebot either way.',
  },
  {
    kind: 'training',
    title: 'Model training',
    description:
      'Collect text for the next versions of the models. Kept out, today’s answers are unaffected, but the models learn less about the brand.',
  },
  {
    kind: 'search',
    title: 'Search engines',
    description:
      'Set by the text below. Google’s AI Overviews and Bing’s Copilot answers are built from these crawlers, not from the AI ones above.',
  },
];

const statusText = (crawler: ISeoCrawlerStatus): string => {
  if (crawler.status === 'blocked') {
    return 'Kept out';
  }
  if (crawler.status === 'partial') {
    return `Kept out of ${crawler.blocked.join(', ')}`;
  }
  return 'Can read the site';
};

/** Whose rules decide: the crawler's own group, or the one for every crawler. */
const ruleSource = (crawler: ISeoCrawlerStatus): string =>
  crawler.named ? 'named in robots.txt' : 'rules for all crawlers';

const summary = (rows: ISeoCrawlerStatus[]): string => {
  if (rows.length === 1) {
    return statusText(rows[0]);
  }
  const open = rows.filter(row => row.status === 'allowed').length;
  return open === rows.length
    ? `All ${rows.length} can read the site`
    : `${open} of ${rows.length} can read the site`;
};

const StatusDot = ({
  status,
}: {
  status: ISeoCrawlerStatus['status'];
}): JSX.Element => (
  <span
    aria-hidden
    className={classNames(
      'mt-1.5 size-2 shrink-0 rounded-full',
      status === 'allowed' && 'bg-emerald-500',
      status === 'blocked' && 'bg-destructive',
      status === 'partial' && 'bg-amber-500'
    )}
  />
);

/**
 * Which AI crawlers may read the site: presets for the usual choices, then
 * one row per crawler with the choice and what the file lets it read.
 * The status comes from the file the draft would serve.
 */
export const RobotsCrawlers = ({
  crawlers,
  policy,
  onChange,
  disabled,
}: {
  crawlers: ISeoCrawlerStatus[];
  policy: ISeoRobotsPolicy;
  onChange: (policy: ISeoRobotsPolicy) => void;
  disabled?: boolean;
}): JSX.Element => {
  const preset = matchingPreset(policy, crawlers);

  // The list sits in the control column of a settings row, so its rows
  // follow its own width: three columns only where the name keeps room.
  return (
    <div className="@container/crawlers flex flex-col gap-4">
      <div className="flex flex-col gap-2">
        <div className="flex flex-wrap gap-2">
          {ROBOTS_PRESETS.map(item => (
            <Button
              key={item.value}
              type="button"
              size="sm"
              variant={preset === item.value ? 'default' : 'outline'}
              disabled={disabled}
              aria-pressed={preset === item.value}
              onClick={() => onChange(presetPolicy(item.value, crawlers))}
            >
              {item.label}
              {item.value === 'open' && (
                <Badge
                  variant={preset === 'open' ? 'secondary' : 'outline'}
                  className="ml-1"
                >
                  Recommended
                </Badge>
              )}
            </Button>
          ))}
        </div>
        <p className="text-xs text-muted-foreground">
          {preset
            ? ROBOTS_PRESETS.find(item => item.value === preset)?.hint
            : 'A choice of your own, crawler by crawler.'}
        </p>
      </div>

      {GROUPS.map(group => {
        const rows = crawlers.filter(crawler => crawler.kind === group.kind);
        if (rows.length === 0) {
          return null;
        }
        const allOpen = rows.every(row => row.status === 'allowed');
        return (
          <details
            key={group.kind}
            open={!allOpen}
            className="group/crawlers rounded-lg border border-border"
          >
            <summary className="flex cursor-pointer list-none items-start gap-2 px-3 py-2.5 [&::-webkit-details-marker]:hidden">
              <ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform group-open/crawlers:rotate-90" />
              <span className="flex min-w-0 flex-1 flex-col gap-0.5">
                <span className="flex flex-wrap items-center gap-x-2 text-sm font-semibold text-foreground">
                  {group.title}
                  <span
                    className={classNames(
                      'text-xs font-medium',
                      allOpen
                        ? 'text-emerald-700 dark:text-emerald-400'
                        : 'text-amber-700 dark:text-amber-400'
                    )}
                  >
                    {summary(rows)}
                  </span>
                </span>
                <span className="text-xs leading-relaxed text-muted-foreground">
                  {group.description}
                </span>
              </span>
            </summary>
            <ul className="divide-y divide-border border-t border-border">
              {rows.map(crawler => (
                <li
                  key={crawler.id}
                  className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 gap-y-1.5 px-3 py-2 @2xl/crawlers:grid-cols-[minmax(0,1fr)_minmax(0,15rem)_10rem] @2xl/crawlers:items-center"
                >
                  <div className="col-start-1 row-start-1 flex min-w-0 flex-col">
                    <span className="font-mono text-xs font-semibold text-foreground">
                      {crawler.token}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {crawler.company} · {crawler.product}
                    </span>
                  </div>
                  <div className="col-start-1 row-start-2 flex min-w-0 items-start gap-2 text-xs @2xl/crawlers:col-start-2 @2xl/crawlers:row-start-1">
                    <StatusDot status={crawler.status} />
                    <span className="min-w-0">
                      <span className="text-foreground">
                        {statusText(crawler)}
                      </span>
                      <span className="text-muted-foreground">
                        {' '}
                        · {ruleSource(crawler)}
                      </span>
                    </span>
                  </div>
                  {group.kind !== 'search' && (
                    <Select
                      items={CHOICES}
                      value={choiceOf(policy, crawler.id)}
                      disabled={disabled}
                      onValueChange={value =>
                        onChange(
                          withChoice(policy, crawler.id, value as RobotsChoice)
                        )
                      }
                    >
                      <SelectTrigger
                        size="sm"
                        className="col-start-2 row-span-2 row-start-1 w-40 self-center @2xl/crawlers:col-start-3 @2xl/crawlers:row-span-1"
                        aria-label={`What ${crawler.token} may do`}
                      >
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {CHOICES.map(item => (
                          <SelectItem key={item.value} value={item.value}>
                            {item.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  )}
                </li>
              ))}
            </ul>
          </details>
        );
      })}
    </div>
  );
};