"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import toast from "react-hot-toast";
import DashboardSidebar from "@/app/components/astrologer/DashboardSidebar";

type Settlement = { id: string | number; date: string; period: string; periodStart?: string; periodEnd?: string; transactions: number; totalEarnings: number; platformCommission: number; settledAmount: number; status: "COMPLETED" | "PENDING" | "FAILED"; settledOn?: string; [key: string]: any };
type Included = { type: string; date: string; amount: number; status: string; [key: string]: any };

const FALLBACK: Settlement = { id: 1, date: "07 Sep 2025", period: "Weekly Settlement", periodStart: "01 Sep 2025", periodEnd: "07 Sep 2025", transactions: 12, totalEarnings: 14750, platformCommission: 2300, settledAmount: 12450, status: "COMPLETED", settledOn: "08 Sep 2025, 10:24 AM" };
const INCLUDED: Included[] = [
  { type: "Chat Consultation", date: "01 Sep 2025, 10:15 AM", amount: 250, status: "Included" },
  { type: "Audio Call", date: "01 Sep 2025, 11:30 AM", amount: 400, status: "Included" },
  { type: "Video Call", date: "02 Sep 2025, 04:20 PM", amount: 600, status: "Included" },
  { type: "Chat Consultation", date: "03 Sep 2025, 09:10 AM", amount: 250, status: "Included" },
  { type: "Audio Call", date: "03 Sep 2025, 02:45 PM", amount: 500, status: "Included" },
];

