'use client'

import { useId } from 'react'
import { CheckCircle2 } from 'lucide-react'
import { SettingsCard, SettingsSourceBadge } from './components.js'
import type {
  GeneralSettingsForm,
  SettingsSourceMetadata,
  ValidationIssue,
} from './useGeneralSettings.js'

const INPUT_CLASS =
  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
const LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground'

interface SiteInformationCardProps {
  form: GeneralSettingsForm
  setField: <K extends keyof GeneralSettingsForm>(key: K, value: GeneralSettingsForm[K]) => void
  sources: Record<string, SettingsSourceMetadata>
  issues: ValidationIssue[]
  canEdit: boolean
}

export function SiteInformationCard({
  form,
  setField,
  sources,
  issues,
  canEdit,
}: SiteInformationCardProps) {
  const titleId = useId()
  const taglineId = useId()
  const urlId = useId()
  const urlErrId = useId()

  const titleIssue = issues.find((i) => i.field === 'siteTitle')
  const urlIssue = issues.find((i) => i.field === 'siteUrl')
  const urlEditable = sources.siteUrl?.editable !== false && canEdit
  const urlValid = !urlIssue && form.siteUrl.trim().length > 0

  return (
    <SettingsCard title="Site Information" description="Your site's name, tagline, and public URL.">
      <div className="space-y-4">
        <div>
          <label htmlFor={titleId} className={LABEL_CLASS}>
            Site Title
          </label>
          <input
            id={titleId}
            type="text"
            value={form.siteTitle}
            disabled={!canEdit}
            aria-invalid={titleIssue?.severity === 'error'}
            onChange={(e) => setField('siteTitle', e.target.value)}
            className={INPUT_CLASS}
          />
          {titleIssue && <p className="text-destructive mt-1 text-sm">{titleIssue.message}</p>}
        </div>

        <div>
          <label htmlFor={taglineId} className={LABEL_CLASS}>
            Tagline
          </label>
          <input
            id={taglineId}
            type="text"
            value={form.tagline}
            disabled={!canEdit}
            onChange={(e) => setField('tagline', e.target.value)}
            className={INPUT_CLASS}
          />
        </div>

        <div>
          <label htmlFor={urlId} className={LABEL_CLASS}>
            Site URL
            <SettingsSourceBadge meta={sources.siteUrl} />
          </label>
          <input
            id={urlId}
            type="url"
            inputMode="url"
            placeholder="https://example.com"
            value={form.siteUrl}
            disabled={!urlEditable}
            aria-invalid={urlIssue?.severity === 'error'}
            aria-describedby={urlIssue ? urlErrId : undefined}
            onChange={(e) => setField('siteUrl', e.target.value)}
            className={INPUT_CLASS}
          />
          {urlIssue ? (
            <p
              id={urlErrId}
              className={
                urlIssue.severity === 'error'
                  ? 'text-destructive mt-1 text-sm'
                  : 'text-warning mt-1 text-sm'
              }
            >
              {urlIssue.message}
            </p>
          ) : urlValid ? (
            <p className="text-muted-foreground mt-1 flex items-center gap-1.5 text-sm">
              <CheckCircle2 size={13} className="text-success" aria-hidden="true" />
              Valid — used for canonical URLs, sitemap, robots.txt, and Open Graph.
            </p>
          ) : (
            <p className="text-muted-foreground mt-1 text-sm">
              Used for canonical URLs, sitemap, robots.txt, and Open Graph fallbacks.
            </p>
          )}
        </div>
      </div>
    </SettingsCard>
  )
}
