'use client'

import { useEffect, useId, useState } from 'react'
import { RefreshCw, Map, AlertTriangle, CheckCircle2, ExternalLink } from 'lucide-react'
import * as Switch from '@radix-ui/react-switch'
import { toast } from 'sonner'
import {
  fetchSitemapStatus,
  regenerateSitemap,
  fetchCrawlSettings,
  updateCrawlSettings,
  fetchRobotsTxt,
  updateRobotsTxt,
  validateRobotsTxt,
  type CrawlSettings,
} from '../../lib/seo-service.js'
import {
  SectionCard,
  SeoLoading,
  SeoErrorState,
  btnPrimary,
  btnSecondary,
} from '../../components/seo/primitives.js'
import { useSeoResource } from './useSeoResource.js'

const CRAWL_TOGGLES: { key: keyof CrawlSettings; label: string; help: string }[] = [
  {
    key: 'indexEntireSite',
    label: 'Index entire site',
    help: 'Allow search engines to index all public pages.',
  },
  {
    key: 'includeImagesInSitemap',
    label: 'Include images in sitemap',
    help: 'Add image entries to the XML sitemap.',
  },
  {
    key: 'includePostsInSitemap',
    label: 'Include posts in sitemap',
    help: 'Add published posts to the sitemap.',
  },
  {
    key: 'noindexPaginatedArchives',
    label: 'No-index paginated archives',
    help: 'Avoid duplicate-content penalties on page 2+.',
  },
  {
    key: 'noindexTagPages',
    label: 'No-index tag pages',
    help: 'Keep thin tag archives out of the index.',
  },
]

function Toggle({
  checked,
  onChange,
  label,
  help,
  disabled,
}: {
  checked: boolean
  onChange: (v: boolean) => void
  label: string
  help: string
  disabled?: boolean
}) {
  const labelId = useId()
  const helpId = useId()
  return (
    <div className="flex items-center justify-between gap-3 py-2.5">
      <span className="min-w-0">
        <span id={labelId} className="text-foreground block text-sm font-medium">
          {label}
        </span>
        <span id={helpId} className="text-muted-foreground block text-sm">
          {help}
        </span>
      </span>
      <Switch.Root
        checked={checked}
        onCheckedChange={onChange}
        disabled={disabled}
        aria-labelledby={labelId}
        aria-describedby={helpId}
        className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
      >
        <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
      </Switch.Root>
    </div>
  )
}

