"use client";

import { useState } from "react";
import { CheckCircle2, ShieldCheck, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function TaxHero() {
  const [mode, setMode] = useState<"monthly" | "yearly">("monthly");

  return (
    <section className="bg-[#f4f7f6] px-4 md:px-8 py-12 flex items-center">
      <div className="mx-auto flex flex-col lg:flex-row gap-12 items-start">
        {/* Left Column: Text Content */}
        <div className="space-y-4 w-full lg:w-[30%]">
          <div className="inline-block px-4 py-1 rounded-full bg-[#e1eded] text-[#0d7a7a] text-sm font-semibold border border-[#c5dfdf]">
            Budget 2025-2026
          </div>

          <h1 className="text-4xl md:text-5xl font-bold text-[#0a3d3d] leading-tight">
            <span className="text-black text-2xl md:text-3xl ">
              Calculate Your
            </span>
            <br />
            <span className="text-[#0d7a7a]">Income Tax on Salary</span>
          </h1>

          <p className="text-gray-600 text-lg max-w-md">
            This is the latest tax calculator as per 2025-2026 budget presented
            by Government of Pakistan.
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-white rounded-lg shadow-sm">
                <CheckCircle2 className="text-[#0d7a7a] w-5 h-5" />
              </div>
              <div>
                <p className="text-sm font-bold text-gray-800 leading-none">
                  100% Updated
                </p>
                <p className="text-xs text-gray-500">2025-2026 Rates</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="p-2 bg-white rounded-lg shadow-sm">
                <Zap className="text-[#0d7a7a] w-5 h-5" />
              </div>
              <div>
                <p className="text-sm font-bold text-gray-800 leading-none">
                  Instant & Accurate
                </p>
                <p className="text-xs text-gray-500">Calculations</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="p-2 bg-white rounded-lg shadow-sm">
                <ShieldCheck className="text-[#0d7a7a] w-5 h-5" />
              </div>
              <div>
                <p className="text-sm font-bold text-gray-800 leading-none">
                  Trusted by
                </p>
                <p className="text-xs text-gray-500">Thousands</p>
              </div>
            </div>
          </div>
        </div>

        {/* Right Column: Calculator Card */}
        <div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 flex flex-col md:flex-row w-full md:w-[70%]">
          {/* Inputs Section */}
          <div className="p-8 flex-1 border-b md:border-b-0 md:border-r border-gray-100">
            <h3 className="text-xl font-bold text-gray-800 mb-6">
              Your Details
            </h3>

            <Tabs
              defaultValue="monthly"
              className="w-full mb-6"
              onValueChange={(value) => setMode(value as "monthly" | "yearly")}
            >
              <TabsList className="grid h-13! w-full grid-cols-2 rounded-full bg-gray-50 border border-gray-100 p-1">
                <TabsTrigger
                  value="monthly"
                  className="rounded-full data-[state=active]:bg-[#0d7a7a] data-[state=active]:text-white data-[state=active]:shadow-md transition-all text-gray-500 font-medium"
                >
                  Monthly
                </TabsTrigger>
                <TabsTrigger
                  value="yearly"
                  className="rounded-full data-[state=active]:bg-[#0d7a7a] data-[state=active]:text-white data-[state=active]:shadow-md transition-all text-gray-500 font-medium"
                >
                  Yearly
                </TabsTrigger>
              </TabsList>
            </Tabs>

            <div className="space-y-4">
              <div>
                <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider block mb-2">
                  Monthly Salary / Income (PKR)
                </label>
                <div className="relative">
                  <Input
                    placeholder="Enter amount"
                    className="h-12 border-gray-200 focus:ring-[#0d7a7a]"
                  />
                  <span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm">
                    Rs.
                  </span>
                </div>
              </div>

              <div>
                <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider block mb-2">
                  Select Tax Year
                </label>
                <Select defaultValue="2025">
                  <SelectTrigger className="h-12! w-full border-gray-200">
                    <SelectValue placeholder="Tax Year" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectGroup>
                      <SelectLabel>Available Tax Years</SelectLabel>
                      <SelectItem className="h-12!" value="2025">
                        2025-2026
                      </SelectItem>
                      <SelectItem className="h-12!" value="2024">
                        2024-2025
                      </SelectItem>
                    </SelectGroup>
                  </SelectContent>
                </Select>
              </div>

              <Button className="w-full h-12 bg-[#0d7a7a] hover:bg-[#0a6666] text-white font-bold rounded-lg mt-4 transition-all">
                Calculate Tax
              </Button>

              <p className="text-[10px] text-gray-400 mt-4 leading-tight">
                This calculator is based on the budget 2025-2026 presented by
                the Government of Pakistan.
              </p>
            </div>
          </div>

          {/* Results Summary Section */}
          <div className="p-8 bg-[#fafcfc] flex-1">
            <h3 className="text-xl font-bold text-gray-800">
              Calculation Summary
            </h3>

            <hr className="my-6" />

            <div className="space-y-6">
              <div className="flex justify-between items-center text-sm">
                <span className="text-gray-500">Monthly Income</span>
                <span className="font-semibold text-gray-700 font-mono">
                  Rs. 0
                </span>
              </div>
              <div className="flex justify-between items-center text-sm">
                <span className="text-gray-500">Monthly Tax</span>
                <span className="font-semibold text-gray-700 font-mono">
                  Rs. 0
                </span>
              </div>
              <div className="flex justify-between items-center text-sm">
                <span className="text-gray-500">Salary After Tax</span>
                <span className="font-semibold text-gray-700 font-mono">
                  Rs. 0
                </span>
              </div>

              <hr />

              <div className="flex justify-between items-center text-sm">
                <span className="text-gray-500">Yearly Income</span>
                <span className="font-semibold text-gray-700 font-mono">
                  Rs. 0
                </span>
              </div>
              <div className="flex justify-between items-center text-sm">
                <span className="text-gray-500">Yearly Tax</span>
                <span className="font-semibold text-gray-700 font-mono">
                  Rs. 0
                </span>
              </div>
            </div>
            <div className="mt-12 pt-8 border-t border-gray-200">
              <div className="flex justify-between items-center">
                <span className="text-[#0d7a7a] font-bold text-lg">
                  Yearly Income After Tax
                </span>
                <span className="text-[#0d7a7a] font-bold text-2xl font-mono">
                  Rs. 0
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}