'use client'

import { useCallback } from 'react'
import type { PageSettings } from '../../hooks/useBuilderState.js'

export interface PageSettingsProps {
  settings: PageSettings
  onChange: (settings: Partial<PageSettings>) => void
}

const INPUT_CLASS =
  'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring'
const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block'
const SECTION_HEADING_CLASS =
  'text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2'

const SCHEMA_TYPES = [
  'Article',
  'LocalBusiness',
  'WebPage',
  'Product',
  'FAQPage',
  'Organization',
  'Event',
  'Recipe',
  'HowTo',
  'BreadcrumbList',
]

export function PageSettingsEditor({ settings, onChange }: PageSettingsProps) {
  const update = useCallback(
    (key: keyof PageSettings, value: string) => {
      onChange({ [key]: value })
    },
    [onChange],
  )

  const metaTitleLength = (settings.metaTitle ?? '').length
  const metaDescLength = (settings.metaDescription ?? '').length

  return (
    <div className="space-y-4 p-4">
      <p className={SECTION_HEADING_CLASS}>General</p>

      <div>
        <label className={LABEL_CLASS}>Title</label>
        <input
          type="text"
          value={settings.title}
          onChange={(e) => update('title', e.target.value)}
          placeholder="Page title"
          className={INPUT_CLASS}
        />
      </div>

      <div>
        <label className={LABEL_CLASS}>Slug</label>
        <input
          type="text"
          value={settings.slug}
          onChange={(e) => update('slug', e.target.value)}
          placeholder="/page-slug"
          className={INPUT_CLASS}
        />
      </div>

      <div>
        <label className={LABEL_CLASS}>Template</label>
        <input
          type="text"
          value={settings.template ?? ''}
          onChange={(e) => update('template', e.target.value)}
          placeholder="default"
          className={INPUT_CLASS}
          readOnly
        />
      </div>

      <p className={SECTION_HEADING_CLASS}>SEO</p>

      <div>
        <div className="mb-1 flex items-center justify-between">
          <label className="text-foreground text-sm font-medium">Meta Title</label>
          <span
            className={`text-xs ${
              metaTitleLength > 60 ? 'text-destructive' : 'text-muted-foreground'
            }`}
          >
            {metaTitleLength}/60
          </span>
        </div>
        <input
          type="text"
          value={settings.metaTitle ?? ''}
          onChange={(e) => update('metaTitle', e.target.value)}
          placeholder="SEO title"
          maxLength={100}
          className={INPUT_CLASS}
        />
      </div>

      <div>
        <div className="mb-1 flex items-center justify-between">
          <label className="text-foreground text-sm font-medium">Meta Description</label>
          <span
            className={`text-xs ${
              metaDescLength > 160 ? 'text-destructive' : 'text-muted-foreground'
            }`}
          >
            {metaDescLength}/160
          </span>
        </div>
        <textarea
          value={settings.metaDescription ?? ''}
          onChange={(e) => update('metaDescription', e.target.value)}
          placeholder="Brief description for search engines"
          rows={3}
          maxLength={250}
          className={`${INPUT_CLASS} resize-y`}
        />
      </div>

      <div>
        <label className={LABEL_CLASS}>OG Image</label>
        <input
          type="text"
          value={settings.ogImage ?? ''}
          onChange={(e) => update('ogImage', e.target.value)}
          placeholder="https://example.com/image.jpg"
          className={INPUT_CLASS}
        />
      </div>

      <div>
        <label className={LABEL_CLASS}>Focus Keyphrase</label>
        <input
          type="text"
          value={settings.focusKeyphrase ?? ''}
          onChange={(e) => update('focusKeyphrase', e.target.value)}
          placeholder="primary keyword"
          className={INPUT_CLASS}
        />
      </div>

      <div>
        <label className={LABEL_CLASS}>Schema Type</label>
        <select
          value={settings.schemaType ?? ''}
          onChange={(e) => update('schemaType', e.target.value)}
          className={INPUT_CLASS}
        >
          <option value="">Select schema type...</option>
          {SCHEMA_TYPES.map((type) => (
            <option key={type} value={type}>
              {type}
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}
