'use client';

import { useCallback, useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  ArrowLeft,
  ArrowUp,
  CheckCircle2,
  ChevronRight,
  Layers,
  Loader2,
  RefreshCw,
  XCircle,
} from 'lucide-react';
import { useI18n } from '@/lib/hooks/use-i18n';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { MediaPopover, type MediaCapabilityOverride } from '@/components/generation/media-popover';
import type { SettingsSection } from '@/lib/types/settings';
import { cn } from '@/lib/utils';
import { opsApiFetch } from '@/lib/ops/api-fetch';

const WEB_SEARCH_STORAGE_KEY = 'webSearchEnabled';

export interface CourseListItem {
  courseId: string;
  status:
    | 'queued'
    | 'framework_generating'
    | 'framework_ready'
    | 'generating'
    | 'completed'
    | 'failed'
    | 'cancelled';
  title: string;
  moduleCount: number;
  succeededCount: number;
  error?: string;
  createdAt: string;
  updatedAt: string;
}

const STATUS_STYLES: Record<string, string> = {
  queued: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300',
  framework_generating: 'bg-blue-100 text-blue-700 dark:bg-blue-950/60 dark:text-blue-300',
  framework_ready: 'bg-amber-100 text-amber-700 dark:bg-amber-950/60 dark:text-amber-300',
  generating: 'bg-blue-100 text-blue-700 dark:bg-blue-950/60 dark:text-blue-300',
  completed: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-300',
  failed: 'bg-red-100 text-red-700 dark:bg-red-950/60 dark:text-red-300',
  cancelled: 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400',
};

interface LargeCourseWorkbenchProps {
  embedded?: boolean;
  onSettingsOpen?: (section: SettingsSection) => void;
}

