"use client";

import { useTranslations, useLocale } from 'next-intl';
import Link from 'next/link';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import toast from 'react-hot-toast';

export default function ReportViolationPage() {
    const locale = useLocale();
    const t = useTranslations('report-violation');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        toast.success(t('success-message'));
    };

    return (
        <div className="bg-background-light dark:bg-background-dark text-text-main-light dark:text-text-main-dark font-cairo min-h-screen transition-colors duration-300">
            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                {/* Breadcrumb */}
                <nav className="flex justify-start text-xs sm:text-sm text-text-muted-light dark:text-text-muted-dark mb-8">
                    <Link href={`/${locale}/home`} className="hover:text-report-blue cursor-pointer transition-colors">
                        {t('breadcrumb-home')}
                    </Link>
                    <span className="mx-2">&gt;</span>
                    <span className="font-semibold text-text-main-light dark:text-text-main-dark">
                        {t('breadcrumb-title')}
                    </span>
                </nav>

                <main className="w-full">
                    {/* Header */}
                    <div className="text-center mb-10 space-y-4">
                        <h1 className="text-2xl sm:text-3xl font-extrabold text-text-main-light dark:text-text-main-dark">
                            {t('title')}
                        </h1>
                        <p className="text-xs sm:text-sm leading-relaxed text-text-muted-light dark:text-text-muted-dark max-w-3xl mx-auto">
                            {t.rich('description', {
                                bold: (chunks) => <span className="font-bold text-black dark:text-white">{chunks}</span>
                            })}
                        </p>
                    </div>

                    {/* Form */}
                    <form onSubmit={handleSubmit} className="max-w-4xl mx-auto space-y-6 pb-20">
                        {/* City Selection */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start">
                                {t('city-label')}
                            </label>
                            <div className="w-full md:w-3/4">
                                <Select dir={locale === 'ar' ? 'rtl' : 'ltr'}>
                                    <SelectTrigger className="w-full bg-white dark:bg-surface-dark border border-report-border-light dark:border-border-dark rounded-DEFAULT px-4 py-3 text-sm text-text-muted-light dark:text-text-muted-dark h-auto">
                                        <SelectValue placeholder={t('city-placeholder')} />
                                    </SelectTrigger>
                                    <SelectContent className="font-cairo">
                                        <SelectItem value="riyadh">{t('city-riyadh')}</SelectItem>
                                        <SelectItem value="jeddah">{t('city-jeddah')}</SelectItem>
                                        <SelectItem value="dammam">{t('city-dammam')}</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        {/* Violation Type */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start">
                                {t('type-label')}
                            </label>
                            <div className="w-full md:w-3/4">
                                <Select dir={locale === 'ar' ? 'rtl' : 'ltr'}>
                                    <SelectTrigger className="w-full bg-white dark:bg-surface-dark border border-report-border-light dark:border-border-dark rounded-DEFAULT px-4 py-3 text-sm text-text-muted-light dark:text-text-muted-dark h-auto">
                                        <SelectValue placeholder={t('type-placeholder')} />
                                    </SelectTrigger>
                                    <SelectContent className="font-cairo">
                                        <SelectItem value="fraud">{t('type-fraud')}</SelectItem>
                                        <SelectItem value="theft">{t('type-theft')}</SelectItem>
                                        <SelectItem value="harassment">{t('type-harassment')}</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        {/* Reporting About */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start">
                                {t('reporting-about-label')}
                            </label>
                            <div className="w-full md:w-3/4">
                                <Select dir={locale === 'ar' ? 'rtl' : 'ltr'}>
                                    <SelectTrigger className="w-full bg-white dark:bg-surface-dark border border-report-border-light dark:border-border-dark rounded-DEFAULT px-4 py-3 text-sm text-text-muted-light dark:text-text-muted-dark h-auto">
                                        <SelectValue placeholder={t('reporting-about-placeholder')} />
                                    </SelectTrigger>
                                    <SelectContent className="font-cairo">
                                        <SelectItem value="employee">{t('reporting-about-employee')}</SelectItem>
                                        <SelectItem value="manager">{t('reporting-about-manager')}</SelectItem>
                                        <SelectItem value="external">{t('reporting-about-external')}</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        {/* Violator Name */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start">
                                {t('violator-name-label')}
                            </label>
                            <div className="w-full md:w-3/4">
                                <Select dir={locale === 'ar' ? 'rtl' : 'ltr'}>
                                    <SelectTrigger className="w-full bg-white dark:bg-surface-dark border border-report-border-light dark:border-border-dark rounded-DEFAULT px-4 py-3 text-sm text-text-muted-light dark:text-text-muted-dark h-auto">
                                        <SelectValue placeholder={t('violator-name-placeholder')} />
                                    </SelectTrigger>
                                    <SelectContent className="font-cairo">
                                        <SelectItem value="known">{t('violator-known')}</SelectItem>
                                        <SelectItem value="unknown">{t('violator-unknown')}</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        {/* Details */}
                        <div className="flex flex-col md:flex-row md:items-start md:gap-6">
                            <label
                                htmlFor="details"
                                className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start pt-2"
                            >
                                {t('details-label')}
                            </label>
                            <div className="w-full md:w-3/4 relative">
                                <textarea
                                    id="details"
                                    rows={6}
                                    className="w-full bg-white dark:bg-surface-dark border border-report-border-light dark:border-border-dark rounded-DEFAULT px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-report-blue focus:border-transparent transition-shadow placeholder-gray-300 resize-none"
                                    placeholder={t('details-placeholder')}
                                ></textarea>
                            </div>
                        </div>

                        {/* Date */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label
                                htmlFor="date"
                                className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start"
                            >
                                {t('date-label')}
                            </label>
                            <div className="w-full md:w-3/4 relative">
                                <input
                                    type="date"
                                    id="date"
                                    className="w-full bg-white dark:bg-surface-dark border border-report-blue dark:border-blue-400 rounded-DEFAULT px-4 py-3 text-sm text-left focus:outline-none focus:ring-2 focus:ring-report-blue focus:border-transparent transition-shadow text-text-muted-light dark:text-text-muted-dark ltr-text"
                                    dir="ltr"
                                />
                            </div>
                        </div>

                        {/* File Upload */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start">
                                {t('file-upload-label')}
                            </label>
                            <div className="w-full md:w-3/4 relative">
                                <label
                                    htmlFor="file-upload"
                                    className="flex justify-center items-center w-full bg-gray-500 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500 text-white font-medium py-3 rounded-DEFAULT cursor-pointer transition-colors text-sm shadow-sm"
                                >
                                    <span>{t('file-upload-button')}</span>
                                    <input type="file" id="file-upload" className="hidden" />
                                </label>
                            </div>
                        </div>

                        {/* Data Sharing Consent */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start leading-tight">
                                {t('share-data-label')}<br />{t('share-data-label-2')}
                            </label>
                            <div className="w-full md:w-3/4 flex justify-start gap-6 items-center">
                                <div className="flex items-center gap-2 cursor-pointer group">
                                    <span className="text-sm text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200">
                                        {t('share-data-yes')}
                                    </span>
                                    <div className="relative">
                                        <input
                                            type="radio"
                                            name="share_data"
                                            id="yes"
                                            className="peer sr-only"
                                        />
                                        <label
                                            htmlFor="yes"
                                            className="block w-6 h-6 rounded-full border border-gray-300 dark:border-gray-500 cursor-pointer peer-checked:border-report-blue peer-checked:bg-white peer-checked:after:content-[''] peer-checked:after:block peer-checked:after:w-3 peer-checked:after:h-3 peer-checked:after:bg-report-blue peer-checked:after:rounded-full peer-checked:after:absolute peer-checked:after:top-1.5 peer-checked:after:right-1.5 hover:border-gray-400 transition-colors"
                                        ></label>
                                    </div>
                                </div>
                                <div className="flex items-center gap-2 cursor-pointer group">
                                    <span className="text-sm text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200">
                                        {t('share-data-no')}
                                    </span>
                                    <div className="relative">
                                        <input
                                            type="radio"
                                            name="share_data"
                                            id="no"
                                            className="peer sr-only"
                                            defaultChecked
                                        />
                                        <label
                                            htmlFor="no"
                                            className="block w-6 h-6 rounded-full border border-gray-300 dark:border-gray-500 cursor-pointer peer-checked:border-report-blue peer-checked:bg-white peer-checked:after:content-[''] peer-checked:after:block peer-checked:after:w-3 peer-checked:after:h-3 peer-checked:after:bg-report-blue peer-checked:after:rounded-full peer-checked:after:absolute peer-checked:after:top-1.5 peer-checked:after:right-1.5 hover:border-gray-400 transition-colors"
                                        ></label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Name */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label
                                htmlFor="name"
                                className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start"
                            >
                                {t('name-label')}
                            </label>
                            <div className="w-full md:w-3/4 relative">
                                <input
                                    type="text"
                                    id="name"
                                    className="w-full bg-white dark:bg-surface-dark border border-report-border-light dark:border-border-dark rounded-DEFAULT px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-report-blue focus:border-transparent transition-shadow"
                                />
                            </div>
                        </div>

                        {/* Phone */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6">
                            <label
                                htmlFor="phone"
                                className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start"
                            >
                                {t('phone-label')}
                            </label>
                            <div className="w-full md:w-3/4 relative flex flex-row-reverse border border-report-border-light dark:border-border-dark rounded-DEFAULT bg-white dark:bg-surface-dark overflow-hidden focus-within:ring-2 focus-within:ring-report-blue focus-within:border-transparent transition-shadow">
                                <div className="w-20 border-e border-report-border-light dark:border-border-dark flex items-center justify-center bg-gray-50 dark:bg-gray-800 text-text-muted-light dark:text-text-muted-dark text-sm" dir="ltr">
                                    +966
                                </div>
                                <input
                                    type="tel"
                                    id="phone"
                                    placeholder={t('phone-placeholder')}
                                    className="w-full flex-1 border-none bg-transparent px-4 py-3 text-sm text-left focus:ring-0 text-text-main-light dark:text-text-main-dark outline-none"
                                    dir="ltr"
                                />
                            </div>
                        </div>

                        {/* Declaration */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6 pt-4">
                            <label className="w-full md:w-1/4 text-sm font-bold text-text-main-light dark:text-text-main-dark mb-2 md:mb-0 text-start">
                                {t('declaration-label')}
                            </label>
                            <div className="w-full md:w-3/4 text-xs text-gray-500 dark:text-gray-400 leading-relaxed text-justify">
                                {t('declaration-text')}
                            </div>
                        </div>

                        {/* Submit Button */}
                        <div className="flex flex-col md:flex-row md:items-center md:gap-6 pt-6">
                            <div className="w-full md:w-1/4"></div>
                            <div className="w-full md:w-3/4">
                                <button
                                    type="submit"
                                    className="w-full bg-black hover:bg-gray-800 text-white font-bold py-3 px-6 rounded-lg transition-colors text-sm shadow-sm"
                                >
                                    {t('submit-button')}
                                </button>
                            </div>
                        </div>
                    </form>
                </main>
            </div>

            <style jsx global>{`
        input[type="date"]::-webkit-calendar-picker-indicator {
            position: absolute;
            inset-inline-start: 10px;
        }
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 20px;
        }
        .dark ::-webkit-scrollbar-thumb {
            background-color: #4b5563;
        }
      `}</style>
        </div>
    );
}