'use client'

import { AlertTriangle, Info } from 'lucide-react'
import { useGeneralSettings } from './useGeneralSettings.js'
import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
import { SiteIndexStatusCard } from './SiteIndexStatusCard.js'
import { SiteInformationCard } from './SiteInformationCard.js'
import { LanguageRegionCard } from './LanguageRegionCard.js'
import { SeoRobotsDefaultsCard } from './SeoRobotsDefaultsCard.js'

export interface GeneralSettingsTabProps {
  onNavigate?: (path: string) => void
  /** Current user's role. Only ADMIN can persist changes. */
  role?: string
}

export function GeneralSettingsTab({ onNavigate, role }: GeneralSettingsTabProps) {
  const canEdit = role === 'ADMIN'
  const settings = useGeneralSettings(canEdit)

  const runAudit = () => onNavigate?.('/seo?tab=audit')

  if (settings.loading) {
    return (
      <div className="space-y-4" aria-busy="true" aria-live="polite">
        <span className="sr-only">Loading settings…</span>
        {[0, 1, 2, 3].map((i) => (
          <div key={i} className="border-border bg-card rounded-lg border p-6">
            <div className="bg-muted mb-4 h-4 w-40 animate-pulse rounded" />
            <div className="space-y-3">
              <div className="bg-muted h-9 w-full animate-pulse rounded" />
              <div className="bg-muted h-9 w-full animate-pulse rounded" />
            </div>
          </div>
        ))}
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {settings.loadError && (
        <div
          role="alert"
          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-3 text-sm"
        >
          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
          <span className="flex-1">{settings.loadError}</span>
          <button
            type="button"
            onClick={settings.refetch}
            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
          >
            Retry
          </button>
        </div>
      )}

      {!canEdit && (
        <div className="border-border bg-muted text-muted-foreground flex items-center gap-2 rounded-lg border p-3 text-sm">
          <Info size={16} className="shrink-0" aria-hidden="true" />
          You have read-only access to settings. Only administrators can make changes.
        </div>
      )}

      <SettingsValidationSummary issues={settings.issues} />

      <SiteIndexStatusCard
        status={settings.indexStatus}
        loading={settings.loading}
        onNavigate={onNavigate}
        onRunAudit={runAudit}
      />

      <SiteInformationCard
        form={settings.form}
        setField={settings.setField}
        sources={settings.sources}
        issues={settings.issues}
        canEdit={canEdit}
      />

      <LanguageRegionCard
        form={settings.form}
        setField={settings.setField}
        issues={settings.issues}
        canEdit={canEdit}
      />

      <SeoRobotsDefaultsCard
        form={settings.form}
        setField={settings.setField}
        isProduction={settings.isProduction}
        indexStatus={settings.indexStatus}
        canEdit={canEdit}
        onNavigate={onNavigate}
      />

      {settings.saveState === 'error' && settings.saveError && (
        <div
          role="alert"
          className="border-destructive/30 bg-destructive/10 text-destructive flex items-center gap-3 rounded-lg border p-3 text-sm"
        >
          <AlertTriangle size={16} className="shrink-0" aria-hidden="true" />
          <span className="flex-1">{settings.saveError}</span>
          <button
            type="button"
            onClick={settings.save}
            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
          >
            Retry
          </button>
        </div>
      )}

      <SettingsSaveBar
        dirty={settings.dirty}
        canEdit={canEdit}
        hasErrors={settings.hasErrors}
        saveState={settings.saveState}
        onSave={settings.save}
        onReset={settings.reset}
      />
    </div>
  )
}
