import { useState, useEffect, useRef, useMemo } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import { toast } from 'sonner';
import { ArrowLeft, Pencil, Plus, Check, X, Trash2, Search } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { useClient } from 'hooks/useClient';
import { useVisibleClaudeModels } from '@/state/useModels';
import { Card } from '@/components/Card';
import type { ChatMessage } from 'widgets/Chat';
import { useClaude } from '@/Screens/Dashboard/Chat/useClaude';
import { EmbeddableChat } from '@/Screens/Dashboard/Chat/EmbeddableChat';
type ResourceSummary = {
  dirName: string;
  name: string;
  description: string;
  scope: 'global' | 'user';
};

type ResourceDetail = ResourceSummary & {
  body: string;
  filePath: string;
  chatSessionId: string | null;
};

type ResourcePageProps = {
  kind: string;
  endpoint: string;
  queryKey: string;
};

type ResourceChatProps = {
  kind: string;
  endpoint: string;
  dirName: string;
  filePath: string;
  resourceDir: string;
  chatSessionId: string | null;
  isNew?: boolean;
  onResponseEnd?: () => void;
};

const ResourceChat = ({
  kind,
  endpoint,
  dirName,
  filePath,
  resourceDir,
  chatSessionId,
  isNew,
  onResponseEnd,
}: ResourceChatProps) => {
  const client = useClient();
  const claudeModels = useVisibleClaudeModels();
  const defaultInput = chatSessionId
    ? undefined
    : isNew
      ? `Help me create the content for this new ${kind} file: ${filePath}`
      : `Help me understand and improve this ${kind} file: ${filePath}`;

  const storage = useMemo(
    () => ({
      load: async () => {
        const data = await client.get<{ sessionId: string | null; messages: ChatMessage[] }>(
          `${endpoint}/${dirName}/chat`,
        );
        return { sessionId: data.sessionId, messages: data.messages ?? [] };
      },
      save: async (sessionId: string, messages: ChatMessage[]) => {
        await client.put(`${endpoint}/${dirName}/chat`, { sessionId, messages });
      },
    }),
    [endpoint, dirName],
  );

  const claude = useClaude(chatSessionId ?? undefined, undefined, {
    replaceUrl: false,
    storage,
    resourceChatDir: resourceDir,
  });

  const onResponseEndRef = useRef(onResponseEnd);
  onResponseEndRef.current = onResponseEnd;

  const wasGenerating = useRef(false);
  useEffect(() => {
    if (wasGenerating.current && !claude.isGenerating) {
      onResponseEndRef.current?.();
    }
    wasGenerating.current = claude.isGenerating;
  }, [claude.isGenerating]);

  return (
    <EmbeddableChat
      chat={claude}
      provider="claude"
      availableModels={claudeModels}
      defaultInput={defaultInput}
      className="h-full"
    />
  );
};

