import logoAImg from '@/assets/images/a-agape.png';
import logoImg from '@/assets/images/agape-logo.png';
import { motion } from 'framer-motion';

import ProfileCard from './views/components/ProfileCard';

import {
  BuildingIcon,
  CalendarIcon,
  CertificateIcon,
  ClockIcon,
} from '@phosphor-icons/react';
import { useState } from 'react';
import { summary } from './views/components/mock/summary';
import { Navigation } from './views/components/navigation';
import { StorySlide } from './views/components/story-slide';
import { Button } from './views/components/ui/button';
import { Card } from './views/components/ui/card';

import { Badge } from './views/components/ui/badge';

export function App() {
  return (
    <div className="w-full h-screen overflow-hidden">
      <Retrospectiva />
    </div>
  );
}
export default function Retrospectiva() {
  const total = 6;
  const [current, setCurrent] = useState(0);

  return (
    <div className="h-screen w-full overflow-hidden bg-black">
      <Navigation total={total} current={current} setCurrent={setCurrent} />

      <div className="h-full snap-y snap-mandatory overflow-y-scroll scroll-smooth">
        <StorySlide className="bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white">
          <div className="text-center space-y-8">
            <motion.div
              initial={{ scale: 0.8, opacity: 0 }}
              whileInView={{ scale: 1, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}>
              <img
                src={logoImg}
                alt="Ágape Logo"
                className="mx-auto w-52 mb-6"
              />
            </motion.div>

            <motion.h1
              className="text-6xl md:text-7xl font-medium mb-4"
              initial={{ y: 20, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}>
              Sua Retrospectiva
              <br />
              Ágape {summary.year}
            </motion.h1>

            <motion.p
              className="text-xl md:text-2xl text-white/90 max-w-2xl mx-auto font-light"
              initial={{ y: 20, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.4 }}>
              Um ano de conquistas, eficiência e transparência na gestão pública
            </motion.p>

            <motion.div
              initial={{ y: 20, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.6 }}>
              <Button
                size="lg"
                className="bg-white text-[#0e233d] hover:bg-white/90 text-lg px-8 py-6">
                Começar
              </Button>
            </motion.div>

            <motion.div
              className="flex items-center justify-center gap-4 text-sm text-white/70 pt-8"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.8 }}>
              <span>Transparência</span>
              <span>•</span>
              <span>Eficiência</span>
              <span>•</span>
              <span>Parceria</span>
            </motion.div>
          </div>
        </StorySlide>

        <StorySlide className="bg-linear-to-br from-slate-50 to-blue-50">
          <div className="space-y-8">
            <div className="text-center space-y-4">
              <motion.div
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: true }}
                transition={{ type: 'spring', duration: 0.6 }}>
                <BuildingIcon className="h-16 w-16 mx-auto text-[#0e233d]" />
              </motion.div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#0e233d]">
                Você utilizou
              </h2>
              <motion.div
                className="text-7xl md:text-8xl font-bold text-[#145190]"
                initial={{ scale: 0.5, opacity: 0 }}
                whileInView={{ scale: 1, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ type: 'spring', duration: 0.8, delay: 0.2 }}>
                {summary.numApplicationsUsed}
              </motion.div>
              <p className="text-2xl text-muted-foreground">
                aplicações Ágape neste ano
              </p>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mt-12">
              {summary.topApplications.map((app, index) => (
                <motion.div
                  key={index}
                  className="p-6 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
                  initial={{ y: 20, opacity: 0 }}
                  whileInView={{ y: 0, opacity: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}>
                  <h3 className="text-xl font-semibold text-[#0e233d]">
                    {app.name}
                  </h3>
                  <p className="text-3xl font-bold text-[#145190] mt-2">
                    {app.uses} usos
                  </p>
                </motion.div>
              ))}
            </div>
          </div>
        </StorySlide>

        <StorySlide className="bg-linear-to-br from-slate-50 to-blue-50">
          <div className="space-y-8">
            <div className="text-center space-y-4">
              <motion.div
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: true }}
                transition={{ type: 'spring', duration: 0.6 }}>
                <CalendarIcon className="h-16 w-16 mx-auto text-[#0e233d]" />
              </motion.div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#0e233d]">
                Principais Ações
              </h2>
              <p className="text-xl text-muted-foreground">
                As atividades que mais impactaram sua gestão
              </p>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {summary.topActions.map((action, index) => (
                <motion.div
                  key={action.action}
                  initial={{ y: 20, opacity: 0 }}
                  whileInView={{ y: 0, opacity: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}>
                  <Card className="p-6 hover:shadow-lg transition-shadow h-full">
                    <div className="flex flex-col h-full justify-between">
                      <div>
                        <div className="text-5xl font-bold text-[#145190] mb-2">
                          {index + 1}
                        </div>
                        <h3 className="font-semibold text-lg mb-2">
                          {action.action}
                        </h3>
                      </div>
                      <div className="text-3xl font-bold text-[#0e233d] mt-4">
                        {action.count.toLocaleString('pt-BR')}
                      </div>
                    </div>
                  </Card>
                </motion.div>
              ))}
            </div>
          </div>
        </StorySlide>

        <StorySlide className="bg-linear-to-br from-[#0e233d] via-[#173b63] to-[#145190] text-white">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center min-h-screen p-8">
            <motion.div
              className="space-y-8 text-center lg:text-left"
              initial={{ x: -50, opacity: 0 }}
              whileInView={{ x: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}>
              <motion.div
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: true }}
                transition={{ type: 'spring', duration: 0.6 }}>
                <ClockIcon className="h-24 w-24 mb-8 text-yellow-300 lg:mx-0" />
              </motion.div>

              <div className="space-y-6">
                <h2 className="text-4xl md:text-5xl font-bold">
                  Seu horário preferido
                </h2>

                <motion.div
                  className="text-6xl md:text-7xl font-bold text-yellow-300"
                  initial={{ scale: 0.5, opacity: 0 }}
                  whileInView={{ scale: 1, opacity: 1 }}
                  viewport={{ once: true }}
                  transition={{ type: 'spring', duration: 0.8, delay: 0.2 }}>
                  {summary.favoriteHourRange}
                </motion.div>
                <p className="text-xl text-white/90 max-w-lg">
                  É quando você mais acessa as plataformas Ágape
                </p>
              </div>
            </motion.div>

            <motion.div
              className="flex justify-center lg:justify-end"
              initial={{ x: 50, opacity: 0 }}
              whileInView={{ x: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}>
              <Card className="bg-white/10 backdrop-blur border-white/20 text-white p-8 max-w-md w-full">
                <CertificateIcon className="h-14 w-14 mx-auto mb-6 text-yellow-300" />
                <h3 className="text-2xl font-bold mb-4 text-center">
                  {summary.badge.title}
                </h3>
                <div className="flex justify-center mb-4">
                  <Badge
                    variant="secondary"
                    className="bg-yellow-300 text-[#0e233d] px-4 py-2 text-lg">
                    {summary.badge.subtitle}
                  </Badge>
                </div>
                <p className="text-white/90 text-center text-lg">
                  {summary.badge.description}
                </p>
              </Card>
            </motion.div>
          </div>
        </StorySlide>

        <StorySlide className="bg-linear-to-br from-slate-50 to-blue-50">
          <div className="h-screen max-h-screen overflow-y-auto flex flex-col md:flex-row items-center justify-center px-6 gap-12">
            <div className="space-y-12 w-full md:w-1/2 text-center md:text-left">
              <motion.div
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: true }}
                transition={{ type: 'spring', duration: 0.6 }}>
                <img src={logoAImg} className="w-10" />
              </motion.div>

              <h2 className="text-4xl md:text-5xl font-bold text-[#0e233d]">
                A Ágape deseja a você um {summary.year + 1} repleto de sucesso!
              </h2>

              <p className="text-xl text-muted-foreground max-w-xl">
                {summary.messageFinal}
              </p>

              <motion.div
                className="text-sm text-muted-foreground"
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.4 }}>
                <p>
                  &copy; {summary.year} {summary.orgName}
                </p>
                <p className="mt-2">O Futuro da Gestão Pública começa aqui!</p>
              </motion.div>
            </div>

            <div className="w-full md:w-1/2 flex justify-center">
              <div className="max-w-md w-full">
                <ProfileCard
                  name="Guilherme Santos"
                  title="Software Engineer"
                  handle="javicodes"
                  status="Online"
                  contactText="Contact Me"
                  avatarUrl="https://github.com/GuilhermeSantosUI.png"
                  showUserInfo={true}
                  enableTilt={true}
                  enableMobileTilt={false}
                  onContactClick={() => console.log('Contact clicked')}
                />
              </div>
            </div>
          </div>
        </StorySlide>
      </div>
    </div>
  );
}
