'use client'
import {type FunctionComponent} from 'react'
import {Card, CardContent} from '@/components/ui/card'
import {motion} from 'motion/react'
import {AlertCircle} from 'lucide-react'
import {Button} from '@/components/ui/button'
import Link from 'next/link'
import {useCookie} from '@/lib/useCookie'

const Error: FunctionComponent = () => {
  const requestId = useCookie('requestId')

  return (
    <div className="min-h-screen w-full flex items-center justify-center ">
      <Card className="max-w-2xl w-full shadow-lg ring-1 ring-slate-200">
        <CardContent className="p-8 flex flex-col md:flex-row items-center gap-6">
          {/* Graphic */}
          <motion.div
            initial={{rotate: 0, scale: 0.98}}
            animate={{rotate: [0, -3, 3, 0], scale: [0.98, 1.02, 1.0, 1.0]}}
            transition={{duration: 1.6, repeat: Infinity, repeatDelay: 3}}
            className="flex-shrink-0">
            <svg
              width="160"
              height="160"
              viewBox="0 0 160 160"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden
              role="img">
              <rect x="8" y="8" width="144" height="144" rx="20" fill="#FEF2F2" stroke="#FEE2E2" />

              {/* broken file */}
              <g transform="translate(20,20)">
                <path
                  d="M44 8h28l12 12v60a8 8 0 0 1-8 8H28a8 8 0 0 1-8-8V16a8 8 0 0 1 8-8z"
                  fill="#fff5f5"
                  stroke="#fecaca"
                />
                <path d="M72 20v8a8 8 0 0 0 8 8h8" fill="none" stroke="#fca5a5" strokeWidth="2" />

                {/* crack lines */}
                <path
                  d="M34 48l8 10 6-8 8 12"
                  stroke="#ef4444"
                  strokeWidth="2.5"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />

                {/* big X */}
                <g transform="translate(20,38)">
                  <circle cx="18" cy="18" r="18" fill="#fff" stroke="#fee2e2" />
                  <path d="M10 10 L26 26 M26 10 L10 26" stroke="#ef4444" strokeWidth="3" strokeLinecap="round" />
                </g>
              </g>

              {/* subtle shadow */}
              <ellipse cx="80" cy="140" rx="44" ry="6" fillOpacity="0.06" fill="#000" />
            </svg>
          </motion.div>

          {/* Text */}
          <div className="flex-1 text-center md:text-left">
            <div className="flex items-center justify-center md:justify-start gap-3 text-red-600">
              <AlertCircle className="h-6 w-6" />
              <h2 className="text-2xl font-semibold text-slate-900">Something went wrong</h2>
            </div>

            <p className="mt-3 text-sm text-slate-600">We couldn't process your request, try refreshing the page.</p>

            <div className="mt-6 flex flex-col sm:flex-row sm:items-center sm:gap-3 justify-center md:justify-start">
              <Link href="/">
                <Button>Take me home</Button>
              </Link>

              <Link className="mt-3 sm:mt-0 text-sm text-slate-500 hover:underline" href="#">
                Refresh page
              </Link>
            </div>

            <p className="mt-4 text-xs text-slate-400">If the problem persists, contact support or try again later.</p>
            <p className="text-xs text-slate-400">Request ID: {requestId}</p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default Error
