'use client';
import React from 'react';
import {
  FieldWrapper,
  TextInput,
  ReadonlyField,
  FileUploadField,
  CertificateCheckbox,
  SubmitButton,
  StatusBanner,
} from './Plagiraismui';
import { usePlagiarismForm } from '../lib/usePlagiraism';
import { PaymentModal } from '@/widgets/history/ui/Paymentmodal';

// ─── UserIcon (inline) ───────────────────────────────────────────────────────

function UserIcon() {
  return (
    <svg
      className="w-4 h-4"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.5}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
      />
    </svg>
  );
}

// ─── Component ───────────────────────────────────────────────────────────────

export function PlagiarismCheckForm() {
  const {
    form,
    errors,
    submission,
    senderFullName,
    isLoading,
    setTopic,
    setFile,
    toggleCertificate,
    handleSubmit,
    resetSubmission,
    handleSubmitWithModal,
    isPaymentOpen,
    setIsPaymentOpen,
  } = usePlagiarismForm();

  return (
    <>
      <div className=" bg-[#f4f5ffec] flex items-center justify-center p-4 font-['DM_Sans',sans-serif]">
        <div className="w-full max-w-4xl">
          {/* ── Header ────────────────────────────────────────────────────── */}
          <div className="mb-8">
            <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-700 text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-4">
              <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
              Originality Check
            </div>
            <h1 className="text-3xl font-black text-stone-900 leading-tight">
              Submit Your Document
            </h1>
            <p className="text-stone-500 mt-2 text-sm leading-relaxed">
              Upload a document to verify its originality. Results are typically
              ready within a few minutes.
            </p>
          </div>

          {/* ── Card ──────────────────────────────────────────────────────── */}
          <div className="bg-white rounded-3xl shadow-xl shadow-stone-200/80 border border-stone-100 overflow-hidden">
            {/* Progress bar accent */}
            <div className="h-1 w-full bg-linear-to-r from-blue-400 via-blue-500 to-indigo-400" />

            <form
              onSubmit={handleSubmitWithModal}
              noValidate
              className="p-7 flex md:flex-row flex-col gap-6"
            >
              {/* Status banners */}
              {submission.status === 'success' && submission.response && (
                <StatusBanner
                  status="success"
                  message={`Submission successful! ID: ${submission.response.submissionId}. ${submission.response.message}`}
                  onDismiss={resetSubmission}
                />
              )}
              {submission.status === 'error' && submission.error && (
                <StatusBanner
                  status="error"
                  message={submission.error}
                  onDismiss={resetSubmission}
                />
              )}

              {/* left part */}
              <div className="flex flex-col gap-6 md:max-w-[50%] w-full">
                {/* Topic */}
                <FieldWrapper
                  label="Document Topic"
                  htmlFor="topic"
                  error={errors.topic}
                  required
                >
                  <TextInput
                    id="topic"
                    type="text"
                    placeholder="e.g. The Impact of Artificial Intelligence on Education"
                    value={form.topic}
                    onChange={(e) => setTopic(e.target.value)}
                    hasError={!!errors.topic}
                    maxLength={200}
                    disabled={isLoading}
                  />
                </FieldWrapper>

                {/* Sender Full Name (read-only) */}
                <FieldWrapper label="Sender Full Name">
                  <ReadonlyField
                    value={senderFullName || 'Not logged in'}
                    icon={<UserIcon />}
                  />
                </FieldWrapper>

                {/* Certificate Option */}
                <div>
                  <p className="text-sm font-semibold tracking-wide text-stone-700 uppercase mb-2">
                    Certificate Option
                  </p>
                  <CertificateCheckbox
                    checked={form.withCertificate}
                    onChange={toggleCertificate}
                  />
                </div>
              </div>

              {/* right part */}
              <div className="flex flex-col gap-6 md:max-w-[50%] w-full">
                {/* File Upload */}
                <FieldWrapper
                  label="Document File"
                  error={errors.file}
                  required
                >
                  <FileUploadField
                    file={form.file}
                    onFileChange={setFile}
                    hasError={!!errors.file}
                  />
                </FieldWrapper>

                {/* Divider */}
                <div className="border-t border-stone-100" />

                {/* Submit */}
                <SubmitButton isLoading={isLoading} />
              </div>
            </form>
          </div>

          {/* Footer note */}
          <p className="text-center text-xs text-stone-400 mt-5">
            Your document is processed securely and not stored beyond the
            analysis period.
          </p>
        </div>
      </div>

      <PaymentModal
        isOpen={isPaymentOpen}
        onClose={() => setIsPaymentOpen(false)}
        hasCertificate={form.withCertificate}
        onConfirmPayment={handleSubmit}
        isLoading={isLoading}
      />
    </>
  );
}