JML/src/app/investor/plans/page.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Target, Plus, Zap, ChevronRight, ArrowRight, Edit, Trash2, Eye, TrendingUp, X, CreditCard } from 'lucide-react';
import { investors } from '@/data/mockData';
import toast from 'react-hot-toast';
import InvestorNotification from '@/components/InvestorNotification';

export default function MyInvestmentsPage() {
  const investor = investors[0];
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [selectedTemplate, setSelectedTemplate] = useState<any>(null);
  const [newInvestment, setNewInvestment] = useState({
    planName: '', planType: 'gold', totalInvestment: 0, initialPayment: 0, paymentType: 'full',
    startDate: '', endDate: '', paymentMethod: 'bank', transactionReference: '', notes: ''
  });

  const PLAN_TEMPLATES = [
    { id: '1bike', name: '1 Bike Plan', tier: 'Standard', evBasePrice: 200000, minQuantity: 1, duration: 12, maxInvestment: 1000000 },
    { id: '5bike', name: '5 Bike Plan', tier: 'Premium', evBasePrice: 180000, minQuantity: 5, duration: 24, maxInvestment: 5000000 },
    { id: '10bike', name: '10 Bike Plan', tier: 'Enterprise', evBasePrice: 170000, minQuantity: 10, duration: 36, maxInvestment: 10000000 },
  ];

  const planConfig: Record<string, { bg: string; border: string; icon: string }> = {
    silver: { bg: 'bg-slate-100', border: 'border-slate-300', icon: 'text-slate-500' },
    gold: { bg: 'bg-amber-100', border: 'border-amber-300', icon: 'text-amber-500' },
    platinum: { bg: 'bg-purple-100', border: 'border-purple-300', icon: 'text-purple-500' },
    diamond: { bg: 'bg-blue-100', border: 'border-blue-300', icon: 'text-blue-500' },
  };

  const handleCreate = () => {
    if (!newInvestment.planName || !newInvestment.totalInvestment) {
      toast.error('Please fill all required fields');
      return;
    }
    if (newInvestment.paymentType === 'partial' && newInvestment.initialPayment < newInvestment.totalInvestment * 0.5) {
      toast.error('Initial payment must be at least 50% of investment amount');
      return;
    }
    toast.success(newInvestment.paymentType === 'partial'
      ? `Investment created! Initial: ৳${newInvestment.initialPayment.toLocaleString()}, Balance: ৳${(newInvestment.totalInvestment - newInvestment.initialPayment).toLocaleString()}`
      : 'Investment created successfully!'
    );
    setShowCreateModal(false);
    setSelectedTemplate(null);
    setNewInvestment({ planName: '', planType: 'gold', totalInvestment: 0, initialPayment: 0, paymentType: 'full', startDate: '', endDate: '', paymentMethod: 'bank', transactionReference: '', notes: '' });
  };

  return (
    <div className="min-h-screen ">
      <InvestorNotification isMobile />
      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
        {/* Header */}
        <div className="mb-6">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
              <h1 className="text-xl sm:text-2xl font-bold text-slate-800 flex items-center gap-2">
                <Target className="w-5 h-5 sm:w-6 sm:h-6 text-investor" /> My Investments
              </h1>
              <p className="text-sm text-slate-500 mt-1">Manage your active portfolios and track your earnings.</p>
            </div>
            <button
              onClick={() => setShowCreateModal(true)}
              className="px-4 py-2.5 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark flex items-center gap-2 shadow-sm"
            >
              <Plus className="w-4 h-4" /> Create Investment
            </button>
          </div>
        </div>

        {/* Investment Plans Cards */}
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="font-semibold text-slate-800">Investment Plans</h3>
              <p className="text-sm text-slate-500">Manage investment portfolios for this investor</p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {investor.investments?.map((inv) => {
              const style = planConfig[inv.planType] || planConfig.gold;
              return (
                <div key={inv.id} className={`bg-white rounded-xl border ${style.border} overflow-hidden`}>
                  <div className={`${style.bg} p-4 flex items-center justify-between`}>
                    <div>
                      <h4 className="font-semibold text-slate-800">{inv.planName}</h4>
                      <p className="text-sm text-slate-500 capitalize">{inv.planType} Plan</p>
                    </div>
                    <span className={`text-xs font-medium px-2.5 py-1 rounded-full ${inv.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-200 text-slate-600'}`}>
                      {inv.status}
                    </span>
                  </div>
                  <div className="p-4 space-y-4">
                    <div className="grid grid-cols-2 gap-3">
                      <div className="bg-slate-50 rounded-lg p-3">
                        <p className="text-xs text-slate-500">Investment</p>
                        <p className="font-bold text-slate-800">৳{inv.totalInvestment.toLocaleString()}</p>
                      </div>
                      <div className="bg-purple-50 rounded-lg p-3">
                        <p className="text-xs text-purple-600">Total Return</p>
                        <p className="font-bold text-purple-700">৳{inv.actualEarnings.toLocaleString()}</p>
                      </div>
                    </div>
                    <div className="bg-slate-50 rounded-lg p-3 space-y-1.5">
                      <div className="flex justify-between text-xs">
                        <span className="text-slate-400">Duration</span>
                        <span className="font-medium">12 months</span>
                      </div>
                      <div className="flex justify-between text-xs">
                        <span className="text-slate-400">Lock-in Period</span>
                        <span className="font-medium">3 months</span>
                      </div>
                      <div className="flex justify-between text-xs">
                        <span className="text-slate-400">Early Exit Penalty</span>
                        <span className="font-medium text-red-500">10%</span>
                      </div>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-slate-400">{inv.startDate} - {inv.endDate || 'Ongoing'}</span>
                      <span className="capitalize text-slate-500">{inv.paymentMethod}</span>
                    </div>
                    <div className="pt-3 border-t border-slate-100">
                      <p className="text-xs text-slate-400 mb-2">ID: #{inv.id?.slice(-6) || 'N/A'}</p>
                      <div className="flex gap-2">
                        <Link href={`/investor/investments/${inv.id}`} className="flex-1 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg border border-slate-200 text-center">
                          <Eye className="w-4 h-4 inline mr-1" /> View
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {(!investor.investments || investor.investments.length === 0) && (
            <div className="text-center py-16 bg-slate-50 rounded-xl border-2 border-dashed border-slate-200">
              <TrendingUp className="w-12 h-12 mx-auto mb-3 text-slate-300" />
              <h4 className="font-semibold text-slate-600 mb-2">No Investments Yet</h4>
              <p className="text-slate-400 mb-4">Create your first investment plan</p>
              <button onClick={() => setShowCreateModal(true)} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark">
                <Plus className="w-4 h-4 inline mr-1" /> Create Investment
              </button>
            </div>
          )}
        </div>

        {/* Create Investment Modal */}
        {showCreateModal && (
          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
              <div className="p-5 border-b border-slate-100 flex items-center justify-between">
                <div>
                  <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
                    <Plus className="w-5 h-5 text-investor" /> Create New Investment
                  </h2>
                  <p className="text-sm text-slate-500">Set up investment for {investor.name}</p>
                </div>
                <button onClick={() => setShowCreateModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
                  <X className="w-5 h-5 text-slate-400" />
                </button>
              </div>

              <div className="p-5 overflow-y-auto flex-1 space-y-5">
                {!selectedTemplate ? (
                  <>
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-2 block">Select Plan Template</label>
                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        {PLAN_TEMPLATES.map(plan => (
                          <button
                            key={plan.id}
                            onClick={() => {
                              setSelectedTemplate(plan);
                              setNewInvestment({
                                ...newInvestment,
                                planName: plan.name,
                                planType: plan.tier.toLowerCase() as any,
                                totalInvestment: plan.evBasePrice * plan.minQuantity,
                                startDate: new Date().toISOString().split('T')[0],
                              });
                            }}
                            className="p-4 rounded-lg border-2 border-slate-200 hover:border-investor/50 text-left transition-all hover:bg-slate-50"
                          >
                            <p className="font-semibold text-slate-800">{plan.name}</p>
                            <p className="text-xs text-slate-500 mt-1">৳{plan.evBasePrice.toLocaleString()} × {plan.minQuantity} bikes</p>
                            <p className="text-sm text-slate-600 mt-1">Duration: {plan.duration} months</p>
                          </button>
                        ))}
                      </div>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                      <button onClick={() => setSelectedTemplate(null)} className="text-xs text-investor hover:underline">← Change Template</button>
                      <span className="text-slate-300">|</span>
                      <span className="text-sm font-medium text-slate-700">{selectedTemplate.name}</span>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Plan Name *</label>
                        <input
                          type="text"
                          value={newInvestment.planName}
                          onChange={(e) => setNewInvestment({ ...newInvestment, planName: e.target.value })}
                          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                          placeholder="Plan name"
                        />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Plan Type</label>
                        <select
                          value={newInvestment.planType}
                          onChange={(e) => setNewInvestment({ ...newInvestment, planType: e.target.value as any })}
                          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
                        >
                          <option value="silver">Silver</option>
                          <option value="gold">Gold</option>
                          <option value="platinum">Platinum</option>
                          <option value="diamond">Diamond</option>
                        </select>
                      </div>
                    </div>

                    <div className="grid grid-cols-3 gap-4">
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">EV Base Price (৳)</label>
                        <input type="number" value={selectedTemplate.evBasePrice} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-50 cursor-not-allowed" />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Minimum Quantity</label>
                        <input type="number" value={selectedTemplate.minQuantity} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-50 cursor-not-allowed" />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Min Investment (৳)</label>
                        <input type="number" value={selectedTemplate.evBasePrice * selectedTemplate.minQuantity} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100 cursor-not-allowed" />
                        <p className="text-xs text-slate-400 mt-1">= Qty × Base Price</p>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Investment Amount (৳) *</label>
                        <input
                          type="number"
                          value={newInvestment.totalInvestment}
                          onChange={(e) => setNewInvestment({ ...newInvestment, totalInvestment: Number(e.target.value) })}
                          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-yellow-50"
                        />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Max Investment (৳)</label>
                        <input type="number" value={selectedTemplate.maxInvestment} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100 cursor-not-allowed" />
                      </div>
                    </div>

                    <div className="bg-slate-50 rounded-xl p-4 border border-slate-200">
                      <h4 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-2">
                        <CreditCard className="w-4 h-4 text-investor" /> Payment Options
                      </h4>
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
                        <label className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${newInvestment.paymentType === 'full' ? 'border-investor bg-investor/5' : 'border-slate-200 hover:border-slate-300'}`}>
                          <input
                            type="radio"
                            name="paymentType"
                            value="full"
                            checked={newInvestment.paymentType === 'full'}
                            onChange={() => setNewInvestment({ ...newInvestment, paymentType: 'full', initialPayment: newInvestment.totalInvestment })}
                            className="w-4 h-4 text-investor"
                          />
                          <div className="flex-1">
                            <p className="font-medium text-slate-800 text-sm">Full Payment</p>
                            <p className="text-xs text-slate-500">Pay total amount at once</p>
                          </div>
                          <span className="text-lg font-bold text-green-600">৳{newInvestment.totalInvestment.toLocaleString()}</span>
                        </label>
                        <label className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${newInvestment.paymentType === 'partial' ? 'border-investor bg-investor/5' : 'border-slate-200 hover:border-slate-300'}`}>
                          <input
                            type="radio"
                            name="paymentType"
                            value="partial"
                            checked={newInvestment.paymentType === 'partial'}
                            onChange={() => setNewInvestment({ ...newInvestment, paymentType: 'partial', initialPayment: Math.floor(newInvestment.totalInvestment * 0.5) })}
                            className="w-4 h-4 text-investor"
                          />
                          <div className="flex-1">
                            <p className="font-medium text-slate-800 text-sm">Partial Payment</p>
                            <p className="text-xs text-slate-500">Pay initial amount (50% min)</p>
                          </div>
                          <span className="text-sm font-bold text-amber-600">Min ৳{Math.floor(newInvestment.totalInvestment * 0.5).toLocaleString()}</span>
                        </label>
                      </div>
                      {newInvestment.paymentType === 'partial' && (
                        <div className="border-t border-slate-200 pt-4 mt-4">
                          <label className="text-sm font-medium text-slate-600 mb-2 block">Initial Payment (৳) *</label>
                          <input
                            type="number"
                            value={newInvestment.initialPayment}
                            onChange={(e) => {
                              const val = Number(e.target.value);
                              if (val >= newInvestment.totalInvestment * 0.5 && val <= newInvestment.totalInvestment) {
                                setNewInvestment({ ...newInvestment, initialPayment: val });
                              }
                            }}
                            className="w-full px-3 py-2 border border-investor rounded-lg text-sm bg-white"
                          />
                          <p className="text-xs text-slate-500 mt-2">Balance: ৳{(newInvestment.totalInvestment - newInvestment.initialPayment).toLocaleString()}</p>
                        </div>
                      )}
                    </div>

                    <div className="grid grid-cols-3 gap-4">
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Duration (Months)</label>
                        <input type="number" value={selectedTemplate.duration} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100 cursor-not-allowed" />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Lock-in Period (Months)</label>
                        <input type="number" value={3} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100 cursor-not-allowed" />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Exit Penalty (%)</label>
                        <input type="number" value={10} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100 cursor-not-allowed" />
                      </div>
                    </div>

                    <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
                      <h4 className="text-sm font-semibold text-amber-800 mb-3 flex items-center gap-2">
                        <TrendingUp className="w-4 h-4" /> FICO Share - Profit per Ride
                      </h4>
                      <p className="text-xs text-amber-600 mb-3">Profit sharing when bikes are rented to end customers</p>
                      <div className="grid grid-cols-3 gap-4">
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Single Rent (%)</label>
                          <input type="number" value={45} disabled className="w-full px-3 py-2 border border-amber-200 rounded-lg text-sm bg-white cursor-not-allowed" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Rent to Own (%)</label>
                          <input type="number" value={55} disabled className="w-full px-3 py-2 border border-amber-200 rounded-lg text-sm bg-white cursor-not-allowed" />
                        </div>
                        <div>
                          <label className="text-xs text-slate-500 mb-1 block">Share EV (%)</label>
                          <input type="number" value={60} disabled className="w-full px-3 py-2 border border-amber-200 rounded-lg text-sm bg-white cursor-not-allowed" />
                        </div>
                      </div>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Start Date *</label>
                        <input type="date" value={newInvestment.startDate} onChange={(e) => setNewInvestment({ ...newInvestment, startDate: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                      </div>
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">End Date</label>
                        <input type="date" value={newInvestment.endDate} onChange={(e) => setNewInvestment({ ...newInvestment, endDate: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                      </div>
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Payment Method</label>
                        <select value={newInvestment.paymentMethod} onChange={(e) => setNewInvestment({ ...newInvestment, paymentMethod: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white">
                          <option value="bank">Bank Transfer</option>
                          <option value="mobile">Mobile Banking</option>
                          <option value="cash">Cash</option>
                          <option value="cheque">Cheque</option>
                        </select>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-slate-600 mb-1 block">Transaction Reference</label>
                        <input type="text" value={newInvestment.transactionReference} onChange={(e) => setNewInvestment({ ...newInvestment, transactionReference: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Auto-generated if empty" />
                      </div>
                    </div>

                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
                      <textarea value={newInvestment.notes} onChange={(e) => setNewInvestment({ ...newInvestment, notes: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" rows={2} placeholder="Add notes..." />
                    </div>

                    <div className="bg-green-50 border border-green-200 rounded-xl p-4">
                      <h4 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
                        <TrendingUp className="w-4 h-4" /> Auto-Journal Entry
                      </h4>
                      <div className="bg-white rounded-lg p-4 border border-green-100">
                        <div className="flex items-center justify-between text-sm mb-2">
                          <span className="text-slate-500">Date:</span>
                          <span className="font-medium">{newInvestment.startDate || 'Not set'}</span>
                        </div>
                        <div className="flex items-center justify-between text-sm mb-3">
                          <span className="text-slate-500">Reference:</span>
                          <span className="font-medium">{newInvestment.transactionReference || `INV/${new Date().getFullYear()}/auto`}</span>
                        </div>
                        <div className="space-y-2">
                          <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200">
                            <div>
                              <p className="text-xs text-green-600 font-medium uppercase">Debit (Dr)</p>
                              <p className="font-medium text-slate-800">{newInvestment.paymentMethod === 'bank' ? 'Bank - City Bank' : newInvestment.paymentMethod === 'cash' ? 'Cash in Hand' : 'bKash Business'} ({newInvestment.paymentMethod === 'bank' ? '1200' : newInvestment.paymentMethod === 'cash' ? '1100' : '1300'})</p>
                            </div>
                            <p className="font-bold text-green-700">৳{newInvestment.paymentType === 'partial' ? newInvestment.initialPayment.toLocaleString() : newInvestment.totalInvestment.toLocaleString()}</p>
                          </div>
                          <div className="flex justify-center">
                            <div className="w-8 h-8 rounded-full bg-green-200 flex items-center justify-center">
                              <span className="text-green-600">▼</span>
                            </div>
                          </div>
                          <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-200">
                            <div>
                              <p className="text-xs text-blue-600 font-medium uppercase">Credit (Cr)</p>
                              <p className="font-medium text-slate-800">Investor Liabilities (2200)</p>
                            </div>
                            <p className="font-bold text-blue-700">৳{newInvestment.totalInvestment.toLocaleString()}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </>
                )}
              </div>

              <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
                <button onClick={() => setShowCreateModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
                {selectedTemplate && (
                  <button onClick={handleCreate} disabled={!newInvestment.planName || !newInvestment.totalInvestment} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark disabled:opacity-50 flex items-center gap-2">
                    <Plus className="w-4 h-4" /> Create Investment
                  </button>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}