export const ResourcePage = ({ kind, endpoint, queryKey }: ResourcePageProps) => {
  const client = useClient();
  const qc = useQueryClient();
  const [selected, setSelected] = useState<string | null>(null);
  const [editing, setEditing] = useState(false);
  const [isNew, setIsNew] = useState(false);
  const [creating, setCreating] = useState(false);
  const [newName, setNewName] = useState('');
  const [deleteConfirm, setDeleteConfirm] = useState(false);
  const [search, setSearch] = useState('');
  const [showDetail, setShowDetail] = useState(false);
  const newNameRef = useRef<HTMLInputElement | null>(null);

  const { data: items = [] } = useQuery<ResourceSummary[]>({
    queryKey: [queryKey],
    queryFn: () => client.get<ResourceSummary[]>(endpoint),
  });

  useEffect(() => {
    if (items.length > 0 && !selected) {
      setSelected(items[0]!.dirName);
    }
  }, [items, selected]);

  const { data: detail } = useQuery<ResourceDetail>({
    queryKey: [queryKey, selected],
    queryFn: () => client.get<ResourceDetail>(`${endpoint}/${selected}`),
    enabled: !!selected,
  });

  const selectItem = (dirName: string) => {
    setSelected(dirName);
    setShowDetail(true);
    setIsNew(false);
    setEditing(false);
  };

  const handleCreate = async () => {
    const name = newName.trim();
    if (!name) return;
    try {
      const res = await client.post<{ name: string; dirName: string }>(endpoint, { name });
      await qc.invalidateQueries({ queryKey: [queryKey] });
      setCreating(false);
      setNewName('');
      setSelected(res.dirName);
      setShowDetail(true);
      setIsNew(true);
      setEditing(true);
    } catch {
      toast.error(`Failed to create ${kind}`);
    }
  };

  const handleDelete = async () => {
    if (!selected) return;
    try {
      await client.delete(`${endpoint}/${selected}`);
      setDeleteConfirm(false);
      setEditing(false);
      setSelected(null);
      setShowDetail(false);
      await qc.invalidateQueries({ queryKey: [queryKey] });
    } catch {
      toast.error(`Failed to delete ${kind}`);
    }
  };

  const filtered = items.filter(
    (item) =>
      !search ||
      item.name.toLowerCase().includes(search.toLowerCase()) ||
      item.description?.toLowerCase().includes(search.toLowerCase()),
  );

  return (
    <>
      <div className="flex h-full p-2 md:p-4 gap-2 md:gap-4">
        {/* Left panel — list */}
        <Card
          className={`md:w-72 shrink-0 overflow-hidden flex flex-col ${showDetail ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
        >
          <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 bg-white/60 flex items-center justify-between">
            <span className="text-sm font-medium text-duck-dark/70">{kind}s</span>
            {!creating && (
              <button
                onClick={() => {
                  setCreating(true);
                  setTimeout(() => newNameRef.current?.focus(), 0);
                }}
                className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
              >
                <Plus className="h-4 w-4 text-duck-dark/50" />
              </button>
            )}
          </div>
          {creating && (
            <div className="shrink-0 px-3 py-2 border-b border-duck-dark/10 bg-duck-teal/5 flex items-center gap-1.5">
              <input
                ref={newNameRef}
                value={newName}
                onChange={(ev) => setNewName(ev.target.value)}
                onKeyDown={(ev) => {
                  if (ev.key === 'Enter') {
                    ev.preventDefault();
                    handleCreate();
                  }
                  if (ev.key === 'Escape') {
                    setCreating(false);
                    setNewName('');
                  }
                }}
                placeholder={`${kind} name...`}
                className="flex-1 min-w-0 rounded border border-duck-dark/20 bg-white px-2 py-1 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
              />
              <button
                onClick={handleCreate}
                disabled={!newName.trim()}
                className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors disabled:opacity-30"
              >
                <Check className="h-3.5 w-3.5 text-duck-teal" />
              </button>
              <button
                onClick={() => {
                  setCreating(false);
                  setNewName('');
                }}
                className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
              >
                <X className="h-3.5 w-3.5 text-duck-dark/50" />
              </button>
            </div>
          )}
          <div className="shrink-0 px-3 py-2 border-b border-duck-dark/10">
            <div className="relative">
              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/30" />
              <input
                value={search}
                onChange={(ev) => setSearch(ev.target.value)}
                placeholder={`Search ${kind.toLowerCase()}s...`}
                className="w-full rounded border border-duck-dark/15 bg-white/80 pl-7 pr-2 py-1 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
              />
            </div>
          </div>
          <div className="overflow-y-auto flex-1">
            {filtered.map((item) => (
              <button
                key={item.dirName}
                onClick={() => selectItem(item.dirName)}
                className={`w-full text-left px-4 py-3 border-b border-duck-dark/5 cursor-pointer transition-colors ${
                  selected === item.dirName ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'
                }`}
              >
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium text-duck-dark truncate">{item.name}</span>
                  <span
                    className={`shrink-0 text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
                      item.scope === 'user' ? 'bg-duck-teal/20 text-duck-teal' : 'bg-duck-dark/10 text-duck-dark/60'
                    }`}
                  >
                    {item.scope}
                  </span>
                </div>
                {item.description && <p className="text-xs text-duck-dark/50 mt-1 line-clamp-2">{item.description}</p>}
              </button>
            ))}
            {items.length === 0 && (
              <p className="text-sm text-duck-dark/40 px-4 py-6 text-center">No {kind.toLowerCase()}s found</p>
            )}
            {items.length > 0 && filtered.length === 0 && (
              <p className="text-sm text-duck-dark/40 px-4 py-6 text-center">No matches</p>
            )}
          </div>
        </Card>

        {/* Right panel — detail + chat */}
        <div className={`flex-1 flex flex-col gap-4 min-h-0 ${showDetail ? 'flex' : 'hidden md:flex'}`}>
          <Card className={`flex-1 overflow-hidden flex flex-col min-h-0 ${editing ? 'hidden md:flex' : ''}`}>
            <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 bg-white/60 flex items-center gap-2">
              <button
                onClick={() => setShowDetail(false)}
                className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer"
              >
                <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
              </button>
              <span className="text-sm font-medium text-duck-dark/70 flex-1">
                {detail?.name ?? `Select a ${kind.toLowerCase()}`}
              </span>
              {detail && (
                <>
                  <button
                    onClick={() => setEditing((e) => !e)}
                    className={`p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors ${editing ? 'bg-duck-teal/10' : ''}`}
                  >
                    <Pencil className={`h-3.5 w-3.5 ${editing ? 'text-duck-teal' : 'text-duck-dark/50'}`} />
                  </button>
                  <button
                    onClick={() => setDeleteConfirm(true)}
                    className="p-1 rounded hover:bg-red-50 cursor-pointer transition-colors"
                  >
                    <Trash2 className="h-3.5 w-3.5 text-duck-dark/50 hover:text-red-500" />
                  </button>
                </>
              )}
            </div>
            <div className="overflow-y-auto flex-1 p-6">
              {detail?.body ? (
                <article className="skill-md">
                  <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                    {detail.body}
                  </ReactMarkdown>
                </article>
              ) : detail ? (
                <p className="text-sm text-duck-dark/40 text-center mt-12">Empty file</p>
              ) : (
                <p className="text-sm text-duck-dark/40 text-center mt-12">
                  Select a {kind.toLowerCase()} to view its contents
                </p>
              )}
            </div>
          </Card>

          {editing && detail?.filePath && selected && (
            <Card className="flex-1 overflow-hidden flex flex-col min-h-0">
              <div className="shrink-0 px-4 py-1.5 border-b border-duck-dark/10 bg-white/60 flex items-center gap-2">
                <button
                  onClick={() => setEditing(false)}
                  className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer"
                >
                  <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
                </button>
                <span className="text-xs font-medium text-duck-dark/50 flex-1">{detail?.name ?? 'Chat'}</span>
                <button
                  onClick={() => setEditing(false)}
                  className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
                >
                  <X className="h-3.5 w-3.5 text-duck-dark/50" />
                </button>
              </div>
              <ResourceChat
                kind={kind.toLowerCase()}
                key={detail.filePath}
                endpoint={endpoint}
                dirName={selected}
                filePath={detail.filePath}
                resourceDir={detail.filePath.replace(/\/[^/]+$/, '')}
                chatSessionId={detail.chatSessionId}
                isNew={isNew}
                onResponseEnd={() => qc.invalidateQueries({ queryKey: [queryKey, selected] })}
              />
            </Card>
          )}
        </div>
      </div>

      <Dialog open={deleteConfirm} onOpenChange={setDeleteConfirm}>
        <DialogContent className="sm:max-w-md z-[700]">
          <DialogHeader>
            <DialogTitle>Delete {kind}</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete &quot;{detail?.name}&quot;? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end gap-2 mt-2">
            <Button variant="outline" onClick={() => setDeleteConfirm(false)} className="cursor-pointer">
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDelete} className="cursor-pointer">
              Delete
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
};