'use client'

import { useId } from 'react'
import { SettingsCard, SettingsToggleRow } from './components.js'
import type { BrandVoiceForm } from './useAiSettings.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 TEXTAREA_CLASS = `${INPUT_CLASS} min-h-[88px] resize-y`
const LABEL_CLASS = 'mb-1 block text-sm font-medium text-foreground'

const TONE_MAX = 400
const GUIDELINES_MAX = 2000
const SAMPLE_MAX = 2000

/**
 * Brand voice — a reusable description of how generated copy should sound. When
 * enabled, it is injected into the system prompt of content-generation features
 * (co-author, SEO titles/descriptions) so every AI surface writes on-brand.
 */
export function BrandVoiceCard({
  value,
  canEdit,
  onChange,
}: {
  value: BrandVoiceForm
  canEdit: boolean
  onChange: (patch: Partial<BrandVoiceForm>) => void
}) {
  const nameId = useId()
  const toneId = useId()
  const audienceId = useId()
  const guidelinesId = useId()
  const sampleId = useId()
  const disabled = !canEdit

  return (
    <SettingsCard
      title="Brand voice"
      description="Teach the AI how your brand sounds. Applied to content writing and SEO copy."
    >
      <div className="space-y-4">
        <SettingsToggleRow
          label="Apply brand voice"
          description="When on, generated copy follows the tone and guidelines below."
          checked={value.enabled}
          disabled={disabled}
          onChange={(v) => onChange({ enabled: v })}
        />

        <div className="border-border space-y-4 border-t pt-4">
          <div>
            <label htmlFor={nameId} className={LABEL_CLASS}>
              Name
            </label>
            <input
              id={nameId}
              type="text"
              value={value.name}
              disabled={disabled}
              placeholder="e.g. Acme Marketing"
              onChange={(e) => onChange({ name: e.target.value })}
              className={INPUT_CLASS}
            />
          </div>

          <div>
            <label htmlFor={toneId} className={LABEL_CLASS}>
              Tone
            </label>
            <input
              id={toneId}
              type="text"
              value={value.tone}
              disabled={disabled}
              maxLength={TONE_MAX}
              placeholder="e.g. confident, warm, plain-spoken"
              onChange={(e) => onChange({ tone: e.target.value })}
              className={INPUT_CLASS}
            />
          </div>

          <div>
            <label htmlFor={audienceId} className={LABEL_CLASS}>
              Audience <span className="text-muted-foreground font-normal">(optional)</span>
            </label>
            <input
              id={audienceId}
              type="text"
              value={value.audience}
              disabled={disabled}
              placeholder="e.g. busy IT directors at mid-market SaaS companies"
              onChange={(e) => onChange({ audience: e.target.value })}
              className={INPUT_CLASS}
            />
          </div>

          <div>
            <label htmlFor={guidelinesId} className={LABEL_CLASS}>
              Guidelines <span className="text-muted-foreground font-normal">(optional)</span>
            </label>
            <textarea
              id={guidelinesId}
              value={value.guidelines}
              disabled={disabled}
              maxLength={GUIDELINES_MAX}
              placeholder={
                'Do: lead with the benefit, use active voice.\nDon\u2019t: use jargon, exclamation points, or hype.'
              }
              onChange={(e) => onChange({ guidelines: e.target.value })}
              className={TEXTAREA_CLASS}
            />
            <p className="text-muted-foreground mt-1 text-sm">
              {value.guidelines.length}/{GUIDELINES_MAX}
            </p>
          </div>

          <div>
            <label htmlFor={sampleId} className={LABEL_CLASS}>
              Sample copy <span className="text-muted-foreground font-normal">(optional)</span>
            </label>
            <textarea
              id={sampleId}
              value={value.sampleText}
              disabled={disabled}
              maxLength={SAMPLE_MAX}
              placeholder="Paste a paragraph of on-brand copy the AI can pattern-match against."
              onChange={(e) => onChange({ sampleText: e.target.value })}
              className={TEXTAREA_CLASS}
            />
            <p className="text-muted-foreground mt-1 text-sm">
              {value.sampleText.length}/{SAMPLE_MAX}
            </p>
          </div>
        </div>
      </div>
    </SettingsCard>
  )
}