function SitemapCard() {
  const { data, loading, error, refetch } = useSeoResource(fetchSitemapStatus, [])
  const [busy, setBusy] = useState(false)

  async function handleRegenerate() {
    setBusy(true)
    const res = await regenerateSitemap()
    setBusy(false)
    if (res.error) {
      toast.error(res.error)
      return
    }
    toast.success('Sitemap regenerated.')
    refetch()
  }

  return (
    <SectionCard
      title="Sitemap"
      action={
        <button className={btnSecondary} onClick={handleRegenerate} disabled={busy || loading}>
          <RefreshCw className={`h-4 w-4 ${busy ? 'animate-spin' : ''}`} aria-hidden />
          Regenerate
        </button>
      }
    >
      {loading ? (
        <SeoLoading label="Loading sitemap status…" />
      ) : error ? (
        <SeoErrorState message={error} onRetry={refetch} />
      ) : !data ? (
        <p className="text-muted-foreground text-sm">Sitemap status unavailable.</p>
      ) : (
        <div className="space-y-3">
          <a
            href={data.sitemapUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-primary inline-flex items-center gap-1 text-sm hover:underline"
          >
            <Map className="h-4 w-4" aria-hidden />
            {data.sitemapUrl}
            <ExternalLink className="h-3.5 w-3.5" aria-hidden />
          </a>
          <dl className="grid grid-cols-2 gap-3 text-sm">
            <div>
              <dt className="text-muted-foreground">Pages included</dt>
              <dd className="text-foreground font-medium tabular-nums">{data.pagesIncluded}</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">Pages excluded</dt>
              <dd className="text-foreground font-medium tabular-nums">{data.pagesExcluded}</dd>
            </div>
            <div className="col-span-2">
              <dt className="text-muted-foreground">Last generated</dt>
              <dd className="text-foreground">
                {data.lastGeneratedAt ? new Date(data.lastGeneratedAt).toLocaleString() : 'Never'}
              </dd>
            </div>
          </dl>
          {data.warnings.length > 0 && (
            <ul className="space-y-1">
              {data.warnings.map((w, i) => (
                <li key={i} className="text-warning flex items-center gap-1.5 text-sm">
                  <AlertTriangle className="h-3.5 w-3.5" aria-hidden /> {w}
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </SectionCard>
  )
}

function CrawlCard() {
  const { data, loading, error, refetch } = useSeoResource(fetchCrawlSettings, [])
  const [settings, setSettings] = useState<CrawlSettings | null>(null)
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    if (data) setSettings(data)
  }, [data])

  async function save(next: CrawlSettings, changed: keyof CrawlSettings) {
    setSettings(next)
    setSaving(true)
    const res = await updateCrawlSettings({ [changed]: next[changed] })
    setSaving(false)
    if (res.error) {
      toast.error(res.error)
      refetch()
    }
  }

  return (
    <SectionCard title="Crawl Settings">
      {loading ? (
        <SeoLoading label="Loading crawl settings…" />
      ) : error ? (
        <SeoErrorState message={error} onRetry={refetch} />
      ) : !settings ? (
        <p className="text-muted-foreground text-sm">Crawl settings unavailable.</p>
      ) : (
        <div className="divide-border divide-y" aria-busy={saving}>
          {CRAWL_TOGGLES.map((t) => (
            <Toggle
              key={t.key}
              label={t.label}
              help={t.help}
              checked={settings[t.key]}
              disabled={saving}
              onChange={(v) => save({ ...settings, [t.key]: v }, t.key)}
            />
          ))}
        </div>
      )}
    </SectionCard>
  )
}

function RobotsCard() {
  const { data, loading, error, refetch } = useSeoResource(fetchRobotsTxt, [])
  const [body, setBody] = useState('')
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    if (data) setBody(data.body)
  }, [data])

  const validation = validateRobotsTxt(body)

  async function handleSave() {
    setSaving(true)
    const res = await updateRobotsTxt(body)
    setSaving(false)
    if (res.error) {
      toast.error(res.error)
      return
    }
    toast.success('robots.txt saved.')
    refetch()
  }

  return (
    <SectionCard
      title="robots.txt"
      description="Controls which crawlers can access your site."
      action={
        <button
          className={btnPrimary}
          onClick={handleSave}
          disabled={saving || loading || !validation.valid}
        >
          {saving ? 'Saving…' : 'Save'}
        </button>
      }
    >
      {loading ? (
        <SeoLoading label="Loading robots.txt…" />
      ) : error ? (
        <SeoErrorState message={error} onRetry={refetch} />
      ) : (
        <div className="space-y-3">
          {validation.blocksEntireSite && (
            <div
              className="border-destructive/30 bg-destructive/10 flex items-start gap-2 rounded-md border p-3"
              role="alert"
            >
              <AlertTriangle className="text-destructive mt-0.5 h-4 w-4 shrink-0" aria-hidden />
              <p className="text-destructive text-sm">
                This configuration blocks your entire site from all search engines. Pages will be
                removed from search results.
              </p>
            </div>
          )}
          <label className="sr-only" htmlFor="robots-editor">
            robots.txt contents
          </label>
          <textarea
            id="robots-editor"
            value={body}
            onChange={(e) => setBody(e.target.value)}
            spellCheck={false}
            className="border-border bg-input-background text-foreground focus-visible:ring-ring min-h-48 w-full rounded-md border p-3 font-mono text-sm focus-visible:ring-2 focus-visible:outline-none"
          />
          {validation.errors.length > 0 ? (
            <ul className="space-y-1">
              {validation.errors.map((e, i) => (
                <li key={i} className="text-destructive flex items-center gap-1.5 text-sm">
                  <AlertTriangle className="h-3.5 w-3.5" aria-hidden /> {e}
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-success flex items-center gap-1.5 text-sm">
              <CheckCircle2 className="h-3.5 w-3.5" aria-hidden /> Valid robots.txt
            </p>
          )}
          {validation.warnings
            .filter((w) => !validation.blocksEntireSite || !w.includes('blocks the entire site'))
            .map((w, i) => (
              <p key={i} className="text-warning flex items-center gap-1.5 text-sm">
                <AlertTriangle className="h-3.5 w-3.5" aria-hidden /> {w}
              </p>
            ))}
        </div>
      )}
    </SectionCard>
  )
}

export function TechnicalTab() {
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <SitemapCard />
        <CrawlCard />
      </div>
      <RobotsCard />
    </div>
  )
}
