'use client'

import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { 
  Search, 
  Home, 
  ArrowLeft,
  FileQuestion,
  RefreshCw,
  Mail
} from 'lucide-react'

export default function NotFound() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-amber-50 to-orange-100 flex items-center justify-center p-4">
      <div className="max-w-md w-full">
        <Card className="shadow-xl">
          <CardHeader className="text-center pb-2">
            <div className="mx-auto w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mb-4">
              <FileQuestion className="w-10 h-10 text-amber-600" />
            </div>
            <CardTitle className="text-2xl font-bold text-gray-900">
              404 - Halaman Tidak Ditemukan
            </CardTitle>
            <CardDescription className="text-gray-600 mt-2">
              Maaf, halaman yang Anda cari tidak ada atau telah dipindahkan.
            </CardDescription>
          </CardHeader>
          
          <CardContent className="space-y-4">
            <div className="bg-gray-50 rounded-lg p-4">
              <h3 className="font-semibold text-sm text-gray-700 mb-2">
                Kemungkinan penyebab:
              </h3>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• URL yang dimasukkan salah</li>
                <li>• Halaman telah dipindahkan atau dihapus</li>
                <li>• Link yang Anda ikuti sudah kadaluarsa</li>
                <li>• Anda tidak memiliki akses ke halaman ini</li>
              </ul>
            </div>

            <div className="flex flex-col sm:flex-row gap-3">
              <Link href="/" className="flex-1">
                <Button className="w-full">
                  <Home className="w-4 h-4 mr-2" />
                  Kembali ke Beranda
                </Button>
              </Link>
              
              <Button 
                variant="outline" 
                onClick={() => window.history.back()}
                className="flex-1"
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                Kembali
              </Button>
            </div>

            <div className="flex flex-col sm:flex-row gap-3">
              <Link href="/track" className="flex-1">
                <Button variant="ghost" className="w-full">
                  <Search className="w-4 h-4 mr-2" />
                  Lacak Pengajuan
                </Button>
              </Link>
              
              <Button variant="ghost" onClick={() => window.location.reload()} className="flex-1">
                <RefreshCw className="w-4 h-4 mr-2" />
                Refresh Halaman
              </Button>
            </div>

            <div className="text-center pt-4 border-t">
              <p className="text-sm text-gray-600 mb-2">
                Masih mengalami masalah?
              </p>
              <Link href="mailto:support@polres-wonosobo.com">
                <Button variant="ghost" size="sm">
                  <Mail className="w-4 h-4 mr-2" />
                  Hubungi Support
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        <div className="text-center mt-6">
          <p className="text-sm text-gray-500">
            © {new Date().getFullYear()} Polres Wonosobo - Sistem Layanan Digital
          </p>
        </div>
      </div>
    </div>
  )
}