function money(v:any){const n=Number(v??0);return Number.isFinite(n)?`₹${Math.round(n).toLocaleString("en-IN")}`:"₹0"}
function normalize(raw:any):Settlement{return {...raw,id:raw.id??raw.settlementId??1,date:raw.date??raw.settlementDate??raw.periodEnd??FALLBACK.date,period:raw.periodLabel??raw.settlementPeriodLabel??raw.period??FALLBACK.period,periodStart:raw.periodStart??raw.startDate??FALLBACK.periodStart,periodEnd:raw.periodEnd??raw.endDate??FALLBACK.periodEnd,transactions:Number(raw.transactions??raw.transactionCount??raw.totalTransactions??FALLBACK.transactions),totalEarnings:Number(raw.totalEarnings??raw.grossAmount??raw.earnings??FALLBACK.totalEarnings),platformCommission:Number(raw.platformCommission??raw.commission??raw.platformCharges??FALLBACK.platformCommission),settledAmount:Number(raw.settledAmount??raw.netAmount??raw.payoutAmount??FALLBACK.settledAmount),status:String(raw.status??"COMPLETED").toUpperCase().includes("FAIL")?"FAILED":String(raw.status??"").toUpperCase().includes("PEND")?"PENDING":"COMPLETED",settledOn:raw.settledOn??raw.settlementDateTime??raw.processedAt??FALLBACK.settledOn}}
function Icon({name,size=21}:{name:string;size?:number}){const p:any={width:size,height:size,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:1.9,strokeLinecap:"round",strokeLinejoin:"round"};const x:any={bank:<><path d="m3 9 9-5 9 5M5 10v7M9 10v7M15 10v7M19 10v7M3 19h18M2 21h20"/></>,list:<><path d="M5 6h16M5 12h16M5 18h16"/><path d="M3 6h.01M3 12h.01M3 18h.01"/></>,check:<path d="m5 12 4 4L19 6"/>,chev:<path d="m9 5 7 7-7 7"/>,back:<path d="m15 18-6-6 6-6"/>,info:<><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></>,chat:<><path d="M20 11a8 8 0 0 1-8 8H7l-4 3v-6a8 8 0 1 1 17-5Z"/></>,call:<path d="M7 4h3l1.5 4-2 1.5a13 13 0 0 0 5 5L16 12.5l4 1.5v3c0 1-1 2-2 2C10 19 5 14 5 6c0-1 1-2 2-2Z"/>,video:<><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3"/></>,send:<><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></>};return <svg {...p}>{x[name]||x.list}</svg>}

export default function SettlementDetailsPage(){
 const router=useRouter();const params=useParams<{id:string}>();const search=useSearchParams();const id=String(params?.id||"");const [s,setS]=useState<Settlement>(FALLBACK);const [loading,setLoading]=useState(true);const [live,setLive]=useState(false);
 useEffect(()=>{const token=localStorage.getItem("astrologerToken");if(!token){router.replace("/astrologer/signin");return;}fetch("/api/astrologer/wallet/settlement-history",{headers:{Accept:"application/json",Authorization:token},cache:"no-store"}).then(async r=>{const b=await r.json();if(!r.ok)throw new Error(b?.message||"Unable to load settlement.");const arr=Array.isArray(b?.data)?b.data:[];const found=arr.find((x:any)=>String(x.id??x.settlementId)===id);if(found){setS(normalize(found));setLive(true)}}).catch(e=>{console.error(e);toast.error("Using preview settlement details until live records are available.")}).finally(()=>setLoading(false))},[id,router]);
 if(loading)return <Shell><div className="loading">Loading settlement details...</div></Shell>;
 const failed=s.status==="FAILED";const period=s.periodStart&&s.periodEnd?`${s.periodStart} - ${s.periodEnd}`:s.date;
 return <Shell><div className="crumb">Home <span>›</span> Wallet <span>›</span> Settlement History <span>›</span> <b>Settlement Details</b></div><header className="head"><div><h1>Settlement Details</h1><p>View complete information about this settlement.</p></div><Link href="/astrologer/wallet/settlement-history" className="back"><Icon name="back"/> Back to Settlement History</Link></header>
 <section className="hero"><div className="datebox"><small>SEP</small><strong>07</strong><span>SUN</span></div><div className="hero-info"><h2>{s.period}</h2><p>{period}</p><span>{s.transactions} Transactions</span></div><span className={`status ${s.status.toLowerCase()}`}><Icon name={failed?"info":"check"} size={14}/>{failed?"Failed":s.status.charAt(0)+s.status.slice(1).toLowerCase()}</span><small className="settled-on">Settled on {s.settledOn || "--"}</small><div className="hero-values"><div><span>Total Earnings</span><b>{money(s.totalEarnings)}</b></div><div><span>Platform Commission</span><b>- {money(s.platformCommission)}</b></div><div><span>Settled Amount</span><b className="green">{money(s.settledAmount)}</b></div></div></section>
 <div className="grid"><section className="panel"><h2><span><Icon name="bank"/></span>Payout Information</h2><InfoRow label="Payout Method" value="Bank Transfer (IMPS)"/><InfoRow label="Bank Name" value="State Bank of India"/><InfoRow label="Account Number" value="XXXX XXXX 1234"/><InfoRow label="IFSC Code" value="SBIN0001234"/><InfoRow label="Transaction ID" value="PAYOUT202509080001"/><InfoRow label="Reference ID" value="ASTRO20250907"/><InfoRow label="Settlement Date" value={s.settledOn || "08 Sep 2025, 10:24 AM"}/></section>
 <section className="panel included"><h2><span><Icon name="list"/></span>Transactions Included ({s.transactions}) <Link href="/astrologer/wallet">View All <Icon name="chev" size={17}/></Link></h2><div className="mini-table"><div className="tr th"><span>#</span><span>Type</span><span>Date &amp; Time</span><span>Amount</span><span>Status</span></div>{INCLUDED.map((x,i)=><div className="tr" key={i}><span>{i+1}</span><span><Icon name={x.type.includes("Video")?"video":x.type.includes("Audio")?"call":"chat"} size={17}/>{x.type}</span><span>{x.date}</span><b>{money(x.amount)}</b><em>{x.status}</em></div>)}</div><div className="view-all">View All Transactions ({s.transactions}) <Icon name="chev" size={18}/></div></section></div>
 <section className="help"><span><Icon name="info"/></span><div><h3>Need Help?</h3><p>If you have any questions about this settlement, please contact our support team.</p></div><button><Icon name="send"/> Contact Support</button></section>
 {!live&&<div className="preview"><Icon name="info" size={16}/> Live settlement history currently has no records, so this detail page is showing the UI preview data. It will switch to the live record when the API returns it.</div>}
 <Link href="/astrologer/wallet/withdraw" className="withdraw"><Icon name="send"/> Submit Withdraw Request</Link>
 </Shell>
}
function InfoRow({label,value}:{label:string;value:any}){return <div className="info-row"><span>{label}</span><b>{value}</b></div>}
function Shell({children}:{children:React.ReactNode}){return <div className="page"><DashboardSidebar active="Wallet"/><main className="main">{children}<style jsx>{css}</style></main></div>}
const css=`.page{min-height:100vh;display:flex;background:radial-gradient(circle at 70% 0%,rgba(135,75,30,.2),transparent 36%),#0b0d0e;color:#f4efeb}.main{flex:1;min-width:0;padding:27px 30px 35px}.crumb{font-size:14px;color:#aaa19a;margin-bottom:5px}.crumb span{margin:0 8px;color:#6d655f}.crumb b{color:#f2ece7}.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.head h1{font-size:31px;margin:0 0 4px}.head p{margin:0;color:#c2b9b2}.back{height:45px;padding:0 17px;border:1px solid #72655d;border-radius:8px;color:#f1eae4;text-decoration:none;display:flex;align-items:center;gap:10px}.hero,.panel,.help{border:1px solid rgba(121,104,94,.42);border-radius:13px;background:linear-gradient(135deg,rgba(40,33,29,.96),rgba(26,23,22,.97))}.hero{min-height:196px;padding:23px 34px;display:grid;grid-template-columns:82px 1fr auto auto;grid-template-rows:auto 1fr;align-items:start;column-gap:18px}.datebox{width:72px;height:76px;background:#030303;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}.datebox small{color:#ffd600;font-weight:800}.datebox strong{font-size:26px;line-height:26px}.datebox span{font-size:11px}.hero-info h2{font-size:19px;margin:3px 0 6px}.hero-info p,.hero-info span{display:block;color:#aaa19a;font-size:14px;margin:0 0 5px}.status{align-self:start;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;font-size:13px;font-weight:700}.status.completed{color:#00dca6;background:rgba(0,156,113,.18);border:1px solid rgba(0,220,166,.35)}.status.failed{color:#ff5661;background:rgba(156,27,39,.18);border:1px solid rgba(255,83,96,.4)}.status.pending{color:#ffd600;background:rgba(132,104,0,.18);border:1px solid rgba(255,214,0,.4)}.settled-on{color:#b0a7a0;align-self:center}.hero-values{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:15px;padding-top:17px;border-top:1px solid rgba(116,98,88,.28)}.hero-values div{text-align:center;border-right:1px solid rgba(116,98,88,.35)}.hero-values div:last-child{border:0}.hero-values span{display:block;color:#aaa19a}.hero-values b{display:block;font-size:21px;margin-top:4px}.green{color:#00dca6!important}.grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:16px;margin-top:17px}.panel{padding:17px 23px}.panel h2{margin:0 0 11px;display:flex;align-items:center;gap:12px;font-size:18px}.panel h2>span{width:38px;height:38px;display:grid;place-items:center;color:#ffd600;background:rgba(114,91,0,.2);border:1px solid #7e6b00;border-radius:9px}.info-row{min-height:43px;border-top:1px solid rgba(116,98,88,.25);display:flex;align-items:center;justify-content:space-between;gap:15px;color:#c2b9b2;font-size:14px}.info-row b{color:#f1ebe6}.included h2{justify-content:flex-start}.included h2 a{margin-left:auto;display:flex;align-items:center;gap:5px;color:#c7beb7;font-size:13px;text-decoration:none;font-weight:500}.mini-table{border:1px solid rgba(116,98,88,.35);border-radius:10px;overflow:hidden}.tr{min-height:41px;display:grid;grid-template-columns:35px 1.25fr 1.35fr .65fr .75fr;align-items:center;gap:7px;padding:0 12px;border-top:1px solid rgba(116,98,88,.23);font-size:12px}.tr:first-child{border-top:0}.tr span:nth-child(2){display:flex;align-items:center;gap:9px}.tr span:nth-child(2) svg{color:#ffd600}.tr em{font-style:normal;color:#00dca6;background:rgba(0,156,113,.17);border:1px solid rgba(0,220,166,.3);padding:5px 9px;border-radius:12px;width:max-content}.view-all{margin-top:10px;border:1px solid rgba(116,98,88,.45);border-radius:9px;min-height:42px;display:flex;align-items:center;justify-content:center;gap:7px;color:#d5ccc5;font-weight:600;font-size:13px}.help{margin-top:17px;min-height:75px;padding:14px 17px;display:flex;align-items:center;gap:14px}.help>span{width:43px;height:43px;display:grid;place-items:center;color:#ffd600;background:rgba(114,91,0,.2);border:1px solid #7e6b00;border-radius:9px}.help h3{margin:0 0 4px;color:#ffd600}.help p{margin:0;color:#b8afa8;font-size:13px}.help button{margin-left:auto;display:flex;align-items:center;gap:9px;height:40px;padding:0 15px;border:1px solid #806b00;background:transparent;color:#ffd600;border-radius:8px;font-weight:700}.withdraw{height:55px;margin-top:16px;border-radius:7px;background:#ffd600;color:#15110b;display:flex;align-items:center;justify-content:center;gap:11px;text-decoration:none;font-weight:800;font-size:16px}.preview{display:flex;gap:8px;align-items:center;margin-top:10px;color:#9d948d;font-size:12px}.preview svg{color:#ffd600}.loading{margin-top:60px;padding:60px;text-align:center;border:1px solid #4e443e;border-radius:13px;color:#aaa19a}@media(max-width:1050px){.grid{grid-template-columns:1fr}.hero{grid-template-columns:75px 1fr auto}.settled-on{grid-column:2/-1}.hero-values{margin-top:15px}}@media(max-width:700px){.main{padding:18px 12px}.head{align-items:flex-start;flex-direction:column;gap:12px}.back{width:100%;justify-content:center}.hero{grid-template-columns:70px 1fr;padding:17px}.hero>.status{grid-column:2;margin-top:7px}.settled-on{grid-column:2}.hero-values{grid-template-columns:1fr;gap:10px}.hero-values div{border-right:0;border-bottom:1px solid rgba(116,98,88,.3);padding-bottom:8px}.hero-values div:last-child{border:0}.help{align-items:flex-start;flex-wrap:wrap}.help button{margin-left:0;width:100%;justify-content:center}.included{overflow-x:auto}.mini-table{min-width:690px}}
`;