import { useState } from 'react'
import { Plus, Trash2 } from 'lucide-react'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import type { SynonymGroup } from '../config'
import { getDistinctSynonymTerms, isSynonymGroupComplete, MAX_SYNONYM_GROUPS, MAX_SYNONYM_TERMS } from '../synonyms'

interface SynonymGroupsProps {
  groups: SynonymGroup[]
  onChange: (groups: SynonymGroup[]) => void
}

export function SynonymGroups({ groups, onChange }: SynonymGroupsProps) {
  const [openGroup, setOpenGroup] = useState('')

  const addGroup = () => {
    const id = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
      ? crypto.randomUUID() : `synonym-${Date.now()}-${Math.random().toString(36).slice(2)}`
    onChange([...groups, { id, words: ['', ''] }])
    setOpenGroup(id)
  }

  const updateWords = (index: number, words: string[]) => {
    onChange(groups.map((group, current) => current === index ? { ...group, words } : group))
  }

  return (
    <div className="space-y-3 border-t pt-4">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div className="min-w-0 flex-1 space-y-1">
          <Label>Synonym Groups</Label>
          <p className="max-w-prose text-xs leading-relaxed text-muted-foreground">
            Group terms that mean the same thing. For example, add “sneakers” and “trainers”
            so a search for either can find products matching the other.
          </p>
        </div>
        <Button type="button" variant="outline" size="sm" onClick={addGroup} disabled={groups.length >= MAX_SYNONYM_GROUPS}>
          <Plus className="mr-2 h-4 w-4" aria-hidden="true" />Add Group
        </Button>
      </div>

      {groups.length === 0 ? (
        <p className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">
          Add a group, then enter at least two alternative terms—one per field.
        </p>
      ) : (
        <Accordion type="single" collapsible value={openGroup} onValueChange={setOpenGroup} className="space-y-2">
          {groups.map((group, groupIndex) => {
            const terms = getDistinctSynonymTerms(group.words)
            const complete = isSynonymGroupComplete(group)
            return (
              <AccordionItem key={group.id} value={group.id} className="rounded-lg border px-3">
                <AccordionTrigger className="gap-3 py-3 hover:no-underline">
                  <span className="min-w-0 flex-1 space-y-1">
                    <span className="block break-words font-medium">
                      {terms.length ? terms.slice(0, 3).join(' · ') : `New group ${groupIndex + 1}`}
                      {terms.length > 3 ? ` +${terms.length - 3} more` : ''}
                    </span>
                    <span className="block text-xs font-normal text-muted-foreground">
                      {complete ? `${terms.length} terms` : 'Needs at least 2 different terms'}
                    </span>
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3">
                  <p className="text-xs text-muted-foreground">One term per field. Use a separate group for each product meaning.</p>
                  <div className="space-y-2">
                    {group.words.map((word, wordIndex) => (
                      <div key={`${group.id}-${wordIndex}`} className="flex items-center gap-2">
                        <Input
                          value={word}
                          maxLength={100}
                          aria-label={`Synonym ${wordIndex + 1} in group ${groupIndex + 1}`}
                          placeholder={wordIndex === 0 ? 'e.g. sneakers' : 'e.g. trainers'}
                          className="min-w-0"
                          onChange={event => updateWords(groupIndex, group.words.map((value, index) => index === wordIndex ? event.target.value : value))}
                        />
                        <Button type="button" variant="ghost" size="icon" className="shrink-0"
                          disabled={group.words.length <= 2} aria-label={`Remove synonym ${wordIndex + 1} in group ${groupIndex + 1}`}
                          onClick={() => updateWords(groupIndex, group.words.filter((_, index) => index !== wordIndex))}>
                          <Trash2 className="h-4 w-4" aria-hidden="true" />
                        </Button>
                      </div>
                    ))}
                  </div>
                  {!complete && <p className="text-xs text-muted-foreground">Add at least two different terms before saving. Empty fields and repeated terms do not count.</p>}
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <Button type="button" variant="ghost" size="sm" disabled={group.words.length >= MAX_SYNONYM_TERMS}
                      onClick={() => updateWords(groupIndex, [...group.words, ''])}>
                      <Plus className="mr-2 h-4 w-4" aria-hidden="true" />Add Word
                    </Button>
                    <Button type="button" variant="ghost" size="sm" className="text-destructive hover:text-destructive"
                      aria-label={`Remove synonym group ${groupIndex + 1}`} onClick={() => {
                        onChange(groups.filter((_, index) => index !== groupIndex))
                        if (openGroup === group.id) setOpenGroup('')
                      }}>
                      <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />Remove Group
                    </Button>
                  </div>
                  {group.words.length >= MAX_SYNONYM_TERMS && <p className="text-xs text-muted-foreground">Up to 20 terms per group.</p>}
                </AccordionContent>
              </AccordionItem>
            )
          })}
        </Accordion>
      )}
      <p className="text-xs text-muted-foreground">Save Changes to apply your groups to storefront searches.</p>
      {groups.length >= MAX_SYNONYM_GROUPS && <p className="text-xs text-muted-foreground">Up to 100 groups.</p>}
    </div>
  )
}