import { Save, X } from 'lucide-react';

import { isPolicyFormValid, toPolicyCategory } from '@/business/policies/selectors';
import type { PolicyFormInput } from '@/business/policies/types';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { NativeSelect } from '@/components/ui/native-select';
import { Textarea } from '@/components/ui/textarea';
import { POLICY_CATEGORIES } from '@/shared/constants/policies';

interface PolicyFormProps {
  readonly title: string;
  readonly draft: PolicyFormInput;
  readonly submitLabel: string;
  readonly submitting: boolean;
  readonly disabled: boolean;
  readonly onChange: (patch: Partial<PolicyFormInput>) => void;
  readonly onSubmit: () => void;
  readonly onCancel: () => void;
}

export function PolicyForm({
  title,
  draft,
  submitLabel,
  submitting,
  disabled,
  onChange,
  onSubmit,
  onCancel,
}: PolicyFormProps) {
  const formDisabled = disabled || !isPolicyFormValid(draft);

  return (
    <div className="bg-slate-800/50 backdrop-blur-sm rounded-2xl border border-slate-700/50 p-6 space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-bold text-white text-lg">{title}</h3>
        <Button
          type="button"
          onClick={onCancel}
          variant="ghost"
          size="icon"
          className="h-auto w-auto p-1 text-slate-400 hover:text-white hover:bg-transparent"
          aria-label={`Close ${title.toLowerCase()}`}
        >
          <X size={18} />
        </Button>
      </div>
      <Input
        type="text"
        value={draft.title}
        onChange={(event) => onChange({ title: event.target.value })}
        placeholder="Policy title..."
        className="w-full px-4 py-3 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-400 focus:ring-2 focus:ring-violet-500 outline-none"
      />
      <NativeSelect
        value={draft.category}
        onChange={(event) => onChange({ category: toPolicyCategory(event.target.value) })}
        className="w-full px-4 py-3 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-violet-500 outline-none"
      >
        {POLICY_CATEGORIES.map((category) => (
          <option key={category} value={category}>{category}</option>
        ))}
      </NativeSelect>
      <Textarea
        value={draft.content}
        onChange={(event) => onChange({ content: event.target.value })}
        placeholder="Policy content..."
        rows={6}
        className="w-full px-4 py-3 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-400 focus:ring-2 focus:ring-violet-500 outline-none resize-none"
      />
      <Button
        type="button"
        onClick={onSubmit}
        disabled={formDisabled}
        loading={submitting}
        leadingIcon={<Save size={14} />}
        className="flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-emerald-500 to-teal-500 text-white rounded-xl font-medium text-sm hover:shadow-lg transition-all disabled:opacity-50"
      >
        {submitLabel}
      </Button>
    </div>
  );
}