export function LargeCourseWorkbench({
  embedded = false,
  onSettingsOpen,
}: LargeCourseWorkbenchProps) {
  const { t } = useI18n();
  const router = useRouter();
  const [requirement, setRequirement] = useState('');
  const [webSearch, setWebSearch] = useState(false);
  const [enableImageGeneration, setEnableImageGeneration] = useState(false);
  const [enableVideoGeneration, setEnableVideoGeneration] = useState(false);
  const [enableTTS, setEnableTTS] = useState(true);
  const [creating, setCreating] = useState(false);
  const [createError, setCreateError] = useState<string | null>(null);
  const [items, setItems] = useState<CourseListItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState<string | null>(null);

  useEffect(() => {
    try {
      if (localStorage.getItem(WEB_SEARCH_STORAGE_KEY) === 'true') setWebSearch(true);
    } catch {
      /* localStorage unavailable */
    }
  }, []);

  const updateWebSearch = (enabled: boolean) => {
    setWebSearch(enabled);
    try {
      localStorage.setItem(WEB_SEARCH_STORAGE_KEY, String(enabled));
    } catch {
      /* localStorage unavailable */
    }
  };

  const load = useCallback(async () => {
    setLoading(true);
    setLoadError(null);
    try {
      const response = await opsApiFetch('/api/courses');
      const body = (await response.json()) as { items?: CourseListItem[] };
      if (!response.ok || !Array.isArray(body.items)) {
        throw new Error(`HTTP ${response.status}`);
      }
      setItems(body.items);
    } catch (err) {
      setLoadError(err instanceof Error ? err.message : String(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void load();
    const timer = setInterval(() => void load(), 8000);
    return () => clearInterval(timer);
  }, [load]);

  const createCourse = async () => {
    if (!requirement.trim()) return;
    setCreating(true);
    setCreateError(null);
    try {
      const response = await opsApiFetch('/api/courses', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          requirement: requirement.trim(),
          enableWebSearch: webSearch || undefined,
          enableImageGeneration: enableImageGeneration || undefined,
          enableVideoGeneration: enableVideoGeneration || undefined,
          enableTTS,
        }),
      });
      const body = (await response.json()) as {
        courseId?: string;
        error?: string;
        details?: string;
      };
      if (!response.ok || !body.courseId) {
        throw new Error(body.details ?? body.error ?? `HTTP ${response.status}`);
      }
      router.push(`/courses/${body.courseId}`);
    } catch (err) {
      setCreateError(err instanceof Error ? err.message : String(err));
    } finally {
      setCreating(false);
    }
  };

  const capabilityOverrides: Partial<
    Record<'image' | 'video' | 'tts' | 'asr', MediaCapabilityOverride>
  > = {
    image: { enabled: enableImageGeneration, onToggle: setEnableImageGeneration },
    video: { enabled: enableVideoGeneration, onToggle: setEnableVideoGeneration },
    tts: { enabled: enableTTS, onToggle: setEnableTTS },
    asr: { enabled: false, disabled: true },
  };

  const formatDate = (iso: string) =>
    new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });

  const content = (
    <>
      <section
        className={cn(
          'rounded-2xl border border-border/60 bg-white/80 p-4 shadow-xl shadow-black/[0.03] backdrop-blur-xl dark:bg-slate-900/80 dark:shadow-black/20 md:p-5',
          !embedded && 'mb-8',
        )}
      >
        <div className="mb-3 flex items-start gap-3">
          <div className="grid size-9 shrink-0 place-items-center rounded-xl bg-violet-100 text-violet-600 dark:bg-violet-900/30 dark:text-violet-300">
            <Layers className="size-4" />
          </div>
          <div className="min-w-0">
            <h2 className="text-sm font-semibold">{t('course.createTitle')}</h2>
            <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
              {t('course.createPlaceholder').split('\n')[1]}
            </p>
          </div>
        </div>

        <Textarea
          value={requirement}
          onChange={(e) => setRequirement(e.target.value)}
          onKeyDown={(e) => {
            if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
              e.preventDefault();
              void createCourse();
            }
          }}
          placeholder={t('course.createPlaceholder').split('\n')[0]}
          className="min-h-[150px] resize-none border-0 bg-transparent px-1 text-[13px] leading-relaxed shadow-none focus-visible:ring-0"
        />

        <div className="mt-3 flex items-center gap-2 border-t border-border/50 pt-3">
          <MediaPopover
            onSettingsOpen={onSettingsOpen}
            webSearch={webSearch}
            onWebSearchChange={updateWebSearch}
            capabilityOverrides={capabilityOverrides}
          />
          <span className="hidden text-[11px] text-muted-foreground/55 sm:inline">
            {t('course.confirmCostHint', { count: '4-15' })}
          </span>
          <Button
            onClick={() => void createCourse()}
            disabled={creating || !requirement.trim()}
            size="sm"
            className="ml-auto gap-1.5"
          >
            {creating ? (
              <Loader2 className="size-4 animate-spin" />
            ) : (
              <ArrowUp className="size-4" />
            )}
            {t('course.createAction')}
          </Button>
        </div>
        {createError && (
          <p className="mt-3 text-xs text-red-600 dark:text-red-400">{createError}</p>
        )}
      </section>

      <div className="mb-3 flex items-center justify-between">
        <span className="text-sm font-medium text-foreground/80">{t('course.listTitle')}</span>
        <Button variant="ghost" size="sm" onClick={() => void load()} disabled={loading}>
          <RefreshCw className={cn('size-4', loading && 'animate-spin')} />
        </Button>
      </div>

      {loadError && (
        <div className="mb-4 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-200">
          {loadError}
        </div>
      )}

      {loading && items.length === 0 && (
        <p className="py-8 text-center text-sm text-muted-foreground">{t('common.loading')}</p>
      )}

      {!loading && items.length === 0 && !loadError && (
        <p className="py-10 text-center text-sm text-muted-foreground">{t('course.empty')}</p>
      )}

      <div className="space-y-3">
        {items.map((item) => (
          <button
            key={item.courseId}
            type="button"
            onClick={() => router.push(`/courses/${item.courseId}`)}
            className="group w-full rounded-xl border border-border/60 bg-white/70 p-4 text-left shadow-sm transition-[border-color,box-shadow,transform] duration-180 ease-out hover:-translate-y-px hover:border-violet-300 hover:shadow-md dark:bg-zinc-900/80 dark:hover:border-violet-700"
          >
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <h3 className="truncate font-medium transition-colors group-hover:text-violet-600 dark:group-hover:text-violet-400">
                    {item.title}
                  </h3>
                  <span
                    className={cn(
                      'shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium',
                      STATUS_STYLES[item.status] ?? STATUS_STYLES.queued,
                    )}
                  >
                    {t(`course.status.${item.status}`)}
                  </span>
                </div>
                <p className="mt-1 text-xs text-muted-foreground">
                  {item.status === 'framework_ready'
                    ? t('course.awaitingConfirmHint')
                    : item.moduleCount > 0
                      ? t('course.modulesProgress', {
                          succeeded: item.succeededCount,
                          total: item.moduleCount,
                        })
                      : t('course.frameworkGeneratingHint')}
                  {item.error ? ` · ${item.error}` : ''}
                </p>
              </div>
              <div className="flex shrink-0 items-center gap-2">
                {item.status === 'completed' && (
                  <CheckCircle2 className="size-4 text-emerald-500" />
                )}
                {item.status === 'failed' && <XCircle className="size-4 text-red-500" />}
                <span className="text-[11px] text-muted-foreground/70">
                  {formatDate(item.createdAt)}
                </span>
                <ChevronRight className="size-4 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5 group-hover:text-violet-500" />
              </div>
            </div>
          </button>
        ))}
      </div>
    </>
  );

  if (embedded) return <div className="w-full">{content}</div>;

  return (
    <main className="min-h-[100dvh] bg-zinc-50 dark:bg-zinc-950">
      <div className="mx-auto max-w-4xl px-6 py-10">
        <header className="mb-6 flex items-center justify-between">
          <div>
            <h1 className="flex items-center gap-2 text-xl font-semibold">
              <Layers className="size-5 text-violet-500" />
              {t('course.createTitle')}
            </h1>
          </div>
          <Button variant="outline" size="sm" onClick={() => router.push('/')}>
            <ArrowLeft className="size-4" />
            {t('common.back')}
          </Button>
        </header>
        {content}
      </div>
    </main>
  );
}