'use client';

import {useState} from 'react';
import {motion, AnimatePresence} from 'framer-motion';
import {useLoyalyAi} from '@/features/loyaly-ai/providers/LoyalyAiProvider';
import {Composer} from './Composer';
import {EmptyState} from './EmptyState';
import {SuggestionChips} from './SuggestionChips';
import {MessageList} from './MessageList';

/**
 * ChatGPT & Gemini style two-stage chat experience:
 *
 * 1. STAGE 1 — Initial Minimal Landing:
 *    - Vertically centered Loyaly logo mark, heading, subtitle, and composer.
 *    - No suggestion chips shown initially to keep interface calm and minimal.
 *
 * 2. STAGE 2 — Input Focused / Typing:
 *    - Focusing or typing in composer smoothly animates suggestion chips into view directly BELOW the composer.
 *
 * 3. Active Conversation Mode:
 *    - First message sent removes landing elements and morphs composer to sticky bottom.
 *
 * 4. New Chat:
 *    - Returns to STAGE 1 (minimal landing, chips hidden until focused again).
 */
export function Conversation() {
  const {conversation, draft, setDraft, send, stop, isStreaming} =
    useLoyalyAi();
  const [isFocused, setIsFocused] = useState(false);

  const hasMessages = conversation.messages.length > 0;
  const showChips = isFocused || draft.trim().length > 0;

  return (
    <div className="flex-1 flex flex-col h-full w-full relative overflow-hidden bg-background">
      <AnimatePresence>
        {!hasMessages ? (
          <motion.div
            key="empty-landing-view"
            initial={{opacity: 0, scale: 0.98}}
            animate={{opacity: 1, scale: 1}}
            exit={{opacity: 0, scale: 0.96, transition: {duration: 0.2}}}
            transition={{duration: 0.3, ease: 'easeOut'}}
            className="flex-1 flex flex-col justify-center items-center px-4 py-8 w-full max-w-2xl mx-auto overflow-y-auto"
          >
            <div className="w-full flex-1 flex flex-col items-center justify-center my-auto -mt-20 sm:-mt-28 py-4">
              <EmptyState />

              {/* Chat Composer (36px gap from subtitle) */}
              <motion.div
                transition={{duration: 0.3, ease: [0.16, 1, 0.3, 1]}}
                className="w-full max-w-xl mt-9"
              >
                <Composer
                  value={draft}
                  onChange={setDraft}
                  onSubmit={send}
                  onStop={stop}
                  isStreaming={isStreaming}
                  onFocus={() => setIsFocused(true)}
                  onBlur={() => setIsFocused(false)}
                />
              </motion.div>

              {/* STAGE 2 — Suggestion Chips animate in BELOW the composer when focused or typing */}
              <AnimatePresence>
                {showChips && (
                  <motion.div
                    key="stage-2-chips"
                    initial={{opacity: 0, y: -10}}
                    animate={{opacity: 1, y: 0}}
                    exit={{opacity: 0, y: -8}}
                    transition={{duration: 0.22, ease: 'easeOut'}}
                    className="w-full max-w-xl mt-[28px]"
                  >
                    <SuggestionChips onPick={send} />
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </motion.div>
        ) : (
          <motion.div
            key="active-chat-view"
            /*
             * No initial/animate opacity here.
             *
             * The composer below shares a `layoutId` with the one in the empty
             * view, and framer defers an entering element's `animate` while it
             * projects a shared layout across the swap — which left this view
             * mounted at `opacity: 0` with the conversation invisible behind
             * it (measured: two messages in the DOM, blank panel). The morph
             * itself already carries the continuity this fade was for.
             */
            className="flex-1 flex flex-col h-full w-full relative overflow-hidden"
          >
            <div className="flex-1 overflow-y-auto px-4 py-6 w-full">
              <div className="max-w-4xl mx-auto w-full space-y-4">
                <MessageList
                  messages={conversation.messages}
                  isStreaming={isStreaming}
                />
              </div>
            </div>

            <motion.div
              transition={{duration: 0.3, ease: [0.16, 1, 0.3, 1]}}
              className="p-3 border-t border-border bg-popover/90 backdrop-blur-md sticky bottom-0 z-10 w-full shrink-0"
            >
              <div className="max-w-3xl mx-auto w-full">
                <Composer
                  value={draft}
                  onChange={setDraft}
                  onSubmit={send}
                  onStop={stop}
                  isStreaming={isStreaming}
                />
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
