import React from 'react';
import { useTranslation } from 'react-i18next';
import { format } from 'date-fns';
import { de, enGB } from 'date-fns/locale';
import type { Locale } from 'date-fns';
import { Palette, Plus, Power, Smile } from 'lucide-react';

import { AdminLayout } from '../components/AdminLayout';
import {
  getEmotions,
  createEmotion,
  updateEmotion,
  TenantEmotion,
  EmotionPayload,
} from '../api';
import { isAuthError } from '../auth/tokens';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';

const DEFAULT_COLOR = '#6366f1';

type EmotionFormState = {
  name: string;
  description: string;
  icon: string;
  color: string;
  is_active: boolean;
  sort_order: number;
};

const INITIAL_FORM_STATE: EmotionFormState = {
  name: '',
  description: '',
  icon: 'lucide-smile',
  color: DEFAULT_COLOR,
  is_active: true,
  sort_order: 0,
};

export default function EmotionsPage(): JSX.Element {
  const { t, i18n } = useTranslation('management');

  const [emotions, setEmotions] = React.useState<TenantEmotion[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);

  const [dialogOpen, setDialogOpen] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [form, setForm] = React.useState<EmotionFormState>(INITIAL_FORM_STATE);

  React.useEffect(() => {
    let cancelled = false;
    async function load() {
      setLoading(true);
      setError(null);
      try {
        const data = await getEmotions();
        if (!cancelled) {
          setEmotions(data);
        }
      } catch (err) {
        if (!isAuthError(err)) {
          setError(t('emotions.errors.load'));
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    void load();

    return () => {
      cancelled = true;
    };
  }, [t]);

  function openCreateDialog() {
    setForm(INITIAL_FORM_STATE);
    setDialogOpen(true);
  }

  async function handleCreate(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!form.name.trim()) {
      setError(t('emotions.errors.nameRequired'));
      return;
    }

    setSaving(true);
    setError(null);
    const payload: EmotionPayload = {
      name: form.name.trim(),
      description: form.description.trim() || null,
      icon: form.icon.trim() || 'lucide-smile',
      color: form.color.trim() || DEFAULT_COLOR,
      is_active: form.is_active,
      sort_order: form.sort_order,
    };

    try {
      const created = await createEmotion(payload);
      setEmotions((prev) => [created, ...prev]);
      setDialogOpen(false);
    } catch (err) {
      if (!isAuthError(err)) {
        setError(t('emotions.errors.create'));
      }
    } finally {
      setSaving(false);
    }
  }

  async function toggleEmotion(emotion: TenantEmotion) {
    try {
      const updated = await updateEmotion(emotion.id, { is_active: !emotion.is_active });
      setEmotions((prev) => prev.map((item) => (item.id === updated.id ? updated : item)));
    } catch (err) {
      if (!isAuthError(err)) {
        setError(t('emotions.errors.toggle'));
      }
    }
  }

  const locale = i18n.language.startsWith('en') ? enGB : de;

  return (
    <AdminLayout
      title={t('emotions.title') ?? 'Emotions'}
      subtitle={t('emotions.subtitle') ?? ''}
      actions={
        <Button
          className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
          onClick={openCreateDialog}
        >
          <Plus className="h-4 w-4" />
          {t('emotions.actions.create')}
        </Button>
      }
    >
      {error && (
        <Alert variant="destructive">
          <AlertTitle>{t('emotions.errors.genericTitle')}</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
        <CardHeader>
          <CardTitle className="text-xl text-slate-900">{t('emotions.title')}</CardTitle>
          <CardDescription className="text-sm text-slate-600">{t('emotions.subtitle')}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {loading ? (
            <EmotionSkeleton />
          ) : emotions.length === 0 ? (
            <EmptyEmotionsState />
          ) : (
            <div className="grid gap-4 sm:grid-cols-2">
              {emotions.map((emotion) => (
                <EmotionCard
                  key={emotion.id}
                  emotion={emotion}
                  onToggle={() => toggleEmotion(emotion)}
                  locale={locale}
                  canToggle={!emotion.is_global}
                />
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      <EmotionDialog
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        form={form}
        setForm={setForm}
        saving={saving}
        onSubmit={handleCreate}
      />
    </AdminLayout>
  );
}

function EmotionCard({
  emotion,
  onToggle,
  locale,
  canToggle,
}: {
  emotion: TenantEmotion;
  onToggle: () => void;
  locale: Locale;
  canToggle: boolean;
}) {
  const { t } = useTranslation('management');
  const updatedLabel = emotion.updated_at
    ? format(new Date(emotion.updated_at), 'PP', { locale })
    : null;

  return (
    <Card className="border border-slate-100 bg-white/90 shadow-sm">
      <CardHeader className="space-y-3">
        <div className="flex items-center gap-2">
          <Badge
            variant="outline"
            className={emotion.is_global ? 'border-indigo-200 text-indigo-600' : 'border-pink-200 text-pink-600'}
          >
            {emotion.is_global ? t('emotions.scope.global') : t('emotions.scope.tenant')}
          </Badge>
          <Badge variant="secondary" className="bg-slate-100 text-slate-700">
            {emotion.event_types.map((type) => type.name).join(', ') || t('emotions.labels.noEventType')}
          </Badge>
        </div>
        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
          <Smile className="h-4 w-4" />
          {emotion.name}
        </CardTitle>
        {emotion.description && (
          <CardDescription className="text-sm text-slate-600">{emotion.description}</CardDescription>
        )}
      </CardHeader>
      <CardContent className="flex items-center justify-between text-xs text-slate-500">
        <div className="flex items-center gap-2">
          <Palette className="h-4 w-4" />
          <span>{emotion.color}</span>
        </div>
        {updatedLabel && <span>{t('emotions.labels.updated', { date: updatedLabel })}</span>}
      </CardContent>
      <CardFooter className="flex items-center justify-between border-t border-slate-100 bg-slate-50/60 px-4 py-3">
        <span className="text-xs text-slate-500">
          {emotion.is_active ? t('emotions.status.active') : t('emotions.status.inactive')}
        </span>
        <Button
          variant="outline"
          size="sm"
          onClick={onToggle}
          disabled={!canToggle}
          className={!canToggle ? 'pointer-events-none opacity-60' : ''}
        >
          <Power className="mr-2 h-4 w-4" />
          {emotion.is_active ? t('emotions.actions.disable') : t('emotions.actions.enable')}
        </Button>
      </CardFooter>
    </Card>
  );
}

function EmptyEmotionsState() {
  const { t } = useTranslation('management');
  return (
    <div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-indigo-200 bg-indigo-50/40 p-12 text-center">
      <div className="rounded-full bg-white p-4 shadow-inner">
        <Smile className="h-8 w-8 text-indigo-500" />
      </div>
      <div className="space-y-1">
        <h3 className="text-lg font-semibold text-slate-800">{t('emotions.empty.title')}</h3>
        <p className="text-sm text-slate-600">{t('emotions.empty.description')}</p>
      </div>
    </div>
  );
}

function EmotionSkeleton() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {Array.from({ length: 4 }).map((_, index) => (
        <div key={index} className="animate-pulse rounded-2xl border border-slate-100 bg-white/80 p-6 shadow-sm">
          <div className="mb-3 h-4 w-24 rounded bg-slate-200" />
          <div className="mb-2 h-5 w-40 rounded bg-slate-200" />
          <div className="h-16 rounded bg-slate-100" />
        </div>
      ))}
    </div>
  );
}

function EmotionDialog({
  open,
  onOpenChange,
  form,
  setForm,
  saving,
  onSubmit,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  form: EmotionFormState;
  setForm: React.Dispatch<React.SetStateAction<EmotionFormState>>;
  saving: boolean;
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
}) {
  const { t } = useTranslation('management');
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>{t('emotions.dialogs.createTitle')}</DialogTitle>
        </DialogHeader>

        <form className="space-y-4" onSubmit={onSubmit}>
          <div className="space-y-2">
            <Label htmlFor="emotion-name">{t('emotions.dialogs.name')}</Label>
            <Input
              id="emotion-name"
              value={form.name}
              onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="emotion-description">{t('emotions.dialogs.description')}</Label>
            <textarea
              id="emotion-description"
              value={form.description}
              onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))}
              className="min-h-[80px] w-full rounded-md border border-slate-200 bg-white/80 p-2 text-sm shadow-sm focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-200"
            />
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="emotion-icon">{t('emotions.dialogs.icon')}</Label>
              <Input
                id="emotion-icon"
                value={form.icon}
                onChange={(event) => setForm((prev) => ({ ...prev, icon: event.target.value }))}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="emotion-color">{t('emotions.dialogs.color')}</Label>
              <Input
                id="emotion-color"
                value={form.color}
                onChange={(event) => setForm((prev) => ({ ...prev, color: event.target.value }))}
                placeholder="#6366f1"
              />
            </div>
          </div>

          <div className="flex items-center justify-between rounded-lg border border-indigo-100 bg-indigo-50/60 p-3">
            <div>
              <Label htmlFor="emotion-active" className="text-sm font-medium text-slate-800">
                {t('emotions.dialogs.activeLabel')}
              </Label>
              <p className="text-xs text-slate-500">{t('emotions.dialogs.activeDescription')}</p>
            </div>
            <Switch
              id="emotion-active"
              checked={form.is_active}
              onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: Boolean(checked) }))}
            />
          </div>

          <DialogFooter className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              {t('emotions.dialogs.cancel')}
            </Button>
            <Button type="submit" disabled={saving}>
              {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
              {t('emotions.dialogs.submit')}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}