import { Anchor, Text, Title } from '@mantine/core';
import classes from './Welcome.module.css';
import { useEffect, useState } from 'react';

export function Welcome({ width, height }: { width: number; height: number }) {
  // 📏 Clasificamos el tamaño del panel
  const small = width < 400;
  const medium = width >= 400 && width < 800;
  const large = width >= 800;

  // 🔹 Ajustes según tamaño del panel
  const padding = small ? 8 : medium ? 16 : 32;
  const textSize = small ? 'sm' : medium ? 'md' : 'lg';
  const titleOrder = small ? 3 : medium ? 2 : 1;
  const maxWidth = small ? 300 : medium ? 500 : 700;

  // 🎨 Tamaños de fuente personalizados por modo
  const titleFontSize = small
    ? '2rem'   // pequeño
    : medium
    ? '3.5rem' // mediano
    : '6rem';  // grande

  const subtitleFontSize = small
    ? '0.85rem'
    : medium
    ? '1rem'
    : '1.25rem';


  // ⏰ Estado para la hora actual
  const [currentTime, setCurrentTime] = useState(new Date());

  // 🔄 Actualizamos la hora cada segundo
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div
      style={{
        width,
        height,
        overflow: 'auto',
        padding,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Title
        className={classes.title}
        ta="center"
        order={titleOrder}
        style={{
          fontSize: titleFontSize,
          lineHeight: 1.1,
          fontWeight: 900,
          letterSpacing: '-1.5px',
        }}
      >
        Welcome to the{' '}
        <Text
          inherit
          variant="gradient"
          component="span"
          gradient={{ from: 'pink', to: 'yellow' }}
        >
          Machine
        </Text>
      </Title>

      <Text
        c="dimmed"
        ta="center"
        size={textSize}
        maw={maxWidth}
        mx="auto"
        mt={medium || large ? 'xl' : 'sm'}
        style={{ fontSize: subtitleFontSize }}
      >
        Este es el boilerplate de Enmanuel. Para conocer Mantine usa{' '}
        <Anchor href="https://mantine.dev/guides/vite/" size={textSize}>
          esta guia
        </Anchor>
        . Para comenzar edita <code>pages/Home.page.tsx</code>
      </Text>

      <Text c="gray" ta="center" mt="md" size="sm">
        Panel size: {Math.round(width)} × {Math.round(height)} ({small ? 'small' : medium ? 'medium' : 'large'})
      </Text>

      {/* ⏰ Mostramos la hora actual */}
      <Text c="gray" ta="center" mt="sm" size="sm">
          {currentTime.toLocaleTimeString([], { hour12: false })}
      </Text>

    </div>
  );
}
