import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  ArrowLeft,
  Camera,
  CheckCircle2,
  Circle,
  Loader2,
  MessageSquare,
  RefreshCw,
  Send,
  Sparkles,
  ThumbsDown,
  ThumbsUp,
} from 'lucide-react';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';

import { AdminLayout } from '../components/AdminLayout';
import {
  ADMIN_EVENT_PHOTOS_PATH,
  ADMIN_EVENT_TASKS_PATH,
  ADMIN_EVENT_VIEW_PATH,
} from '../constants';
import {
  EventToolkit,
  EventToolkitTask,
  getEventToolkit,
  submitTenantFeedback,
  TenantPhoto,
  TenantEvent,
} from '../api';
import { isAuthError } from '../auth/tokens';

interface ToolkitState {
  loading: boolean;
  error: string | null;
  data: EventToolkit | null;
}

export default function EventToolkitPage(): JSX.Element {
  const { slug } = useParams<{ slug?: string }>();
  const navigate = useNavigate();
  const { t, i18n } = useTranslation('management');

  const [state, setState] = React.useState<ToolkitState>({ loading: true, error: null, data: null });
  const [feedbackSentiment, setFeedbackSentiment] = React.useState<'positive' | 'neutral' | 'negative' | null>(null);
  const [feedbackMessage, setFeedbackMessage] = React.useState('');
  const [feedbackSubmitting, setFeedbackSubmitting] = React.useState(false);
  const [feedbackSubmitted, setFeedbackSubmitted] = React.useState(false);

  const load = React.useCallback(async () => {
    if (!slug) {
      setState({ loading: false, error: t('toolkit.errors.missingSlug', 'Kein Event-Slug angegeben.'), data: null });
      return;
    }

    setState((prev) => ({ ...prev, loading: true, error: null }));
    try {
      const toolkit = await getEventToolkit(slug);
      setState({ loading: false, error: null, data: toolkit });
    } catch (error) {
      if (!isAuthError(error)) {
        setState({ loading: false, error: t('toolkit.errors.loadFailed', 'Toolkit konnte nicht geladen werden.'), data: null });
      }
    }
  }, [slug, t]);

  React.useEffect(() => {
    void load();
  }, [load]);

  const { data, loading } = state;
  const eventName = data?.event ? resolveEventName(data.event.name, i18n.language) : '';

  const actions = (
    <div className="flex flex-wrap gap-2">
      <Button variant="outline" onClick={() => navigate(ADMIN_EVENT_VIEW_PATH(slug ?? ''))}>
        <ArrowLeft className="h-4 w-4" />
        {t('toolkit.actions.backToEvent', 'Zurück zum Event')}
      </Button>
      <Button variant="outline" onClick={() => navigate(ADMIN_EVENT_PHOTOS_PATH(slug ?? ''))}>
        <Camera className="h-4 w-4" />
        {t('toolkit.actions.moderate', 'Fotos moderieren')}
      </Button>
      <Button variant="outline" onClick={() => navigate(ADMIN_EVENT_TASKS_PATH(slug ?? ''))}>
        <Sparkles className="h-4 w-4" />
        {t('toolkit.actions.manageTasks', 'Tasks öffnen')}
      </Button>
      <Button variant="outline" onClick={() => void load()} disabled={loading}>
        {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
        {t('toolkit.actions.refresh', 'Aktualisieren')}
      </Button>
    </div>
  );

  return (
    <AdminLayout
      title={eventName || t('toolkit.titleFallback', 'Event-Day Toolkit')}
      subtitle={t('toolkit.subtitle', 'Behalte Uploads, Aufgaben und Einladungen am Eventtag im Blick.')}
      actions={actions}
    >
      {state.error && (
        <Alert variant="destructive" className="mb-4">
          <AlertTitle>{t('toolkit.alerts.errorTitle', 'Fehler')}</AlertTitle>
          <AlertDescription>{state.error}</AlertDescription>
        </Alert>
      )}

      {loading ? (
        <ToolkitSkeleton />
      ) : data ? (
        <div className="space-y-6">
          <AlertList alerts={data.alerts} />

          <MetricsGrid metrics={data.metrics} />

          <div className="grid gap-6 lg:grid-cols-[2fr,1fr]">
            <PendingPhotosCard
              photos={data.photos.pending}
              navigateToModeration={() => navigate(ADMIN_EVENT_PHOTOS_PATH(slug ?? ''))}
            />
            <InviteSummary invites={data.invites} navigateToEvent={() => navigate(ADMIN_EVENT_VIEW_PATH(slug ?? ''))} />
          </div>

          <div className="grid gap-6 lg:grid-cols-2">
            <TaskOverviewCard tasks={data.tasks} navigateToTasks={() => navigate(ADMIN_EVENT_TASKS_PATH(slug ?? ''))} />
            <RecentUploadsCard photos={data.photos.recent} />
          </div>

          <FeedbackCard
            submitting={feedbackSubmitting}
            submitted={feedbackSubmitted}
            sentiment={feedbackSentiment}
            message={feedbackMessage}
            onSelectSentiment={setFeedbackSentiment}
            onMessageChange={setFeedbackMessage}
            onSubmit={async () => {
              if (!slug) return;
              setFeedbackSubmitting(true);
              try {
                await submitTenantFeedback({
                  category: 'event_toolkit',
                  sentiment: feedbackSentiment ?? undefined,
                  message: feedbackMessage ? feedbackMessage.trim() : undefined,
                  event_slug: slug,
                });
                setFeedbackSentiment(null);
                setFeedbackMessage('');
                setFeedbackSubmitted(true);
              } catch (error) {
                if (!isAuthError(error)) {
                  setState((prev) => ({
                    ...prev,
                    error: t('toolkit.errors.feedbackFailed', 'Feedback konnte nicht gesendet werden.'),
                  }));
                }
              } finally {
                setFeedbackSubmitting(false);
              }
            }}
          />
        </div>
      ) : null}
    </AdminLayout>
  );
}

function resolveEventName(name: TenantEvent['name'], locale?: string): string {
  if (typeof name === 'string') {
    return name;
  }
  if (name && typeof name === 'object') {
    if (locale && name[locale]) {
      return name[locale];
    }
    const short = locale && locale.includes('-') ? locale.split('-')[0] : null;
    if (short && name[short]) {
      return name[short];
    }
    return name.de ?? name.en ?? Object.values(name)[0] ?? 'Event';
  }
  return 'Event';
}

function AlertList({ alerts }: { alerts: string[] }) {
  const { t } = useTranslation('management');
  if (!alerts.length) {
    return null;
  }

  const alertMap: Record<string, string> = {
    no_tasks: t('toolkit.alerts.noTasks', 'Noch keine Tasks zugeordnet.'),
    no_invites: t('toolkit.alerts.noInvites', 'Es gibt keine aktiven QR-Einladungen.'),
    pending_photos: t('toolkit.alerts.pendingPhotos', 'Es warten Fotos auf Moderation.'),
  };

  return (
    <div className="space-y-2">
      {alerts.map((code) => (
        <Alert key={code} variant="warning" className="border-amber-200 bg-amber-50 text-amber-900">
          <AlertTitle>{t('toolkit.alerts.attention', 'Achtung')}</AlertTitle>
          <AlertDescription>{alertMap[code] ?? code}</AlertDescription>
        </Alert>
      ))}
    </div>
  );
}

function MetricsGrid({
  metrics,
}: {
  metrics: EventToolkit['metrics'];
}) {
  const { t } = useTranslation('management');
  const cards = [
    {
      label: t('toolkit.metrics.uploadsTotal', 'Uploads gesamt'),
      value: metrics.uploads_total,
    },
    {
      label: t('toolkit.metrics.uploads24h', 'Uploads (24h)'),
      value: metrics.uploads_24h,
    },
    {
      label: t('toolkit.metrics.pendingPhotos', 'Unmoderierte Fotos'),
      value: metrics.pending_photos,
    },
    {
      label: t('toolkit.metrics.activeInvites', 'Aktive Einladungen'),
      value: metrics.active_invites,
    },
    {
      label: t('toolkit.metrics.engagementMode', 'Modus'),
      value:
        metrics.engagement_mode === 'photo_only'
          ? t('toolkit.metrics.modePhotoOnly', 'Foto-Modus')
          : t('toolkit.metrics.modeTasks', 'Aufgaben'),
    },
  ];

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
      {cards.map((card) => (
        <Card key={card.label} className="border-0 bg-white/90 shadow-sm shadow-amber-100/50">
          <CardContent className="space-y-1 p-4">
            <p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
            <p className="text-2xl font-semibold text-slate-900">{card.value}</p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

function PendingPhotosCard({
  photos,
  navigateToModeration,
}: {
  photos: TenantPhoto[];
  navigateToModeration: () => void;
}) {
  const { t } = useTranslation('management');

  return (
    <Card className="border-0 bg-white/90 shadow-xl shadow-slate-100/70">
      <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
        <div>
          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
            <Camera className="h-5 w-5 text-amber-500" />
            {t('toolkit.pending.title', 'Wartende Fotos')}
          </CardTitle>
          <CardDescription className="text-sm text-slate-600">
            {t('toolkit.pending.subtitle', 'Moderationsempfehlung für neue Uploads.')}
          </CardDescription>
        </div>
        <Button variant="outline" onClick={navigateToModeration}>
          {t('toolkit.pending.cta', 'Zur Moderation')}
        </Button>
      </CardHeader>
      <CardContent className="space-y-3">
        {photos.length === 0 ? (
          <p className="text-xs text-slate-500">{t('toolkit.pending.empty', 'Aktuell warten keine Fotos auf Freigabe.')}</p>
        ) : (
          <div className="grid gap-3 sm:grid-cols-2">
            {photos.map((photo) => (
              <div key={photo.id} className="flex gap-3 rounded-xl border border-amber-100 bg-amber-50/60 p-3">
                <img
                  src={photo.thumbnail_url}
                  alt={photo.filename}
                  className="h-16 w-16 rounded-lg object-cover"
                />
                <div className="space-y-1 text-xs text-slate-600">
                  <p className="font-semibold text-slate-800">{photo.uploader_name ?? t('toolkit.pending.unknownUploader', 'Unbekannter Gast')}</p>
                  <p>{t('toolkit.pending.uploadedAt', 'Hochgeladen:')} {formatDateTime(photo.uploaded_at)}</p>
                  <p className="text-[11px] text-amber-700">{t('toolkit.pending.statusPending', 'Status: Prüfung ausstehend')}</p>
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

function InviteSummary({
  invites,
  navigateToEvent,
}: {
  invites: EventToolkit['invites'];
  navigateToEvent: () => void;
}) {
  const { t } = useTranslation('management');
  return (
    <Card className="border-0 bg-white/90 shadow-md shadow-amber-100/60">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
          <Sparkles className="h-5 w-5 text-amber-500" />
          {t('toolkit.invites.title', 'QR-Einladungen')}
        </CardTitle>
        <CardDescription className="text-sm text-slate-600">
          {t('toolkit.invites.subtitle', 'Aktive Links und Layouts im Blick behalten.')}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-3 text-xs text-slate-600">
        <div className="flex gap-2 text-sm text-slate-900">
          <Badge variant="outline" className="border-amber-200 text-amber-700">
            {t('toolkit.invites.activeCount', { defaultValue: '{{count}} aktiv', count: invites.summary.active })}
          </Badge>
          <Badge variant="outline" className="border-amber-200 text-amber-700">
            {t('toolkit.invites.totalCount', { defaultValue: '{{count}} gesamt', count: invites.summary.total })}
          </Badge>
        </div>
        {invites.items.length === 0 ? (
          <p>{t('toolkit.invites.empty', 'Noch keine QR-Einladungen erstellt.')}</p>
        ) : (
          <ul className="space-y-2">
            {invites.items.map((invite) => (
              <li key={invite.id} className="rounded-lg border border-amber-100 bg-amber-50/70 p-3">
                <p className="text-sm font-semibold text-slate-900">{invite.label ?? invite.url}</p>
                <p className="truncate text-xs text-slate-500">{invite.url}</p>
                <p className="text-[11px] text-amber-700">
                  {invite.is_active
                    ? t('toolkit.invites.statusActive', 'Aktiv')
                    : t('toolkit.invites.statusInactive', 'Inaktiv')}
                </p>
              </li>
            ))}
          </ul>
        )}
        <Button variant="outline" onClick={navigateToEvent}>
          {t('toolkit.invites.manage', 'Einladungen verwalten')}
        </Button>
      </CardContent>
    </Card>
  );
}

function TaskOverviewCard({ tasks, navigateToTasks }: { tasks: EventToolkit['tasks']; navigateToTasks: () => void }) {
  const { t } = useTranslation('management');

  return (
    <Card className="border-0 bg-white/90 shadow-md shadow-pink-100/60">
      <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
        <div>
          <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
            <Sparkles className="h-5 w-5 text-pink-500" />
            {t('toolkit.tasks.title', 'Aktive Aufgaben')}
          </CardTitle>
          <CardDescription className="text-sm text-slate-600">
            {t('toolkit.tasks.subtitle', 'Motiviere Gäste mit klaren Aufgaben & Highlights.')}
          </CardDescription>
        </div>
        <Badge variant="outline" className="border-pink-200 text-pink-600">
          {t('toolkit.tasks.summary', {
            defaultValue: '{{completed}} von {{total}} erledigt',
            completed: tasks.summary.completed,
            total: tasks.summary.total,
          })}
        </Badge>
      </CardHeader>
      <CardContent className="space-y-2">
        {tasks.items.length === 0 ? (
          <p className="text-xs text-slate-500">{t('toolkit.tasks.empty', 'Noch keine Aufgaben zugewiesen.')}</p>
        ) : (
          <div className="space-y-2">
            {tasks.items.map((task) => (
              <TaskRow key={task.id} task={task} />
            ))}
          </div>
        )}
        <Button variant="outline" onClick={navigateToTasks}>
          {t('toolkit.tasks.manage', 'Tasks verwalten')}
        </Button>
      </CardContent>
    </Card>
  );
}

function TaskRow({ task }: { task: EventToolkitTask }) {
  const { t } = useTranslation('management');
  return (
    <div className="flex items-start justify-between gap-3 rounded-xl border border-pink-100 bg-white/80 p-3">
      <div>
        <p className="text-sm font-medium text-slate-900">{task.title}</p>
        {task.description ? <p className="text-xs text-slate-600">{task.description}</p> : null}
      </div>
      <span className={`flex items-center gap-1 text-xs font-medium ${task.is_completed ? 'text-emerald-600' : 'text-slate-500'}`}>
        {task.is_completed ? <CheckCircle2 className="h-4 w-4" /> : <Circle className="h-4 w-4" />}
        {task.is_completed ? t('toolkit.tasks.completed', 'Erledigt') : t('toolkit.tasks.open', 'Offen')}
      </span>
    </div>
  );
}

function RecentUploadsCard({ photos }: { photos: TenantPhoto[] }) {
  const { t } = useTranslation('management');
  return (
    <Card className="border-0 bg-white/90 shadow-md shadow-sky-100/50">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
          <Camera className="h-5 w-5 text-sky-500" />
          {t('toolkit.recent.title', 'Neueste Uploads')}
        </CardTitle>
        <CardDescription className="text-sm text-slate-600">
          {t('toolkit.recent.subtitle', 'Ein Blick auf die letzten Fotos der Gäste.')}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {photos.length === 0 ? (
          <p className="text-xs text-slate-500">{t('toolkit.recent.empty', 'Noch keine freigegebenen Fotos vorhanden.')}</p>
        ) : (
          <div className="grid grid-cols-3 gap-2">
            {photos.map((photo) => (
              <img
                key={photo.id}
                src={photo.thumbnail_url}
                alt={photo.filename}
                className="h-24 w-full rounded-lg object-cover"
              />
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

function FeedbackCard({
  submitting,
  submitted,
  sentiment,
  message,
  onSelectSentiment,
  onMessageChange,
  onSubmit,
}: {
  submitting: boolean;
  submitted: boolean;
  sentiment: 'positive' | 'neutral' | 'negative' | null;
  message: string;
  onSelectSentiment: (value: 'positive' | 'neutral' | 'negative') => void;
  onMessageChange: (value: string) => void;
  onSubmit: () => Promise<void>;
}) {
  const { t } = useTranslation('management');

  return (
    <Card className="border-0 bg-white/95 shadow-lg shadow-amber-100/60">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
          <MessageSquare className="h-5 w-5 text-amber-500" />
          {t('toolkit.feedback.title', 'Wie hilfreich ist dieses Toolkit?')}
        </CardTitle>
        <CardDescription className="text-sm text-slate-600">
          {t('toolkit.feedback.subtitle', 'Dein Feedback hilft uns, den Eventtag noch besser zu begleiten.')}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {submitted ? (
          <Alert variant="success">
            <AlertTitle>{t('toolkit.feedback.thanksTitle', 'Danke!')}</AlertTitle>
            <AlertDescription>{t('toolkit.feedback.thanksDescription', 'Wir haben dein Feedback erhalten.')}</AlertDescription>
          </Alert>
        ) : (
          <>
            <div className="flex flex-wrap gap-3">
              <Button
                type="button"
                variant={sentiment === 'positive' ? 'default' : 'outline'}
                onClick={() => onSelectSentiment('positive')}
                disabled={submitting}
              >
                <ThumbsUp className="mr-2 h-4 w-4" /> {t('toolkit.feedback.positive', 'Hilfreich')}
              </Button>
              <Button
                type="button"
                variant={sentiment === 'neutral' ? 'default' : 'outline'}
                onClick={() => onSelectSentiment('neutral')}
                disabled={submitting}
              >
                <Sparkles className="mr-2 h-4 w-4" /> {t('toolkit.feedback.neutral', 'Ganz okay')}
              </Button>
              <Button
                type="button"
                variant={sentiment === 'negative' ? 'default' : 'outline'}
                onClick={() => onSelectSentiment('negative')}
                disabled={submitting}
              >
                <ThumbsDown className="mr-2 h-4 w-4" /> {t('toolkit.feedback.negative', 'Verbesserungsbedarf')}
              </Button>
            </div>
            <div className="space-y-2">
              <Textarea
                rows={3}
                placeholder={t('toolkit.feedback.placeholder', 'Erzähle uns kurz, was dir gefallen hat oder was fehlt …')}
                value={message}
                onChange={(event) => onMessageChange(event.target.value)}
                disabled={submitting}
              />
              <p className="text-[11px] text-slate-500">
                {t('toolkit.feedback.disclaimer', 'Dein Feedback wird vertraulich behandelt und hilft uns beim Feinschliff.')}
              </p>
            </div>
            <div className="flex justify-end">
              <Button onClick={() => void onSubmit()} disabled={submitting || (!sentiment && message.trim() === '')}>
                {submitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
                {t('toolkit.feedback.submit', 'Feedback senden')}
              </Button>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  );
}

function ToolkitSkeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 4 }).map((_, index) => (
        <div key={index} className="h-40 animate-pulse rounded-2xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
      ))}
    </div>
  );
}

function formatDateTime(value: string | null): string {
  if (!value) {
    return '–';
  }
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return '–';
  }
  return date.toLocaleString();
}