'use client';
import Image from 'next/image';
import Link from 'next/link';
import { SubmitResponse } from '@/types/submit';

interface Props {
  response: SubmitResponse;
  qrImageUrl: string | null;
  nombreEvento?: string;
  nombreFormulario?: string;
}

export default function FormularioExito({
  response,
  qrImageUrl,
  nombreEvento,
  nombreFormulario,
}: Props) {
  return (
    <div className="container my-5">
      <div className="row justify-content-center">
        <div className="col-12 col-lg-10 col-xl-8">
          <div className="card shadow-sm">
            <div className="card-body">
              <div className="row g-4">
                <div className="col-md-6">
                  <div className="h-100 d-flex flex-column justify-content-center">
                    <div className="text-center mb-4">
                      <div className="mb-3">
                        <div
                          className="d-inline-flex align-items-center justify-content-center bg-success rounded-circle"
                          style={{ width: '60px', height: '60px' }}
                        >
                          <i
                            className="bi bi-check-lg text-white"
                            style={{ fontSize: '2rem' }}
                          ></i>
                        </div>
                      </div>
                      <h2 className="fw-bold text-success mb-2">¡Felicidades!</h2>
                      <p className="text-muted mb-0">
                        Has completado exitosamente el formulario
                      </p>
                    </div>

                    {nombreEvento && (
                      <div className="mb-3">
                        <div className="d-flex align-items-center mb-2">
                          <i
                            className="bi bi-calendar-event text-primary me-3"
                            style={{ fontSize: '1.3rem' }}
                          ></i>
                          <h6 className="mb-0 text-primary">Evento</h6>
                        </div>
                        <p className="mb-0 fs-6 fw-semibold ms-5">{nombreEvento}</p>
                      </div>
                    )}

                    {nombreFormulario && (
                      <div className="mb-3">
                        <div className="d-flex align-items-center mb-2">
                          <i
                            className="bi bi-file-text text-info me-3"
                            style={{ fontSize: '1.3rem' }}
                          ></i>
                          <h6 className="mb-0 text-info">Formulario</h6>
                        </div>
                        <p className="mb-0 fs-6 fw-semibold ms-5">{nombreFormulario}</p>
                      </div>
                    )}

                    {response.message && (
                      <div className="mb-3">
                        <div className="alert alert-info" role="alert">
                          <div className="d-flex align-items-start">
                            <i className="bi bi-info-circle me-2 mt-1"></i>
                            <div>
                              <strong>Mensaje:</strong>
                              <p className="mb-0 mt-1">{response.message}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                <div className="col-md-6">
                  <div className="h-100 d-flex flex-column justify-content-center align-items-center">
                    {qrImageUrl ? (
                      <div className="text-center">
                        <h5 className="mb-3 text-secondary">
                          <i className="bi bi-qr-code me-2"></i>
                          Código QR
                        </h5>
                        <div className="p-3 bg-white rounded shadow-sm">
                          <Image
                            src={qrImageUrl}
                            alt="Código QR"
                            width={250}
                            height={250}
                            className="rounded"
                            style={{ maxWidth: '100%', height: 'auto' }}
                            unoptimized
                          />
                        </div>
                      </div>
                    ) : (
                      <div className="text-center text-muted">
                        <i
                          className="bi bi-qr-code-scan"
                          style={{ fontSize: '4rem' }}
                        ></i>
                        <p className="mt-3 mb-0">No hay código QR disponible</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="text-center mt-4">
            <Link href="/" className="btn btn-primary btn-lg me-3">
              Ir al inicio
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
