'use client'

import * as React from 'react'
import { cn } from '../../lib/utils'

export interface CreateListDialogProps {
  open: boolean
  onClose: () => void
  onSubmit: (data: { name: string; description: string; sourceType: string }) => void
  isSubmitting?: boolean
  sourceTypes?: Array<{ value: string; label: string }>
}

const defaultSourceTypes = [
  { value: 'static', label: 'Static' },
  { value: 'funnel', label: 'Funnel' },
  { value: 'query', label: 'Query' },
]

export function CreateListDialog({
  open,
  onClose,
  onSubmit,
  isSubmitting = false,
  sourceTypes = defaultSourceTypes,
}: CreateListDialogProps) {
  const [name, setName] = React.useState('')
  const [description, setDescription] = React.useState('')
  const [sourceType, setSourceType] = React.useState(sourceTypes[0]?.value ?? 'static')

  React.useEffect(() => {
    if (open) {
      setName('')
      setDescription('')
      setSourceType(sourceTypes[0]?.value ?? 'static')
    }
  }, [open, sourceTypes])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!name.trim()) return
    onSubmit({ name: name.trim(), description: description.trim(), sourceType })
  }

  if (!open) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/50"
        onClick={isSubmitting ? undefined : onClose}
        aria-hidden="true"
      />

      {/* Dialog */}
      <div className="relative z-50 w-full max-w-md rounded-lg border bg-background p-6 shadow-lg">
        <h2 className="text-lg font-semibold text-foreground">Create List</h2>

        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
          {/* Name */}
          <div className="space-y-1.5">
            <label htmlFor="list-name" className="text-sm font-medium text-foreground">
              Name <span className="text-red-500">*</span>
            </label>
            <input
              id="list-name"
              type="text"
              required
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Enter list name"
              disabled={isSubmitting}
              className={cn(
                'w-full rounded-md border bg-background px-3 py-2 text-sm',
                'placeholder:text-muted-foreground',
                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            />
          </div>

          {/* Description */}
          <div className="space-y-1.5">
            <label htmlFor="list-description" className="text-sm font-medium text-foreground">
              Description
            </label>
            <textarea
              id="list-description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Optional description"
              rows={3}
              disabled={isSubmitting}
              className={cn(
                'w-full rounded-md border bg-background px-3 py-2 text-sm resize-none',
                'placeholder:text-muted-foreground',
                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            />
          </div>

          {/* Source Type */}
          <div className="space-y-1.5">
            <label htmlFor="list-source-type" className="text-sm font-medium text-foreground">
              Source Type
            </label>
            <select
              id="list-source-type"
              value={sourceType}
              onChange={(e) => setSourceType(e.target.value)}
              disabled={isSubmitting}
              className={cn(
                'w-full rounded-md border bg-background px-3 py-2 text-sm',
                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            >
              {sourceTypes.map((st) => (
                <option key={st.value} value={st.value}>
                  {st.label}
                </option>
              ))}
            </select>
          </div>

          {/* Actions */}
          <div className="flex justify-end gap-2 pt-2">
            <button
              type="button"
              onClick={onClose}
              disabled={isSubmitting}
              className={cn(
                'rounded-md border px-4 py-2 text-sm font-medium',
                'hover:bg-muted transition-colors',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isSubmitting || !name.trim()}
              className={cn(
                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
                'hover:bg-primary/90 transition-colors',
                'disabled:opacity-50 disabled:cursor-not-allowed',
              )}
            >
              {isSubmitting ? 'Creating...' : 'Create'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}