"use client";

import React, { useState } from "react";
import Link from "next/link";
import { DEVELOPMENTS_DATA, DevelopmentProject } from "@/data/portalData";
import {
  Building2,
  TrendingUp,
  ShieldCheck,
  Calendar,
  Download,
  CheckCircle2,
  ArrowRight,
  Sparkles,
  MapPin,
  Clock,
  Layers,
  FileText
} from "lucide-react";

export default function DevelopmentsPage() {
  const [selectedProject, setSelectedProject] = useState<DevelopmentProject | null>(null);
  const [downloadModalOpen, setDownloadModalOpen] = useState(false);
  const [clientName, setClientName] = useState("");
  const [clientEmail, setClientEmail] = useState("");
  const [downloadSuccess, setDownloadSuccess] = useState(false);

  const handleOpenBrochure = (dev: DevelopmentProject) => {
    setSelectedProject(dev);
    setDownloadModalOpen(true);
    setDownloadSuccess(false);
  };

  const handleBrochureSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setDownloadSuccess(true);
  };

  return (
    <div className="min-h-screen py-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

      {/* Header */}
      <div className="mb-12 text-center max-w-3xl mx-auto space-y-4">

        <h1 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight font-display-lg">
          New Developments & Off-Plan Projects
        </h1>
        <p className="text-slate-500 text-sm sm:text-base leading-relaxed">
          Direct developer allocations for flagship residential towers and boutique coastal serviced villas. Backed by BOI approvals, escrow-managed funds, and guaranteed rental yields.
        </p>
      </div>

      {/* Projects List */}
      <div className="space-y-12">
        {DEVELOPMENTS_DATA.map((dev) => (
          <div
            key={dev.id}
            className="bg-[#0e0e10] rounded-3xl border border-[#FFE259]/25 text-white overflow-hidden border border-zinc-800 shadow-[0px_10px_30px_rgba(15,16,38,0.05)] hover:shadow-xl transition-all grid grid-cols-1 lg:grid-cols-12"
          >
            {/* Image Column (5 cols) */}
            <div className="lg:col-span-5 relative min-h-[320px] bg-[#0e0e10] border border-[#FFE259]/25 overflow-hidden">
              <img
                src={dev.heroImage}
                alt={dev.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/20 to-transparent" />

              <div className="absolute top-4 left-4 flex gap-2">
                <span className="px-3 py-1 rounded-full text-xs font-extrabold bg-[#059669] text-white shadow-md">
                  {dev.type}
                </span>
                <span className="px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-600 text-white">
                  {dev.investorYieldPercent}
                </span>
              </div>

              <div className="absolute bottom-4 left-4 right-4 text-white">
                <span className="text-[11px] font-bold uppercase tracking-wider text-slate-300 block">
                  {dev.developer}
                </span>
                <h3 className="text-xl font-bold font-display-lg">{dev.title}</h3>
                <div className="flex items-center gap-1.5 text-xs text-slate-300 mt-1">
                  <MapPin className="w-3.5 h-3.5 text-amber-400" />
                  <span>{dev.location}</span>
                </div>
              </div>
            </div>

            {/* Details Column (7 cols) */}
            <div className="lg:col-span-7 p-6 sm:p-8 flex flex-col justify-between space-y-6">

              <div>
                {/* Construction Progress Bar */}
                <div className="p-4 bg-[#18181b] rounded-2xl border border-zinc-800 text-slate-300 border border-zinc-800 mb-6">
                  <div className="flex justify-between items-center text-xs font-bold text-slate-300 mb-2">
                    <span className="flex items-center gap-1.5 text-[#059669]">
                      <Clock className="w-3.5 h-3.5" /> Stage: {dev.currentStage}
                    </span>
                    <span className="font-extrabold text-white">{dev.progressPercent}% Completed</span>
                  </div>
                  <div className="w-full h-2.5 bg-zinc-800 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-gradient-to-r from-[#059669] to-[#10b981] rounded-full transition-all duration-1000"
                      style={{ width: `${dev.progressPercent}%` }}
                    />
                  </div>
                  <div className="flex justify-between text-[11px] text-slate-500 mt-2 font-medium">
                    <span>Target Handover: <strong>{dev.completionDate}</strong></span>
                    <span>Units Remaining: <strong className="text-rose-600">{dev.unitsAvailable} / {dev.unitsTotal}</strong></span>
                  </div>
                </div>

                {/* Project Highlights */}
                <div className="space-y-2 mb-6">
                  <h4 className="text-xs font-bold text-slate-300 uppercase tracking-wider">
                    Investment Highlights
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    {dev.projectHighlights.map((hl, idx) => (
                      <div key={idx} className="flex items-start gap-2 text-xs text-slate-300">
                        <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500 shrink-0 mt-0.5" />
                        <span>{hl}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Staged Payment Plan */}
                <div>
                  <h4 className="text-xs font-bold text-slate-300 uppercase tracking-wider mb-2">
                    Milestone Payment Schedule
                  </h4>
                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-center text-xs">
                    {dev.paymentPlan.map((step, idx) => (
                      <div key={idx} className="p-2.5 bg-[#18181b] rounded-xl border border-zinc-800 text-slate-300 border border-zinc-800">
                        <span className="font-extrabold text-[#059669] block text-sm">{step.percentage}</span>
                        <span className="text-[10px] text-slate-500 font-medium block truncate">{step.stage}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Price & Action Row */}
              <div className="pt-4 border-t border-zinc-800 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div>
                  <span className="text-[11px] text-slate-400 font-bold uppercase tracking-wider block">
                    Starting From
                  </span>
                  <span className="text-2xl font-extrabold text-[#059669] font-display-lg leading-none block mt-0.5">
                    LKR {dev.startingPriceLKR}
                  </span>
                  
                </div>

                <div className="flex items-center gap-2 w-full sm:w-auto">
                  <button
                    onClick={() => handleOpenBrochure(dev)}
                    className="flex-1 sm:flex-none px-5 py-3 rounded-full border border-zinc-700 hover:border-[#059669] text-slate-300 hover:text-[#059669] text-xs font-bold flex items-center justify-center gap-1.5 transition-colors"
                  >
                    <Download className="w-3.5 h-3.5" />
                    <span>Investor Deck</span>
                  </button>
                  <Link
                    href="/contact"
                    className="flex-1 sm:flex-none bg-[#059669] hover:bg-[#047857] text-white text-xs font-bold px-6 py-3 rounded-full shadow-md shadow-[#059669]/20 transition-all text-center"
                  >
                    Reserve Unit
                  </Link>
                </div>
              </div>

            </div>
          </div>
        ))}
      </div>

      {/* Brochure Modal */}
      {downloadModalOpen && selectedProject && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-[#0e0e10] rounded-3xl border border-[#FFE259]/25 text-white max-w-md w-full p-6 relative shadow-2xl border border-zinc-800">
            {downloadSuccess ? (
              <div className="text-center py-6 space-y-3">
                <div className="w-12 h-12 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center mx-auto">
                  <CheckCircle2 className="w-6 h-6" />
                </div>
                <h4 className="text-base font-bold text-white">Investor Prospectus Sent!</h4>
                <p className="text-xs text-slate-600">
                  The complete financial prospectus and floor plan catalog for <strong>{selectedProject.title}</strong> has been sent to <strong>{clientEmail}</strong>.
                </p>
                <button
                  onClick={() => setDownloadModalOpen(false)}
                  className="w-full bg-[#059669] text-white font-bold py-2.5 rounded-full text-xs"
                >
                  Close
                </button>
              </div>
            ) : (
              <form onSubmit={handleBrochureSubmit} className="space-y-4">
                <div>
                  <span className="text-[10px] font-bold uppercase tracking-wider text-[#059669]">
                    Confidential Investor Access
                  </span>
                  <h4 className="text-base font-bold text-white">
                    Download {selectedProject.title} Prospectus
                  </h4>
                  <p className="text-xs text-slate-500 mt-1">
                    Includes audited rental yield models, BOI tax concession documents, and master structural plans.
                  </p>
                </div>

                <div className="space-y-2.5">
                  <input
                    type="text"
                    required
                    placeholder="Your Full Name"
                    value={clientName}
                    onChange={(e) => setClientName(e.target.value)}
                    className="w-full bg-[#18181b] border border-zinc-700 rounded-xl px-3.5 py-2 text-xs focus:outline-none focus:border-[#FFE259]"
                  />
                  <input
                    type="email"
                    required
                    placeholder="Business / Personal Email"
                    value={clientEmail}
                    onChange={(e) => setClientEmail(e.target.value)}
                    className="w-full bg-[#18181b] border border-zinc-700 rounded-xl px-3.5 py-2 text-xs focus:outline-none focus:border-[#FFE259]"
                  />
                </div>

                <div className="flex gap-2 pt-2">
                  <button
                    type="button"
                    onClick={() => setDownloadModalOpen(false)}
                    className="flex-1 py-2.5 rounded-full border border-zinc-700 text-slate-300 text-xs font-bold"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="flex-1 py-2.5 rounded-full bg-[#059669] text-white text-xs font-bold shadow-md"
                  >
                    Get Instant PDF
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      )}

    </div>
  );
}