import { useState } from 'react';
import { BrandMark } from '../../../shared/components/BrandMark';
import { HomeSidebar } from '../components/HomeSidebar';
import { HomeTopbar } from '../components/HomeTopbar';
import { MessagesWorkspace } from '../components/MessagesWorkspace';
import { CallsWorkspace } from '../components/CallsWorkspace';
import { actionItems, conversations, recentCalls, sidebarItems } from '../services/homeMocks';
import { useViewport } from '../../../shared/hooks/useViewport';

export function HomePage() {
  const { isWideDesktop, isDesktop, isTablet, isMobile } = useViewport();
  const [activeTab, setActiveTab] = useState('messages');
  const [searchValue, setSearchValue] = useState('');
  const [activeConversationId, setActiveConversationId] = useState(conversations[0].id);

  const search = searchValue.trim().toLowerCase();
  const filteredConversations = !search
    ? conversations
    : conversations.filter((conversation) => {
        const haystack = `${conversation.name} ${conversation.channel} ${conversation.lastMessage}`;
        return haystack.toLowerCase().includes(search);
      });

  const safeConversationId =
    filteredConversations.find((conversation) => conversation.id === activeConversationId)?.id ||
    filteredConversations[0]?.id ||
    conversations[0].id;

  return (
    <main
      style={{
        minHeight: '100vh',
        padding: '1.5rem',
      }}
    >
      <section
        style={{
          width: 'min(1680px, calc(100vw - 3rem))',
          margin: '0 auto',
          background: 'var(--color-surface-strong)',
          borderRadius: '32px',
          boxShadow: 'var(--shadow-lg)',
          padding: '1.5rem',
          display: 'grid',
          gap: '1.5rem',
        }}
      >
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: isDesktop ? 'minmax(340px, 380px) minmax(0, 1fr)' : '1fr',
            gap: '1.5rem',
            alignItems: 'start',
          }}
        >
          <div
            style={{
              display: 'grid',
              gap: '1.25rem',
            }}
          >
            <div
              style={{
                background: '#fff',
                border: '1px solid var(--color-border)',
                borderRadius: '28px',
                padding: '1.5rem',
              }}
            >
              <BrandMark size="lg" />
            </div>
            <HomeSidebar items={sidebarItems} activeItem="dashboard" isMobile={!isDesktop} />
          </div>

          <div style={{ display: 'grid', gap: '1.25rem', minWidth: 0 }}>
            <HomeTopbar
              activeTab={activeTab}
              onTabChange={setActiveTab}
              searchValue={searchValue}
              onSearchChange={setSearchValue}
              isWideDesktop={isWideDesktop}
              isDesktop={isDesktop}
              isTablet={isTablet}
              isMobile={isMobile}
            />

            <section
              style={{
                display: 'grid',
                gap: '1rem',
              }}
            >
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
                  gap: '1rem',
                }}
              >
                {[
                  { label: 'Atendimentos ativos', value: '18', detail: '7 aguardando retorno' },
                  { label: 'Primeira resposta', value: '2m 14s', detail: 'Dentro do SLA' },
                  { label: 'Fila de voz', value: '4 chamadas', detail: '1 prioridade alta' },
                ].map((item) => (
                  <article
                    key={item.label}
                    style={{
                      padding: '1.15rem',
                      borderRadius: '22px',
                      border: '1px solid var(--color-border)',
                      background: '#fff',
                    }}
                  >
                    <span style={{ color: 'var(--color-text-soft)', display: 'block' }}>
                      {item.label}
                    </span>
                    <strong style={{ display: 'block', fontSize: '1.4rem', marginTop: '0.45rem' }}>
                      {item.value}
                    </strong>
                    <span style={{ color: 'var(--color-text-soft)', display: 'block', marginTop: '0.45rem' }}>
                      {item.detail}
                    </span>
                  </article>
                ))}
              </div>

              {activeTab === 'messages' ? (
                <MessagesWorkspace
                  conversations={filteredConversations}
                  activeConversationId={safeConversationId}
                  onSelectConversation={setActiveConversationId}
                  actionItems={actionItems}
                  isWideDesktop={isWideDesktop}
                  isDesktop={isDesktop}
                  isTablet={isTablet}
                  isMobile={isMobile}
                />
              ) : (
                <CallsWorkspace
                  calls={recentCalls}
                  isWideDesktop={isWideDesktop}
                  isDesktop={isDesktop}
                  isMobile={isMobile}
                />
              )}
            </section>
          </div>
        </div>
      </section>
    </main>
  );
}